我有一个困难的时间试图得到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文件来说明这个问题。
步骤1:修改包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 install
步骤4:在文件中使用lodash。
import * as _ from 'lodash';
let firstIndexOfElement=_.findIndex(array,criteria);
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',