将lodash导入angular2 +打字稿应用程序 [英] Importing lodash into angular2 + typescript application

问题描述

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

I am having a hard time trying to get the lodash modules imported. I've setup my project using npm+gulp, and keep hitting the same wall. I've tried the regular lodash, but also lodash-es.

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

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

import * as _ from 'lodash';    

结果:

error TS2307: Cannot find module 'lodash'.

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

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

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

结果:

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

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

Both the gulp task and webstorm report the same issue.

有趣的事实，这没有返回错误:

Funny fact, this returns no error:

import 'lodash-es/lodash';

...但是当然没有"_" ...

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

我的tsconfig.json文件:

My tsconfig.json file:

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

我的gulpfile.js:

My 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.我还尝试了许多不同的导入方式:绝对路径，相对路径，但似乎没有任何效果.有任何想法吗?

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. I've also tried lots of different ways to import: absolute paths, relative paths, but nothing seems to work. Any ideas?

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

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

推荐答案

从Typescript 2.0开始，以下是操作方法: (不推荐使用tsd和打字，而推荐使用以下内容):

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

$ npm install --save lodash

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

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

Then, in your .ts file:

要么:

import * as _ from "lodash";

或者(按照@Naitik的建议):

Or (as suggested by @Naitik):

import _ from "lodash";

我不同意是什么.我们使用并喜欢第一种语法.但是，有些人报告说第一种语法不适用于他们，而另一些人则评论说，后一种语法与延迟加载的webpack模块不兼容. YMMV.

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. YMMV.

2017年2月27日

Edit on Feb 27th, 2017:

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

According to @Koert below, 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. He says that the other suggested import syntax gives the error "has no default export".

这篇关于将lodash导入angular2 +打字稿应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！