将lodash导入angular2 typescript应用程序-Java 学习之路

206

我很难尝试导入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文件来说明问题 .

22 回答

安装所有通过终端：

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'

回复于 2024-04-28T06:48:39+08:00

-1

试试>> tsd install lodash --save

回复于 2024-04-28T06:48:39+08:00
7
我也为 lodash-es 创建了打字，所以现在你可以实际执行以下操作

安装
```
npm install lodash-es -S
npm install @types/lodash-es -D
```
用法
```
import kebabCase from "lodash-es/kebabCase";
const wings = kebabCase("chickenWings");
```
如果你使用汇总，我建议使用这个而不是 lodash ，因为它将正确地树木 .
回复于 2024-04-28T06:48:39+08:00

如果以后不能工作

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

你试试这个并导入lodash

typings install lodash --save

回复于 2024-04-28T06:48:39+08:00

363
我使用preboot/angular-webpack在Angular 4.0.0上，并且必须采用稍微不同的路线 .

@Taytay提供的解决方案主要适用于我：
```
npm install --save lodash
npm install --save @types/lodash
```
并使用以下方法将函数导入给定的 .component.ts 文件：
```
import * as _ from "lodash";
```
这是有效的，因为没有"default"导出的类 . 我的差异是我需要找到加载到第三方库中的方式： 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, ...
```
回复于 2024-04-28T06:48:39+08:00

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

回复于 2024-04-28T06:48:39+08:00

24
以下是如何使用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中唯一的工作语法 . 他说其他建议的导入语法给出错误"has no default export" .
回复于 2024-04-28T06:48:39+08:00
10
我有完全相同的问题，但在Angular2应用程序中，本文只是解决它：https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

文章摘要：
- 安装库 npm install lodash --save
- 为Lodash添加TypeScript定义 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’;
我希望它对你的案子也有用
回复于 2024-04-28T06:48:39+08:00
1
自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：上面的文章是关于改进构建时间和减少应用程序大小的有趣读物
回复于 2024-04-28T06:48:39+08:00
3
来自 lodash 的部分导入应在 angular 4.1.x 中使用以下符号：
```
let assign = require('lodash/assign');
```
或者使用'lodash-es'并导入模块：
```
import { assign } from 'lodash-es';
```
回复于 2024-04-28T06:48:39+08:00

首先要做的事情

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)

更新 - 2017年3月

我目前正在使用 ES6 modules ，最近我能够像_274943这样工作：

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

或导入特定的lodash功能：

import debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)
...

NOTE - syntax 中不需要 * as 的区别

参考文献：

enter image description here

祝好运 .

回复于 2024-04-28T06:48:39+08:00

1
- 安装lodash
sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save
- 在index.html中，为lodash添加 Map ：
System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });
- 在.ts代码中导入lodash模块
import _ from 'lodash';
回复于 2024-04-28T06:48:39+08:00
4
请注意， npm install --save 将促进您的应用在生产环境代码中所需的任何依赖性 .
至于"typings"，它只需要TypeScript，最终用JavaScript编译 . 因此，您可能不希望将它们放入生产环境代码 . 我建议将它放在你的项目的_274975中，而不是使用
```
npm install --save-dev @types/lodash
```
要么
```
npm install -D @types/lodash
```
（例如参见Akash帖子） . 顺便说一句，这是在ng2 tuto中完成的方式 .

或者，以下是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"
    }
}
```
just a tip

关于 npm 的好处是，如果你不确定你正在寻找的最新版本的依赖项，你可以简单地做一个 npm install --save 或 --save-dev ，它会自动在你的 package.json 中为你设置它以供进一步使用 .
回复于 2024-04-28T06:48:39+08:00
13
我使用ng2与webpack，而不是系统JS . 我需要的步骤是：
```
npm install underscore --save
typings install dt~underscore --global --save
```
然后在文件中我希望将下划线导入：
```
import * as _ from 'underscore';
```
回复于 2024-04-28T06:48:39+08:00
7
Update September 26, 2016:

