将lodash导入到angular2 + typescript应用程序中
我很难尝试导入lodash模块。 我已经使用npm + gulp设置了我的项目，并保持击中相同的墙。 我已经尝试了常规的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中的moduleResolution：'node'应该将导入语句指向安装了lodash和lodash-es的node_modules文件夹。 我也尝试了很多不同的方式来导入：绝对path，相对path，但似乎没有任何工作。 有任何想法吗？
如有需要，我可以提供一个小的zip文件来说明问题。
下面是在Typescript 2.0中如何做到这一点：（tsd和typings正被弃用，赞成以下）：
$ npm install --save lodash # This is the new bit here: $ npm install --save @types/lodash
然后，在你的.ts文件中：
或者：
import * as _ from "lodash";
或（如@Naitikbuild议）：
import _ from "lodash";
我不是正面的区别是什么。 我们使用并更喜欢第一种语法。 然而，一些报告说第一种语法对他们不起作用，而另外一些人则认为后者的语法与惰性加载的webpack模块是不兼容的。 因人而异。
2017年2月27日编辑：
根据下面的@Koert， import * as _ from "lodash"; 是Typescript 2.2.1，lodash 4.17.4和@ types / lodash 4.14.53的唯一工作语法。 他说另一个build议的导入语法给出错误“没有默认导出”。
2016年9月26日更新：
正如@ Taytay的回答所说的，我们现在可以使用：而不是几个月前使用的“types”安装，
npm install --save @types/lodash
以下是支持该答案的其他参考资料：
- https://www.npmjs.com/package/@types/lodash
- NPM @types org包中的TypeScripttypes
如果仍然使用打字安装，请参阅以下（其他人）关于' – ' – ''''和''' – ''''的评论。
而且，在新的快速入门中，config不再处于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 Quickstart使用了System.js，所以我在index.html中的configuration文件中添加了'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中取消注释即可。
为了让我的testing使用lodash，我还必须在karma.conf.js文件数组中添加一行：
'node_modules/lodash/lodash.js',
步骤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步：我在我的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安装
第4步：在你的文件中使用lodash。
import * as _ from 'lodash'; let firstIndexOfElement=_.findIndex(array,criteria);
首先是事情
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) ...
或者import特定的lodash functionality ：
import debounce from 'lodash/debounce' //work with the debounce function directly debounce(...) // this too is typesafe (as expected) ...
注 – 区别在于syntax不需要
祝你好运。
自Typescript 2.0以来，@types npm模块被用来导入types。
# Implementation package (required to run) $ npm install --save lodash # Typescript Description $ npm install --save @types/lodash
现在，因为这个问题已经得到解答，我将介绍如何有效地导入lodash
导入整个库的安全方式（在main.ts中）
import 'lodash';
这是新的一点：
用你需要的function实现一个更轻的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：上面的文章是一个有趣的阅读，提高构build时间和减less应用程序的大小
我用下面的命令成功地在我的项目中导入了lodash：
npm install lodash --save typings install lodash --save
然后我通过以下方式导入它：
import * as _ from 'lodash';
并在systemjs.config.js我定义这个：
map: { 'lodash' : 'node_modules/lodash/lodash.js' }
我有完全相同的问题，但在Angular2应用程序，这篇文章只是解决它： https ://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli
文章摘要：
- 安装库
npm install lodash --save - 为Lodash
tsd install underscore添加TypeScript定义 - 包括脚本
<script src="node_modules/lodash/index.js"></script> - configurationSystemJS
System.config({ paths: { lodash: './node_modules/lodash/index.js' -
import * as _ from 'lodash';导入模块import * as _ from 'lodash';
我希望它也可以用于你的情况
另一个优雅的解决scheme是只获得你所需要的，而不是导入所有的lodash
import {forEach,merge} from "lodash";
然后在你的代码中使用它
forEach({'a':2,'b':3}, (v,k) => { console.log(k); })
如果有其他人遇到这个问题，并且上述解决scheme由于“重复标识符”问题而没有工作，请运行以下命令：
npm install typings --global
随着老版本的types事情搞砸了，你会得到一堆“重复标识符”的问题。 就我--ambient ，你也不需要再使用--ambient了。
所以一旦types是最新的，这应该工作（使用Angular 2快速入门）。
跑：
npm install lodash --save typings install lodash --save
首先，将此添加到systemjs.config.js中：
'lodash': 'node_modules/lodash/lodash.js'
现在你可以在任何文件中使用它： import * as _ from 'lodash';
如果你仍然有问题，删除你的typings文件夹并运行npm install 。
请注意， npm install --save会促进您的应用程序在生产代码中所需的任何依赖。
至于“typings”，它只需要通过TypeScript，最终在JavaScript中转换。 因此，你可能不希望让他们在生产代码。 我build议把它放在你的项目的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 ，它会自动设置你在你的package.json中进一步使用。
lodash中的部分导入应该使用下列符号在4.1.x版本中工作：
let assign = require('lodash/assign');
或者使用'lodash-es'并在模块中导入：
import { assign } from 'lodash-es';
我也为lodash-es创build了lodash-es ，所以现在你可以做以下事情
安装
npm install lodash-es -S npm install @types/lodash-es -D
用法
import kebabCase from "lodash-es/kebabCase"; const wings = kebabCase("chickenWings");
如果你使用汇总，我build议使用这个，而不是lodash因为它会树好。
- 安装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';
我使用ng2与webpack，而不是系统JS。 我需要的步骤是：
npm install underscore --save typings install dt~underscore --global --save
然后在我想导入下划线的文件中：
import * as _ from 'underscore';
通过tsd和tsd命令pipe理types最终将被弃用，以支持通过npm install @types/lodash使用npm。
但是，我在长时间的导入语句中苦于“找不到模块lodash”
import * as _ from 'lodash';
最终我意识到Typescript只会从node_modules / @ types开始版本2加载types，而我的VsCode语言服务仍然使用1.8，所以编辑器报告错误。
如果您使用VSCode，则需要包含
"typescript.tsdk": "node_modules/typescript/lib"
在您的VSCode settings.json文件中（对于工作区设置），并确保通过npm install typescript@2.0.2 --save-dev typescript version> 2.0.0 npm install typescript@2.0.2 --save-dev
之后，我的编辑不会抱怨导入声明。
安装所有terminal：
npm install lodash --save tsd install lodash --save
在index.html中添加path
<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'
我在使用preboot / angular-webpack的 Angular 4.0.0，并且必须走一个稍微不同的路线。
@Taytay提供的解决scheme大多为我工作：
npm install --save lodash npm install --save @types/lodash
并使用以下命令将函数导入给定的.component.ts文件中：
import * as _ from "lodash";
这是有效的，因为没有“默认”导出类。 我的区别在于我需要find提供加载第三方库的方式： 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, ...
如果以后不工作的话
$ npm install lodash --save $ npm install --save-dev @types/lodash
你试试这个并导入lodash
typings install lodash --save
尝试>> tsd install lodash --save
