我有一个困难的时间试图得到lodash模块导入。我已经使用npm+gulp设置了我的项目,并不断撞击相同的墙。我试过普通的lodash,也试过lodash。

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

import * as _ from 'lodash';    

结果:

error TS2307: Cannot find module 'lodash'.

lodash-es npm包:(在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中的modulerresolution:'node'应该将import语句指向node_modules文件夹,其中安装了lodash和lodash-es。我还尝试了许多不同的导入方法:绝对路径、相对路径,但似乎都不起作用。什么好主意吗?

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


当前回答

安装lodash

Sudo NPM安装类型—全局 NPM安装lodash—保存 类型安装lodash—ambient—保存

在index.html中,为lodash添加map:

System.config ({ 包:{ 应用:{ 格式:“注册”, defaultExtension:“js” } }, 地图:{ lodash:“node_modules / lodash index.js” } });

在.ts代码中导入lodash模块

Import _ from 'lodash';

其他回答

安装通通终端:

npm install lodash --save
tsd install lodash --save

在index.html中添加路径

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

在.ts文件的顶部导入lodash

import * as _ from 'lodash'

2016年9月26日更新:

正如@Taytay的回答所说,我们现在可以使用几个月前使用的“typings”安装:

npm install --save @types/lodash

以下是支持这个答案的一些参考文献:

https://www.npmjs.com/package/@types/lodash NPM @types org包中的TypeScript类型

如果仍在使用类型安装,请参阅下面(其他人)关于“'——ambient''和'——global " ''的评论。

此外,在新的快速入门中,配置不再在index.html中;它现在在SystemJS .config.ts中(如果使用SystemJS)。

最初的回答:

这在我的mac上是有效的(在按照快速入门安装了Angular 2之后):

sudo npm install typings --global
npm install lodash --save 
typings install lodash --ambient --save

您将发现各种文件受到影响,例如:

/typings/main.d.ts /typings.json /package.json

Angular 2快速入门使用System.js,所以我在index.html的配置中添加了'map',如下所示:

System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      lodash: 'node_modules/lodash/lodash.js'
    }
  });

然后在我的.ts代码中,我能够做到:

import _ from 'lodash';

console.log('lodash version:', _.VERSION);

2016年年中起编辑:

正如@tibbus提到的,在某些情况下,你需要:

import * as _ from 'lodash';

如果从angular2-seed开始,如果你不想每次都导入,你可以跳过映射和导入步骤,只需取消tools/config/project.config.ts中的lodash行注释。

为了让我的测试与lodash一起工作,我还必须在karma.conf.js中的文件数组中添加一行:

'node_modules/lodash/lodash.js',

请注意npm install——save将在生产代码中培养应用程序所需的任何依赖关系。 至于“类型”,它只被TypeScript要求,而TypeScript最终会转译成JavaScript。因此,您可能不希望在生产代码中使用它们。我建议把它放在项目的devDependencies中,使用

npm install --save-dev @types/lodash

or

npm install -D @types/lodash

(参见Akash的帖子)。顺便说一下,ng2 tuto就是这么做的。

或者,以下是你的包装方式。Json可以是这样的:

{
    "name": "my-project-name",
    "version": "my-project-version",
    "scripts": {whatever scripts you need: start, lite, ...},
    // here comes the interesting part
    "dependencies": {
       "lodash": "^4.17.2"
    }
    "devDependencies": {
        "@types/lodash": "^4.14.40"
    }
}

只是一个小提示

npm的好处是,如果你不确定你正在寻找的依赖项的最新可用版本,你可以先简单地执行npm install——save或——save-dev,它会自动在你的包中为你设置。Json供进一步使用。

从Typescript 2.0开始,@types npm模块被用来导入类型。

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

既然已经回答了这个问题,我将讨论如何有效地导入lodash

导入整个库的安全方法(在main.ts中)

import 'lodash';

这是这里的新部分:

使用您需要的函数实现一个更轻的lodash

import chain from "lodash/chain";
import value from "lodash/value";
import map from "lodash/map";
import mixin from "lodash/mixin";
import _ from "lodash/wrapperLodash";

来源:https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba .kg6azugbd

PS:上面的文章是一篇关于改善构建时间和减少应用大小的有趣文章

下面是如何做到这一点的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中唯一可用的语法。他说,另一种建议的导入语法给出的错误是“没有默认导出”。