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

Posted 2023-02-22

【中文标题】在 Angular 中导入和使用 lodash 的正确方法

【英文标题】：Correct way of importing and using lodash in Angular

【发布时间】：2017-06-18 20:56:56

【问题描述】：

我以前可以通过如下所示的导入语句在 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

【问题讨论】：

Importing lodash into angular2 + typescript application的可能重复

【参考方案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'

【讨论】：

是的，我确实添加了 lodash 和 @types/lodash。感谢您对打字稿的提醒。您提供的两个示例曾经对我有用，但由于某种原因，它们不再适用。例如，使用您的第一个示例，我收到以下错误： Module '"path_to_project/node_modules/@types/lodash/debounce/index"' 解析为非模块实体，无法使用此构造导入。在这一点上，它对我有用，但我主要是好奇事情是如何/为什么发生变化的。

我的项目中有@types/lodash@4.14.44 和lodash@4.17.2。 import debounce from "lodash"; 为我工作。

您也可以将_函数引用为chain。

@Kuncevič 谢谢，这行得通，但是您如何处理需要常规 'lodash' 的其他依赖项？在我的包中，我现在加载了完整的 'lodash' 和小的 'lodash-es'，只有我导入的方法

@Kuncevič 是的，例如 angular cli 包依赖于 lodash ^4.11.1，而 karma 依赖于 ^3.8.0（在 package-lock.json 中说）。 npm 如何处理这个问题？如果 npm 为每个需要它的包安装不同版本的 lodash，这将是一场噩梦。我不明白这是如何工作的，如果 package.json 中的“lodash”甚至没有被列为依赖项，我的 vendor.bundle.js 文件中捆绑了哪个版本的 lodash？我也强制清除了 npm 缓存

【参考方案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
  

【参考方案3】：

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

编辑

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

import  debounce as _debounce  from 'lodash';

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

【讨论】：

我不明白。如果您仍在从“lodash”导入所有内容，那么添加“lodash-es”包有什么意义

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

它是否减少了您的捆绑包大小？我尝试像这样导入它，但正如接受的答案中提到的那样，摇树摇晃不起作用，因此导入了整个 lodash 库。

我确实使用 vscode 大小检查器对其进行了验证，不幸的是我不记得插件的名称，但是它确实按预期工作。

【参考方案4】：

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

【参考方案5】：

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

@MohanGopi 链接在哪里？