Question

下面我有一个拉取请求反馈，只是想知道导入lodash的正确方法是哪种方式？

你最好从

import has from 'lodash/has';

VS

import { has } from 'lodash';

由于

Answer 1

stingFixture = createStingFixture(stingBody);更好，因为lodash将所有功能保存在一个文件中，因此不要导入整个＆lt; lodash＆＃39;在100k的图书馆，最好只导入lodash的import has from 'lodash/has';函数，这可能是2k。

Answer 2

如果您使用的是webpack 4，则以下代码是树可动摇的。

import { has } from 'lodash-es';

要注意的要点;

CommonJS模块不是树可动摇的，所以你一定要使用lodash-es，这是作为ES模块导出的Lodash库，而不是lodash（CommonJS）。
lodash-es＆nbsp; package.json包含"sideEffects": false，它通知webpack 4包中的所有文件都是无副作用的（请参阅https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free）。
此信息对于树木摇晃至关重要，因为模块捆绑器不会出现可能包含副作用的树震动文件，即使它们的导出成员未在任何地方使用也是如此。

修改

As of version 1.9.0, Parcel also supports "sideEffects": false，因为import { has } from 'lodash-es';也可以使用Parcel进行树形摇动。它还支持树摇动CommonJS模块，但根据my experiment，ES模块的树抖动可能比CommonJS更有效。

Answer 3

您可以将它们导入为

import {concat, filter, orderBy} from 'lodash';

或为

import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';

第二个比第一个进行了优化，因为它仅加载所需的模块

然后像这样使用

pendingArray: concat(
                    orderBy(
                        filter(payload, obj => obj.flag),
                        ['flag'],
                        ['desc'],
                    ),
                    filter(payload, obj => !obj.flag),

Answer 4

如果您正在使用babel，您应该查看babel-plugin-lodash，它会挑选您正在使用的lodash部分，减少麻烦和较小的捆绑。

它有一些limitations：

您必须使用ES2015导入来加载Lodash
Babel＆lt; 6＆amp; Node.js＆lt;
不支持链序列。有关替代方案，请参阅此blog post。
不支持模块化method packages

Answer 5

将特定方法导入大括号内

import { map, tail, times, uniq } from 'lodash';

优点：

只有一条导入行（功能相当不错）
更具可读性的用法：javascript代码后面的map（）而不是_.map（）。

缺点：

每次我们想使用一个新功能或停止使用另一个功能-需要对其进行维护和管理

Answer 6

我只是将它们放在自己的文件中，然后将其导出到 node 和 webpack：

// lodash-cherries.js
module.exports = {
  defaults: require('lodash/defaults'),
  isNil: require('lodash/isNil'),
  isObject: require('lodash/isObject'),
  isArray: require('lodash/isArray'),
  isFunction: require('lodash/isFunction'),
  isInteger: require('lodash/isInteger'),
  isBoolean: require('lodash/isBoolean'),
  keys: require('lodash/keys'),
  set: require('lodash/set'),
  get: require('lodash/get'),
}

Answer 7

我认为这个 answer 可以轻松地用于任何项目，并以更少的努力带来最好的结果。

对于打字稿用户，使用如下：

// lodash.utils.ts
export { default as get } from 'lodash/get';
export { default as isEmpty } from 'lodash/isEmpty';
export { default as isNil } from 'lodash/isNil';
...

并且可以像导入 lodash 一样使用：

//some-code.ts
import { get } from './path/to/lodash.utils'

export static function getSomething(thing: any): any {
    return get(thing, 'someSubField', 'someDefaultValue')
}

或者如果您希望保留 _ 以避免冲突（例如 map 中的 rxjs 与 lodash）

//some-other-code.ts
import * as _ from './path/to/lodash.utils'

export static function getSomething(thing: any): any {
    return _.get(thing, 'someSubField', 'someDefaultValue')
}

更新：似乎正确的导出方式是：

export * as get from 'lodash/get';
export * as isEmpty from 'lodash/isEmpty';
export * as isNil from 'lodash/isNil';
...

但是与 @types/lodash 有一个奇怪的冲突，我已经删除了这个类型的包，因为我会得到这个错误：

<块引用>

模块 '"/../project/node_modules/@types/lodash/cloneDeep"' 使用 'export =' 并且不能与 'export *'.ts(2498)

一起使用

更新：

经过一番挖掘，我已将 tsconfig.json 功能 esModuleInterop 转为 true，它允许我执行以下操作：

import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import isNil from 'lodash/isNil';
...

export { get, isEmpty, isNil, ... };

请注意，这会影响您项目中定义为 import * as lib from 'lib' 的所有导入。遵循文档以确保它适合您。

正确的方式导入lodash

7 个答案: