将lodash导入angular2 + typescript应用程序

Question

我很难尝试导入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中有一个defaut导出我的包根文件夹)

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文件来说明问题.

Answer 1

以下是如何在Typescript 2.0中执行此操作:( tsd和typings被弃用以支持以下内容):

$ 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,import * as _ from "lodash";是Typescript 2.2.1,lodash 4.17.4和@ types/lodash 4.14.53中唯一可用的语法.他说另一个建议的导入语法给出错误"没有默认导出".

Answer 2

2016年9月26日更新:

正如@ Taytay的回答所说,我们现在可以使用以下方法,而不是几个月前使用的"打字"装置.

npm install --save @types/lodash

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

• https://www.npmjs.com/package/@types/lodash
• NPM @types org包中的TypeScript类型

如果仍然使用打字装置,请参阅下面的评论(由其他人)关于''' - ''''和''' - 'global'''.

此外,在新的快速入门中,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的配置中添加了'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中的files数组中添加一行:

'node_modules/lodash/lodash.js',

Answer 3

步骤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);

Answer 4

首先要做的事情

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)
...

注意 - * as不需要区别syntax

参考文献:

祝好运.

Answer 5

自Typescript 2.0起,@ type npm模块用于导入输入.

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

现在,由于这个问题已经得到解答,我将介绍如何有效地导入lodash

导入整个库的故障安全方法(在main.ts中)

import 'lodash';

这是新的一点:

使用您需要的功能实现更轻的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:上面的文章是关于改进构建时间和减少应用程序大小的有趣读物

Answer 6

我使用以下命令在我的项目中成功导入了lodash:

npm install lodash --save
typings install lodash --save

然后我用以下方式导入它:

import * as _ from 'lodash';

在systemjs.config.js我定义了这个:

map: { 'lodash' : 'node_modules/lodash/lodash.js' }

Answer 7

我有完全相同的问题,但在Angular2应用程序中,本文只是解决它:https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

文章摘要:

1. 安装库 npm install lodash --save
2. 为Lodash添加TypeScript定义 tsd install underscore
3. 包括脚本 <script src="node_modules/lodash/index.js"></script>
4. 配置SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. 导入模块 import * as _ from ‘lodash’;

我希望它对你的案子也有用

Answer 8

另一个优雅的解决方案是只获得你需要的东西,而不是导入所有的lodash

import {forEach,merge} from "lodash";

然后在您的代码中使用它

forEach({'a':2,'b':3}, (v,k) => {
   console.log(k);
})