小编典典

将lodash导入angular2 +打字稿应用程序

javascript

我很难尝试导入lodash模块。我已经使用npm + gulp设置了我的项目,并不断碰壁。我尝试过常规lodash,但也尝试过lodash-es。

lodash npm软件包:(在软件包根文件夹中有一个index.js文件)

import * as _ from 'lodash';

结果是:

error TS2307: Cannot find module 'lodash'.

lodash-es npm软件包:(在package根文件夹的lodash.js中具有默认输出)

import * as _ from 'lodash-es/lodash';

结果是:

error TS2307: Cannot find module 'lodash-es'.

gulp任务和webstorm都报告相同的问题。

有趣的是,这没有返回错误:

import 'lodash-es/lodash';

…但是当然没有“ _” …

我的tsconfig.json文件:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

我的gulpfile.js:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = 'app/**/*.ts';

gulp.task('ts', function () {
    var tscConfig = require('./tsconfig.json');

    gulp.src([tsPath])
        .pipe(sourcemaps.init())
        .pipe(ts(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('./../js'));
});

gulp.task('watch', function() {
    gulp.watch([tsPath], ['ts']);
});

gulp.task('default', ['ts', 'watch']);

如果我正确理解,则tsconfig中的moduleResolution:’node’应该将import语句指向node_modules文件夹,其中安装了lodash和lodash-
es。我还尝试了许多不同的导入方式:绝对路径,相对路径,但似乎没有任何效果。有任何想法吗?

如有必要,我可以提供一个小的zip文件来说明问题。


阅读 264

收藏
2020-04-25

共1个答案

小编典典

从Typescript 2.0开始,以下是执行此操作的方法:(不建议使用tsd和打字,而推荐使用以下内容):

$ npm install --save lodash

# This is the new bit here: 
$ npm install --save-dev @types/lodash

然后,在您的.ts文件中:

要么:

import * as _ from "lodash";

或者(由@Naitik建议):

import _ from "lodash";

我不太肯定有什么区别。我们使用并喜欢第一种语法。但是,有些人报告说第一种语法不适用于他们,而其他人则评论说后者的语法与延迟加载的webpack模块不兼容。YMMV。

编辑于2017年2月27日:

根据下面的@Koert,import * as _ from "lodash";是Typescript 2.2.1,lodash 4.17.4和@
types / lodash 4.14.53以来唯一的工作语法。他说,其他建议的导入语法给出错误“没有默认导出”。

2020-04-25