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

Question

我曾经能够通过一个如下所示的import语句在Angular中使用lodash方法：

import {debounce as _debounce} from 'lodash';

使用该语句时，我现在收到以下错误：

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

唯一可以无错误编译的是这句话：

import * as _ from 'lodash'; 

在我的代码中，我将_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

     

打字稿：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()

BTW：您可能需要将打字稿版本降级为2.0.10，因为您使用的是角度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

在角内导入lodash或任何JavaScript库：

步骤1：：安装libarary（lodash）

eksctl

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

按以下步骤导入它：

npm i --save lodash

或

import 'lodash';

declare var _:any;

第3步：为Lo-Dash安装类型定义（可选）

import * as _ from 'lodash';

如果仍有疑问，请参见示例

npm install --save-dev @types/lodash

Answer 3

我有同样的问题，在我改变了＃34; @ types / lodash＆＃34;之后它就开始工作了。版本＆＃34; 4.14.50＆＃34;。

Answer 4

这为我解决了此问题，这由Kuncevič撰写，并由 Roy

编辑

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

import { debounce as _debounce } from 'lodash';

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

Answer 5

我尝试了不同的方法来减小包中lodash的大小，虽然Kuncevič的更新答案有效，但我的包中仍然包含non-es lodash（我猜这是因为其他一些依赖项所要求的），因此我现在不认为完全添加lodash-es或与“ lodash”分开导入函数是有意义的。据我了解，npm会进行重复数据删除并将lodash移到顶级文件夹（node_modules），这就是为什么即使在我从package.json中删除它并重新安装了node_modules之后，它也在那里的原因。 Webpack不在乎package.json，并且如果发现lodash被任何人导入，则将其捆绑。