将 lodash 导入 angular2 + typescript 应用程序

javascript typescript angular lodash es6-module-loader

2022-08-30 00:08:35

我很难尝试导入lodash模块。我使用npm + gulp设置了我的项目，并不断碰到同一堵墙。我尝试过普通的lodash，但也尝试过lodash-es。

lodash npm 包：（在包根文件夹中有一个索引.js文件）

import * as _ from 'lodash';

结果在：

error TS2307: Cannot find module 'lodash'.

lodash-es npm package：（在 lodash 中有一个默认的导出.js i 的包根文件夹）

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

结果在：

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

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

有趣的事实，这不会返回任何错误：

import 'lodash-es/lodash';

...但当然没有“_”...

My tsconfig.json file：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

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

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

答案 1

以下是从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模块不兼容。新浪网.

编辑于2017年2月27日：

根据下面的@Koert，是截至Typescript 2.2.1，lodash 4.17.4和@types/ lodash 4.14.53的唯一工作语法。他说，另一个建议的导入语法给出了错误“没有默认导出”。import * as _ from "lodash";

答案 2

2016 年 9 月 26 日更新：

正如@Taytay的回答所说，与其说几个月前使用的“打字”安装，不如说我们现在可以使用：

npm install --save @types/lodash

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

如果仍在使用键入安装，请参阅下面（由其他人）关于“--环境”和“--全局”的评论。

此外，在新的快速入门中，配置不再位于索引中.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 中的配置中添加了“map”.html如下所示：

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中的files数组中添加一行.js：

'node_modules/lodash/lodash.js',