正如@ Taytay的回答所说，我们现在可以使用以下方法，而不是几个月前使用的“打字”装置 .
```
npm install --save @types/lodash
```
以下是一些支持该答案的其他参考资料：
- https://www.npmjs.com/package/@types/lodash
- TypeScript typings in NPM @types org packages
如果仍然使用打字装置，请参阅下面的评论（由他人）关于''' - ''''和''''''''''''''' .

此外，在新的快速入门中，config不再位于index.html中;它现在在systemjs.config.ts中（如果使用SystemJS） .

Original Answer:

这在我的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中的config中添加了'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',
```
回复于 2024-04-28T06:48:39+08:00
21
如果其他人遇到此问题，并且上述解决方案均无法解决“重复标识符”问题，请运行以下命令：
```
npm install typings --global
```
对于旧版本的打字事情，事情搞得一团糟，你甚至需要使用 --ambient ，据我所知 .

因此，一旦打字是最新的，这应该工作（使用Angular 2快速入门） .

跑：
```
npm install lodash --save 
typings install lodash --save
```
首先，将其添加到systemjs.config.js：
```
'lodash':                     'node_modules/lodash/lodash.js'
```
现在您可以在任何文件中使用它： import * as _ from 'lodash';

如果您仍然遇到问题，请删除您的打字文件夹并运行 npm install .
回复于 2024-04-28T06:48:39+08:00
-2
另一个优雅的解决方案是只获得你需要的东西，而不是导入所有的lodash
```
import {forEach,merge} from "lodash";
```
然后在您的代码中使用它
```
forEach({'a':2,'b':3}, (v,k) => {
   console.log(k);
})
```
回复于 2024-04-28T06:48:39+08:00
0
我使用以下命令在项目中成功导入了lodash：
```
npm install lodash --save
typings install lodash --save
```
然后我按以下方式导入它：

import * as _ from 'lodash';

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

map: { 'lodash' : 'node_modules/lodash/lodash.js' }
回复于 2024-04-28T06:48:39+08:00
0
通过 typings 和 tsd 命令管理类型最终不赞成使用npm via npm install @types/lodash .

但是，我很长一段时间在导入语句中遇到“找不到模块lodash”：
```
import * as _ from 'lodash';
```
最终我意识到Typescript只会从node_modules / @ types start version 2加载类型，而我的VsCode语言服务仍然使用1.8，因此编辑器报告错误 .

如果您正在使用VSCode，则需要包含
```
"typescript.tsdk":  "node_modules/typescript/lib"
```
在您的VSCode settings.json文件中（用于工作区设置）并确保通过 npm install typescript@2.0.2 --save-dev 安装了typescript version> = 2.0.0

之后我的编辑不会抱怨import语句 .
回复于 2024-04-28T06:48:39+08:00
4
通过 npm 安装 .
```
$ npm install lodash --save
```
现在， import 在文件中：
```
$ import * as _ from 'lodash';
```
ENV:

Angular CLI：1.6.6节点：6.11.2 OS：darwin x64 Angular：5.2.2 typescript：2.4.2 webpack：3.10.0
回复于 2024-04-28T06:48:39+08:00
0

也许它太奇怪了，但首先没有一个帮助我，因为我已经正确安装了lodash（也通过以上建议重新安装） .

长话短说，问题与使用lodash中的 _.has 方法有关 .

我只需使用JS in 运算符修复它 .

回复于 2024-04-28T06:48:39+08:00
3
您也可以通过良好的旧要求继续进口，即：
```
const _get: any = require('lodash.get');
```
这是唯一对我们有用的东西 . 当然，确保在导入之后进行任何require（）调用 .
回复于 2024-04-28T06:48:39+08:00

将lodash导入angular2 typescript应用程序

22 回答

安装

用法

这是新位：

首先要做的事情

加载完整的lodash库

或仅加载我们将要使用的函数

更新 - 2017年3月

或导入特定的lodash功能：

参考文献：

相关问题