导入lodash到angular2 +打字稿应用导入lodash到angular2 +打字稿应用(I

2019-05-11 06:33发布

站内文章 / 移动开发

46 0

迷人小祖宗

女 | 书童

私信

我有一个很难试图让进口lodash模块。我使用NPM +一饮而尽已经设置我的项目，并不断撞击相同的墙壁。我已经尝试了常规lodash，也lodash-ES。

所述lodash NPM包：（在包根文件夹中的文件index.js）

import * as _ from 'lodash';

结果是：

error TS2307: Cannot find module 'lodash'.

所述lodash-ES NPM包：（具有defaut出口在lodash.js i中的包根文件夹）

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

结果是：

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

无论是咽任务和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']);

如果我理解正确，moduleResolution：“节点”在我tsconfig应该指向的导入语句添加到文件夹node_modules，安装lodash和lodash-ES的位置。我也尝试过许多不同的方式导入：绝对路径，相对路径，但似乎没有任何工作。有任何想法吗？

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

Answer 1:

这里是如何做到这一点的打字稿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， import * as _ from "lodash"; 是唯一的工作语法打字稿2.2.1，lodash 4.17.4，并@类型/ lodash 53年4月14日。他说，其它建议的导入语法提供了错误“没有默认的出口”。

Answer 2:

更新2016年9月26日：

作为@泰泰的回答说不是，我们在几个月前使用的“分型”的安装，我们现在可以使用：

npm install --save @types/lodash

这里有一些额外的参考支持这个问题的答案：

https://www.npmjs.com/package/@types/lodash
在NPM打字稿分型@types组织包

如果仍采用分型安装，请参见下面关于“”“--ambient”“”的评论（他人）和“”“--global”“”。

此外，在新的快速启动，配置不再是index.html中; 它现在是在systemjs.config.ts（如果使用SystemJS）。

原来的答案：

这个工作在我的Mac（安装角2，符合后快速启动）：

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

你会发现各种文件影响，例如，

/typings/main.d.ts
/typings.json
/package.json

角2快速开始使用System.js，所以我index.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种子，如果你不希望导入每一次，你可以跳过地图和导入步骤，只是取消注释工具/配置/ project.config.ts的lodash线。

为了让我的测试与lodash的工作，我也有一个行添加到karma.conf.js文件数组：

'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步：我使用SystemJs模块加载在我angular2应用。因此，我将修改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:

由于打字稿2.0，@types 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:

另一种优雅的解决方案是只得到你所需要的，而不是导入所有的lodash

import {forEach,merge} from "lodash";

然后用它在你的代码

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

Answer 8:

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

文章摘要：

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

我希望它可以为你的情况太有用

Answer 9:

如果别人运行到这个问题，并没有上述解决方案的工作，由于“复制标识”的问题，运行以下命令：

npm install typings --global

与旧版本的分型事情搞砸了，你会得到一堆“复制标识”的问题。你也不必使用--ambient据我可以告诉了。

所以一旦分型是最新的，这应该工作（使用角2快速入门）。

跑：

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

首先，这种添加到systemjs.config.js：

'lodash':                     'node_modules/lodash/lodash.js'

现在，你可以在任何文件中使用此： import * as _ from 'lodash';

删除您的分型文件夹，运行npm install ，如果你仍然有问题。

Answer 10:

请注意， npm install --save将促进任何依赖你的应用程序需要在生产代码。
至于“分型”，它仅由打字稿，这是在JavaScript的最终transpiled需要。因此，你可能不想让他们在生产代码。我建议把它放在你的项目的devDependencies相反，通过使用

npm install --save-dev @types/lodash

要么

npm install -D @types/lodash

（参见阿卡什交例如）。顺便说一句，这是它在NG2政党成员所做的那样。

另外，这里是你的package.json如何能够样子：

{
    "name": "my-project-name",
    "version": "my-project-version",
    "scripts": {whatever scripts you need: start, lite, ...},
    // here comes the interesting part
    "dependencies": {
       "lodash": "^4.17.2"
    }
    "devDependencies": {
        "@types/lodash": "^4.14.40"
    }
}

只是一个提示

约的好处npm是，你可以开始根本的npm install --save或--save-dev ，如果你不能确定你正在寻找依赖的最新版本，它会自动设置为它你在你package.json继续使用。

Answer 11:

我创造了分型为lodash-es还，所以现在你实际上可以做以下

安装

npm install lodash-es -S
npm install @types/lodash-es -D

用法

import kebabCase from "lodash-es/kebabCase";
const wings = kebabCase("chickenWings");

如果你使用汇总，我建议使用这种替代的lodash ，因为它会得到妥善treeshaken。

Answer 12:

从lodash部分进口应使用以下符号在角4.1.x的工作：

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

或者使用“lodash-ES”和进口模块：

import { assign } from 'lodash-es';

Answer 13:

通过安装npm 。

$ npm install lodash --save

现在， import文件中：

$ import * as _ from 'lodash';

ENV：

角CLI：1.6.6
节点：6.11.2
OS：达尔文64
角：5.2.2
打字稿：2.4.2
的WebPack：3.10.0

Answer 14:

安装lodash

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

index.html中，对于lodash添加地图：

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

在.TS代码进口lodash模块

import _ from 'lodash';

Answer 15:

我使用NG2用的WebPack，不系统JS。步骤需要对我来说是：

npm install underscore --save
typings install dt~underscore --global --save

然后在文件中我想要导入下划线为：

import * as _ from 'underscore';

Answer 16:

经由管理类型typings和tsd命令最终弃用赞成使用NPM经由的npm install @types/lodash 。

不过，我挣扎在import语句很长一段时间“找不到模块lodash”：

import * as _ from 'lodash';

最终，我意识到打字稿只会从node_modules负载类型/ @类型开始第2版，和我VsCode语言服务还在使用1.8，所以编辑在报告错误。

如果您使用VSCode你要包括

"typescript.tsdk":  "node_modules/typescript/lib"

在VSCode settings.json文件（工作区设置），并确保你有打字稿版本> = 2.0.0通过安装npm install typescript@2.0.2 --save-dev

那之后我的编辑不会抱怨import语句。

Answer 17:

如果这么想的工作后，

$ npm install lodash --save 
$ npm install --save-dev @types/lodash

你试试这个，进口lodash

typings install lodash --save

Answer 18:

安装所有直通终端：

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'

Answer 19:

我对角4.0.0使用预启动/角的WebPack ，只好去一个稍微不同的路线。

通过@Taytay提供的解决方案主要是为我工作：

npm install --save lodash
npm install --save @types/lodash

和导入功能集成到使用给定.component.ts文件：

import * as _ from "lodash";

这工作，因为没有“默认”出口类。在矿山的区别是我需要去查找提供了第三方库加载的方式：它坐在vendor.ts：

src/vendor.ts

我vendor.ts文件现在看起来是这样的：

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import 'lodash';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

Answer 20:

也许是太奇怪了，但没有上述帮我，首先，因为我已经正确安装了lodash（通过上述建议也重新安装）。

所以长话短说问题同使用连接_.has方法从lodash 。

我简单地使用JS固定它in运营商。

Answer 21:

尝试>> tsd install lodash --save

Answer 22:

您也可以继续通过良好的老需要进口，即：

const _get: any = require('lodash.get');

这仅仅是对我们工作的事情。当然，确保所有需要（）的电话打进来后进口。

文章来源: Importing lodash into angular2 + typescript application

标签： javascript angular typescript lodash es6-module-loader