将 lodash 导入 angular2 + typescript 应用程序 [英] 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 default 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' 应该将导入语句指向 node_modules 文件夹，其中安装了 lodash 和 lodash-es.我也尝试了很多不同的导入方式:绝对路径、相对路径，但似乎没有任何效果.有什么想法吗?

If I understood 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 和typings 正在被弃用，以支持以下内容):

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 模块不兼容.天啊.

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 + typescript 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！