将 lodash 导入 angular2 + typescript 应用程序

Question

我很难尝试导入 lodash 模块。我已经使用 npm+gulp 设置了我的项目，并且一直在碰壁。我试过常规的 lodash，也试过 lodash-es。

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 都报告相同的问题。

有趣的是，这个returns没有错误：

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' 应该将导入语句指向安装了 lodash 和 lodash-es 的 node_modules 文件夹。我也尝试了很多不同的导入方式：绝对路径、相对路径，但似乎没有任何效果。有什么想法吗？

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

Answer 1

尝试 >> tsd install lodash --save

Answer 2

我遇到了完全相同的问题，但是在 Angular2 应用程序中，这篇文章正好解决了这个问题：https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

文章摘要：

安装库npm install lodash --save
为 Lodash 添加 TypeScript 定义 tsd install underscore
包括脚本<script src="node_modules/lodash/index.js"></script>
配置 SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
导入模块import * as _ from ‘lodash’;

希望对你的情况也有帮助

Answer 3

通过终端安装所有：

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'

Answer 4

2016 年 9 月 26 日更新：

正如@Taytay 的回答所说，我们现在可以使用：

而不是我们几个月前使用的 'typings' 安装

npm install --save @types/lodash

以下是支持该答案的一些其他参考资料：

https://www.npmjs.com/package/@types/lodash

