javascript - 将lodash导入angular2 +打字稿应用程序(Importing lodash into angular2 + typescript application)

Question

I am having a hard time trying to get the lodash modules imported.

(我很难尝试导入lodash模块。)

I've setup my project using npm+gulp, and keep hitting the same wall.

(我已经使用npm + gulp设置了我的项目，并不断碰壁。)

I've tried the regular lodash, but also lodash-es.

(我尝试过常规lodash，但也尝试过lodash-es。)

The lodash npm package: (has an index.js file in the package root folder)

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

import * as _ from 'lodash';    

Results in:

(结果是：)

error TS2307: Cannot find module 'lodash'.

The lodash-es npm package: (has a defaut export in lodash.js i the package root folder)

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

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

Results in:

(结果是：)

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

Both the gulp task and webstorm report the same issue.

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

Funny fact, this returns no error:

(有趣的是，这没有返回错误：)

import 'lodash-es/lodash';

... but of course there is no "_" ...

(...但是当然没有“ _” ...)

My tsconfig.json file:

(我的tsconfig.json文件：)

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

My gulpfile.js:

(我的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']);

If i understand correctly, moduleResolution:'node' in my tsconfig should point the import statements to the node_modules folder, where lodash and lodash-es are installed.

(如果我正确理解，则tsconfig中的moduleResolution：'node'应该将import语句指向node_modules文件夹，其中安装了lodash和lodash-es。)

I've also tried lots of different ways to import: absolute paths, relative paths, but nothing seems to work.

(我还尝试了许多不同的导入方式：绝对路径，相对路径，但似乎没有任何效果。)

Any ideas?

(有任何想法吗？)

If necessary i can provide a small zip file to illustrate the problem.

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

  ask by Davy translate from so

Answer 1

Here is how to do this as of Typescript 2.0: (tsd and typings are being deprecated in favor of the following):

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

$ npm install --save lodash

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

Then, in your .ts file:

(然后，在您的.ts文件中：)

Either:

(要么：)

import * as _ from "lodash";

Or (as suggested by @Naitik):

(或者（由@Naitik建议）：)

import _ from "lodash";

I'm not positive what the difference is.

(我不太肯定有什么区别。)

We use and prefer the first syntax.

(我们使用并喜欢第一种语法。)

However, some report that the first syntax doesn't work for them, and someone else has commented that the latter syntax is incompatible with lazy loaded webpack modules.

(但是，有些人报告说第一种语法不适用于他们，而另一些人则评论说后者的语法与延迟加载的webpack模块不兼容。)

YMMV.

(YMMV。)

Edit on Feb 27th, 2017:

(编辑于2017年2月27日：)

According to @Koert below, import * as _ from "lodash";

(根据下面的@Koert， import * as _ from "lodash";)

is the only working syntax as of Typescript 2.2.1, lodash 4.17.4, and @types/lodash 4.14.53.

(是Typescript 2.2.1，lodash 4.17.4和@ types / lodash 4.14.53以来唯一的工作语法。)

He says that the other suggested import syntax gives the error "has no default export".

(他说，其他建议的导入语法给出错误“没有默认导出”。)