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

Question

我以前可以通过如下所示的导入语句在 Angular 中使用 lodash 方法：

import {debounce as _debounce} from 'lodash';

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

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

唯一不会出错的就是这个语句：

import * as _ from 'lodash'; 

在我的代码中，我将_debounce() 更改为_.debounce()。这是唯一（和/或正确）的方法吗？有没有办法只导入去抖动，或者由于“treeshaking”而无关紧要？我意识到我可以编写自己的去抖动函数，但我主要对执行此操作的“正确”方式感兴趣。

附言我尝试过的其他变体（每个都有某种与之相关的错误）：

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

仅供参考...我正在使用以下版本：

角度：2.4.5

打字稿：2.1.5

Angular-cli：1.0.0-beta.26

Answer 1

（如果您关心树抖动，请参阅更新）
我想为了将 lodash 引入您的项目中，您已经完成了

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

如果您只想导入所需的功能，您应该这样做：

import * as debounce from 'lodash/debounce'

或

import { debounce } from "lodash";

将其用作：

debounce()

顺便说一句：您可能需要将 typescript 版本降级为 2.0.10，因为您使用的是 angular 2.x。

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'

Answer 2

在 angular 中导入 lodash 或任何 javascript 库：

第 1 步： 安装库（lodash）

npm i --save lodash

第 2 步： 将其导入到组件中并使用它。

如下导入：

import 'lodash';

declare var _:any;

或

import * as _ from 'lodash';

第 3 步：为 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
  }

}

Answer 3

这为我解决了这个问题，正如 Kuncevič 在“更新”下写的，由 Roy

编辑

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

import { debounce as _debounce } from 'lodash';

我必须导入 es-modules，否则会出现编译错误 - 很可能是由于我的配置 (tsconfig.json)。

Answer 4

我尝试了不同的方法来减少捆绑包中的 lodash 大小，虽然 Kuncevič 的更新答案有效，但我的捆绑包仍然包含非 es lodash（我猜这是因为它是其他一些依赖项所必需的）所以在这一点上我不认为完全添加 lodash-es 或从“lodash”单独导入函数是有意义的。据我了解，npm 执行重复数据删除并将 lodash 移动到顶级文件夹（node_modules），这就是为什么即使在我从 package.json 中删除它并重新安装 node_modules 之后它仍然存在的原因。 Webpack 不关心 package.json 并且如果它看到 lodash 是由任何人导入的 - 捆绑它。

Answer 5

我遇到了同样的问题，在我将“@types/lodash”更改为“4.14.50”版本后它开始工作了。