如果仍在使用 typings 安装，请参阅下面（其他人）关于“''--ambient''' 和 '''--global''' 的评论。

此外，在新的快速入门中，配置不再在index.html；它现在在 systemjs.config.ts（如果使用 SystemJS）。

原答案：

这适用于我的 mac（根据 Quick Start 安装 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 Quickstart使用System.js，所以我在index.html中的config中添加了'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.[=77中的lodash行=].

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

'node_modules/lodash/lodash.js',

Answer 5

安装 lodash

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

在 index.html 中，为 lodash 添加地图：

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

在.ts代码中导入lodash模块

import _ from 'lodash';

Answer 6

第 1 步：修改 package.json 文件以在依赖项中包含 lodash。

  "dependencies": {
"@angular/common":  "2.0.0-rc.1",
"@angular/compiler":  "2.0.0-rc.1",
"@angular/core":  "2.0.0-rc.1",
"@angular/http":  "2.0.0-rc.1",
"@angular/platform-browser":  "2.0.0-rc.1",
"@angular/platform-browser-dynamic":  "2.0.0-rc.1",
"@angular/router":  "2.0.0-rc.1",
"@angular/router-deprecated":  "2.0.0-rc.1",
"@angular/upgrade":  "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"lodash":"^4.12.0",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"  }

步骤 2:I 我在我的 angular2 应用程序中使用 SystemJs 模块加载器。所以我会修改 systemjs.config.js 文件来映射 lodash。

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'lodash':                    'node_modules/lodash'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'lodash':                    {main:'index.js', defaultExtension:'js'}
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);})(this);

第 3 步：现在执行 npm install

第 4 步：在您的文件中使用 lodash。

import * as _ from 'lodash';
let firstIndexOfElement=_.findIndex(array,criteria);

Answer 7

我在 webpack 中使用 ng2，而不是系统 JS。我需要的步骤是：

npm install underscore --save
typings install dt~underscore --global --save

然后在我希望将下划线导入的文件中：

import * as _ from 'underscore';

Answer 8

我使用以下命令在我的项目中成功导入了 lodash:

npm install lodash --save
typings install lodash --save

然后我通过以下方式导入它：

import * as _ from 'lodash';

在systemjs.config.js中我定义了这个：

map: { 'lodash' : 'node_modules/lodash/lodash.js' }

Answer 9

如果其他人运行遇到这个问题并且 none 以上解决方案由于 "Duplicate identifier" 问题而起作用，运行这个：

npm install typings --global

对于旧版本的打字，事情会变得一团糟，你会遇到一堆 "Duplicate identifier" 问题。据我所知，您也不需要再使用 --ambient。

所以一旦打字是最新的，这应该可以工作（使用 Angular 2 快速入门）。

运行:

npm install lodash --save 
typings install lodash --save

首先，将此添加到 systemjs.config.js：

'lodash':                     'node_modules/lodash/lodash.js'

现在您可以在任何文件中使用它：import * as _ from 'lodash';

如果仍有问题，请删除您的打字文件夹和运行 npm install。

Answer 10

以下是从 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 中唯一有效的语法。他说其他建议的导入语法给出了错误 "has no default export".

Answer 11

通过 typings 和 tsd 命令管理类型最终被弃用，取而代之的是通过 npm install @types/lodash.

使用 npm

然而，我在导入语句中与"Cannot find module lodash"纠缠了很长时间：

import * as _ from 'lodash';

最终我意识到 Typescript 只会从 node_modules/@types 开始版本 2 加载类型，而我的 VsCode 语言服务仍在使用 1.8，所以编辑器报错。

如果您使用 VSCode，则需要包括

"typescript.tsdk":  "node_modules/typescript/lib"

在您的 VSCode settings.json 文件中（用于工作区设置）并确保您通过 npm install typescript@2.0.2 --save-dev

安装了 typescript 版本 >= 2.0.0

在那之后我的编辑就不会抱怨导入语句了。

Answer 12

从 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：以上文章是一篇关于缩短构建时间和减小应用程序大小的有趣读物

Answer 13

要事第一

npm install --save lodash

npm install -D @types/lodash

加载完整的 lodash 库

//some_module_file.ts
// Load the full library...
import * as _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)

或仅加载我们将要使用的函数

import * as debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)

`UPDATE - March 2017`

我目前正在使用 ES6 modules，最近我可以像这样使用 lodash：

// the-module.js (IT SHOULD WORK WITH TYPESCRIPT - .ts AS WELL) 
// Load the full library...
import _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)
...

OR `import` 具体 `lodash functionality`:

import debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)
...

注意 - syntax 中不需要 * as 的区别

参考文献：

祝你好运。

Answer 14

请注意，npm install --save 将促进您的应用在生产代码中需要的任何依赖性。
至于 "typings"，它只是 TypeScript 需要的，最终在 JavaScript 中进行了转译。因此，您可能不想在生产代码中使用它们。我建议改为使用

将它放在项目的 devDependencies 中

npm install --save-dev @types/lodash

或

npm install -D @types/lodash

（例如参见 Akash post）。顺便说一句，这是在ng2 tuto中完成的方式。

或者，您的 package.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 for，它会自动在您的 package.json 中为您设置它以供进一步使用。

Answer 15

另一个优雅的解决方案是只获取你需要的，而不是导入所有的 lodash

import {forEach,merge} from "lodash";

然后在您的代码中使用它

forEach({'a':2,'b':3}, (v,k) => {
   console.log(k);
})

Answer 16

我也为 lodash-es 创建了打字，所以现在您实际上可以执行以下操作

安装

npm install lodash-es -S
npm install @types/lodash-es -D

用法

import kebabCase from "lodash-es/kebabCase";
const wings = kebabCase("chickenWings");

如果你使用 rollup，我建议使用它而不是 lodash 因为它会被正确地摇动。

Answer 17

我在 Angular 4.0.0 上使用 preboot/angular-webpack，不得不走一条稍微不同的路线。

@Taytay 提供的解决方案大部分对我有用：

npm install --save lodash
npm install --save @types/lodash

并将函数导入给定的 .component.ts 文件，使用：

import * as _ from "lodash";

之所以有效，是因为没有 "default" 导出 class。我的不同之处在于我需要找到在第 3 方库中加载的方式：vendor.ts 位于：

src/vendor.ts

我的 vendor.ts 文件现在看起来像这样：

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import 'lodash';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

Answer 18

从 lodash 部分导入应该可以在 angular 4.1.x 中使用以下符号：

let assign = require('lodash/assign');

或使用'lodash-es'并导入模块：

import { assign } from 'lodash-es';

Answer 19

如果在

之后不起作用

$ npm install lodash --save 
$ npm install --save-dev @types/lodash

你试试这个并导入 lodash

typings install lodash --save

Answer 20

通过 npm.

安装

$ npm install lodash --save

现在，import 在文件中：

$ import * as _ from 'lodash';

环境：

Angular CLI: 1.6.6
Node: 6.11.2
OS: darwin x64
Angular: 5.2.2
typescript: 2.4.2
webpack: 3.10.0

Answer 21

您也可以继续通过旧的要求导入，即：

const _get: any = require('lodash.get');

这是唯一对我们有用的东西。当然，请确保任何 require() 调用都在导入之后进行。

Answer 22

也许这太奇怪了，但是上面的 none 帮助了我，首先，因为我已经正确安装了 lodash（也通过上面的建议重新安装）。

长话短说，问题与使用 lodash 中的 _.has 方法有关。

我通过简单地使用 JS in 运算符修复了它。

Answer 23

npm install --save @types/lodash

https://www.npmjs.com/package/@types/lodash

将 lodash 导入 angular2 + typescript 应用程序

Importing lodash into angular2 + typescript application

javascript

angular

typescript

lodash

es6-module-loader

这是这里的新内容：

要事第一

加载完整的 lodash 库

或仅加载我们将要使用的函数

`UPDATE - March 2017`

OR `import` 具体 `lodash functionality`:

参考文献：

安装

用法

将 lodash 导入 angular2 + typescript 应用程序

Importing lodash into angular2 + typescript application

javascript

angular

typescript

lodash

es6-module-loader

这是这里的新内容：

要事第一

加载完整的 lodash 库

或 仅加载我们将要使用的函数

UPDATE - March 2017

OR import 具体 lodash functionality:

参考文献：

安装

用法

或仅加载我们将要使用的函数

`UPDATE - March 2017`

OR `import` 具体 `lodash functionality`: