logo标签列表

将lodash引入Angular2+TypeScript应用程序

javascriptangulartypescriptlodashes6-module-loader
301

我试图导入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都报告了同样的问题。

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

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

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

2
我也遇到了这个问题。lodash库没有以模块化格式包含TypeScript定义，因此导入语句无法正常工作。现在唯一的解决方法似乎是在index.html文件中创建一个脚本引用lodash，然后在你的TypeScript文件中引用lodash.d.ts。希望这个问题能够很快得到解决。如果有其他解决方法，我很想听听。 - brando
1
压缩文件会很好。但是看起来你没有使用任何模块加载器（如jspm或webpack）？你是通过脚本标签加载Angular的吗？最好也发布一下HTML代码。我建议你使用webpack作为模块加载器，这里有一个例子-> https://github.com/jhades/angular2-library-example/tree/master/examples/webpack 这是一个最小化的入门示例-> https://github.com/jhades/ng2-webpack-minimal - Angular University
请查看此链接：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/4889 - brando
1
我最终只是将这个添加到我的邮件ts文件中：/// <reference path="../typings/tsd.d.ts" /> - Davy
截至今天，以上内容均不起作用。我正在使用angular.2.4.4堆栈。 - user1969453
这个回答解决了你的问题吗？在Angular中正确导入和使用lodash的方法 - Anand Raja
23个回答
4

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

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

或者使用“lodash-es”并在模块中导入：

import { assign } from 'lodash-es';
似乎import { assign } from 'lodash-es';仍然会导入整个库（从捆绑大小来判断）。 - ihor.eth
3

我已经创建了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，因为它会被正确地 treeshaken。
2

通过 npm 安装。

$ npm install lodash --save

现在，在文件中使用import：
$ import * as _ from 'lodash';

环境：

Angular CLI版本：1.6.6
Node版本：6.11.2
操作系统：darwin x64
Angular版本：5.2.2
typescript版本：2.4.2
webpack版本：3.10.0

1
  1. 安装lodash

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

  1. 在index.html中，为lodash添加映射：

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

  1. 在.ts代码中导入lodash模块

import _ from 'lodash';

它在抛出错误：typings ERR！消息https://api.typings.org/entries/npm/lodash/versions/latest响应了407，预期它等于200``` - kamayd
1
我正在使用ng2和webpack，而不是system JS。我需要的步骤如下：
npm install underscore --save
typings install dt~underscore --global --save

然后在我希望导入underscore的文件中：

import * as _ from 'underscore';
1
如果在

之后不起作用。
$ npm install lodash --save 
$ npm install --save-dev @types/lodash

你尝试这个并导入lodash

typings install lodash --save
1

通过使用npm install @types/lodash命令，可以更好地管理类型，而不是使用typings和tsd命令。

然而，我在import语句中长时间遇到了"找不到模块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，然后我的编辑器将不会对导入语句进行抱怨。
0
也许这听起来很奇怪，但以上的任何方法都没有帮助到我，首先是因为我已经正确安装了lodash（也通过上述建议重新安装了）。
长话短说，问题与使用lodash中的_.has方法有关。
我通过简单地使用JS in运算符来解决它。
0
0

通过终端安装所有内容：

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'
7
"TSD现已被弃用，您应该使用Typings。" - hhsadiq
1
typings现在已经被弃用了。你应该使用@types。 - Luca Trazzi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接