将lodash导入angular2 typescript应用程序

前端之家收集整理的这篇文章主要介绍了将lodash导入angular2 typescript应用程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个很难的时间试图获得lodash模块导入。我已经设置了我的项目使用npm gulp,并保持击中同一堵墙。我试过了正常的lodash,但也lodash-es。

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

  1. import * as _ from 'lodash';

结果是:

  1. error TS2307: Cannot find module 'lodash'.

lodash-es npm包:(在lodash.js中有一个defaut导出包的根文件夹)

  1. import * as _ from 'lodash-es/lodash';

结果是:

  1. error TS2307: Cannot find module 'lodash-es'.

gulp任务和webstorm报告相同的问题。

有趣的事实,这没有返回错误

  1. import 'lodash-es/lodash';

…但当然没有“_”…

我的tsconfig.json文件

  1. {
  2. "compilerOptions": {
  3. "target": "es5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
  4. },"exclude": [
  5. "node_modules"
  6. ]
  7. }

我的gulpfile.js:

  1. var gulp = require('gulp'),ts = require('gulp-typescript'),uglify = require('gulp-uglify'),sourcemaps = require('gulp-sourcemaps'),tsPath = 'app/**/*.ts';
  2.  
  3. gulp.task('ts',function () {
  4. var tscConfig = require('./tsconfig.json');
  5.  
  6. gulp.src([tsPath])
  7. .pipe(sourcemaps.init())
  8. .pipe(ts(tscConfig.compilerOptions))
  9. .pipe(sourcemaps.write('./../js'));
  10. });
  11.  
  12. gulp.task('watch',function() {
  13. gulp.watch([tsPath],['ts']);
  14. });
  15.  
  16. gulp.task('default',['ts','watch']);

如果我理解正确,我的tsconfig中的moduleResolution:’node’应该将import语句指向node_modules文件夹,其中安装了lodash和lodash-es。我也试过很多不同的方式来导入:绝对路径,相对路径,但似乎没有什么工作。有任何想法吗?

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

这里是如何做到这一点Typescript 2.0:
(tsd和类型已被弃用,赞成以下):
  1. $ npm install --save lodash
  2.  
  3. # This is the new bit here:
  4. $ npm install --save @types/lodash

然后,在.ts文件中:

或者:

  1. import * as _ from "lodash";

或者(由@Naitik建议):

  1. import _ from "lodash";

我不是正面的区别是什么。我们使用并喜欢第一个语法。然而,有些报告说,第一个语法不适用于他们,有人评论说,后一种语法与延迟加载webpack模块不兼容。 YMMV。

猜你在找的Angularjs相关文章