在Angular中正确导入和使用lodash的方式

Question

在Angular中正确导入和使用lodash的方式

72

我曾经能够通过以下导入语句在Angular中使用lodash方法：

import {debounce as _debounce} from 'lodash';

当我使用该语句时，现在出现以下错误：

'"{...}/node_modules/@types/lodash/index"' has no exported member 'debounce'.

只有这个语句不会编译出错：

import * as _ from 'lodash';

在我的代码中，我将_debounce()更改为_.debounce()。这是唯一（并且/或）正确的方法吗？是否有一种只导入防抖函数的方法，或者由于“树摇”而没有关系？我意识到我可以编写自己的 debounce 函数，但我主要感兴趣的是做这件事情的“正确”方法。

p.s. 我尝试过其他变体（每个变体都有某种与其相关联的错误）：

import {debounce as _debounce } from 'lodash/debounce';
import * as _debounce from 'lodash/debounce';
import debounce = require('lodash/debounce');

提供信息...我正在使用以下版本:

Angular: 2.4.5

Typescript: 2.1.5

Angular-cli: 1.0.0-beta.26

- jloosli

1

可能是将lodash导入到Angular2 + TypeScript应用程序中的重复问题。 - BuZZ-dEE

4个回答

14

在angular中导入lodash或任何javascript库的步骤:

步骤1: 安装库(lodash)

npm i --save lodash

步骤 2：将其导入组件并使用。

按照以下方式导入它：

import 'lodash';

declare var _:any;

或者

import * as _ from 'lodash';

步骤三：安装 Lo-Dash 的类型定义文件（可选）

npm install --save-dev @types/lodash

如果您仍然有疑问，请查看示例

import { Component, OnInit } from '@angular/core';

import * as _ from 'lodash';

// import 'lodash';

// declare var _:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test-lodash';

  ngOnInit() {
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); //lodash function
    console.log(_.random(1, 100)); //lodash function
  }

}

导入lodash的特定包(lodash.includes)

步骤1：安装特定包(lodash.includes)及其类型定义包。

npm i lodash.includes

npm i -D @types/lodash.includes

第二步：你可以像下面展示的那样在需要的地方使用它。

import { Component, OnInit } from '@angular/core';

import { includes } from 'lodash';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test-lodash-includes';

  ngOnInit() {
    console.log((includes['a', 'b', 'c', 'd'], 'b')); //lodash'includes package' usage
  }

}

- Anand Raja

6

这对我解决了问题，正如 Kuncevič 在“更新”下所写，并由 Roy 编辑。

yarn add lodash-es
yarn add @types/lodash-es --dev

import { debounce as _debounce } from 'lodash';

我不得不导入es-modules，否则我会得到编译错误——很可能是由于我的配置（tsconfig.json）所致。

- Marcus Ekström

我不明白。如果你仍然从“lodash”导入所有内容，那么添加“lodash-es”包的意义是什么？ - ihor.eth

我可能误解了它的工作原理，但据我所知，我并没有从Lodash导入所有内容。我只是有选择地导入了debounce。 - Marcus Ekström

它减小了你的捆绑包大小吗？我尝试像这样导入它，但正如被接受的答案所提到的那样，摇树优化不会以这种方式工作，因此整个lodash库被导入。 - ihor.eth

我使用VSCode大小检查器进行了验证，不幸的是我无法记住插件的名称，但它确实按预期工作。 - Marcus Ekström

0

我曾经遇到同样的问题，但在将"@types/lodash"更改为版本"4.14.50"后，问题得以解决。

- Dawid Lubowiecki

1

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。- 来自审查 - Mohan Gopi

3

@MohanGopi，链接在哪里？ - Gert Arnold

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- angularrocks.com · Accepted Answer

(如果您关心树摇，请参阅更新)
我想为了将Lodash引入您的项目，您已经完成了

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

如果您只想导入所需的函数，您应该执行以下操作：

import * as debounce from 'lodash/debounce'

import { debounce } from "lodash";

用法：

debounce()

顺便提一下：如果你正在使用angular 2.x，可能需要降低你的typescript版本到2.0.10。

npm install typescript@2.0.10 --save-dev

更新：

最近我意识到lodash包不支持树摇，所以如果你需要树摇功能，请使用lodash-es代替。

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

import debounce from 'lodash-es/debounce'