将 lodash 导入 angular2 + typescript 应用程序

IT技术 javascript angular typescript lodash es6-module-loader
2021-01-30 04:51:59

我很难尝试导入 lodash module。我已经使用 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' 应该将导入语句指向 node_modules 文件夹,其中安装了 lodash 和 lodash-es。我也尝试了很多不同的导入方式:绝对路径、相对路径,但似乎没有任何效果。有任何想法吗?

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

6个回答

以下是从 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 module不兼容。天啊。

2017 年 2 月 27 日编辑:

根据下面的@Koert,import * as _ from "lodash";是 Typescript 2.2.1、lodash 4.17.4 和 @types/lodash 4.14.53 中唯一可用的语法。他说其他建议的导入语法给出了错误“没有默认导出”。

这应该只用于开发,而不是生产,所以使用 save-dev: npm install --save-dev @types/lodash 如果你看到奇怪的问题和错误,试试这个: npm install --save-dev @types/lodash@4.14.50
2021-03-18 04:51:59
一个警告,我发现import _ from "lodash"语法与延迟加载的 webpack module不兼容。不知道为什么,我没有详细调查。
2021-03-21 04:51:59
我可以确认这在使用typescript 2.0.3. 确实删除typings支持@typesnpm 包要干净得多。
2021-03-23 04:51:59
import * as _ from "lodash";没有为我工作,但import _ from "lodash";确实如此。
2021-03-24 04:51:59
从“lodash”导入_;在 2.0 中不再工作。你必须使用 import * as _ from "lodash";
2021-04-10 04:51:59

2016 年 9 月 26 日更新:

正如@Taytay 的回答所说,我们现在可以使用:

npm install --save @types/lodash

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

如果仍在使用类型安装,请参阅下面(其他人)关于 '''--ambient''' 和 '''--global''' 的评论。

此外,在新的 Quick Start 中,config 不再在 index.html 中;它现在在 systemjs.config.ts 中(如果使用 SystemJS)。

原答案:

这在我的 Mac 上有效(在按照Quick Start安装 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',
@smartmouse--ambient--global. 后者用于 1.x 并向前发展。不过,我认为最新的 lodash 4.x 不会像那样编译为全局module。
2021-03-22 04:51:59
@zack 你错过 map: { lodash: 'node_modules/lodash/lodash.js' }System.config吗?
2021-03-24 04:51:59
我看到这解决了我的 TypeScript 问题,但是在浏览器中加载页面我仍然看到它找不到module lodash 的错误。看起来它正在向“/lodash”而不是 node_modules 发出失败的 xhr 请求。
2021-04-01 04:51:59
对我来说,它只适用于import * as _ from 'lodash';
2021-04-05 04:51:59
...为什么我们需要写import * as _ from 'lodash'而不是import _ from 'lodash'
2021-04-08 04:51:59

第一件事

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

注意-* assyntax


参考:

在此处输入图片说明

祝你好运。

我坚持我之前的评论。类型文件中当前没有默认导出,因此这不适用于 allowSyntheticDefaultImports false。
2021-03-16 04:51:59
“针对 ECMAScript 2015 module时无法使用导入分配”
2021-03-22 04:51:59
@工具包。谢谢你指出。我已经更新了答案。请检查此解决方案是否有效并适当标记。
2021-03-26 04:51:59
@kross 另请注意,"allowSyntheticDefaultImports": true可能需要在 tsconfig.json 文件中添加编译器选项以避免任何错误。
2021-04-05 04:51:59
import debounce from 'lodash/debounce'产生TS1192: Module node_modules/@types/lodash/debounce has no default export"allowSyntheticDefaultImports": false
2021-04-09 04:51:59

第 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 module加载器。所以我会修改 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);
您的解决方案如何处理 TypeScript 类型?npm lodash 包似乎不包含 .d.ts 文件。
2021-03-31 04:51:59

从 Typescript 2.0 开始,@types npm module用于导入类型。

# 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:上面的文章是一篇关于提高构建时间和减少应用程序大小的有趣读物

似乎 @types/lodash 还不支持更轻的语法。 error TS1192: Module '"node_modules/@types/lodash/chain/index"' has no default export. 对于尝试较短import chain from "lodash/chain"导入的其他module,依此类推
2021-03-24 04:51:59
对于 TSC 这很好,但是它给打包器带来了其他问题。你有机会通过汇总来解决这个问题吗?aurelia-cli 也有问题:(。 汇总错误:'default' 不是由 node_modules\lodash\kebabCase.js 导出 Aurelia cli 错误:没有这样的文件或目录,打开 '/experimental\au-proj\node_modules\lodash \lodash\kebabCase.js'
2021-03-25 04:51:59