导入lodash的正确方法

Question

我在下面有一个 pull request 反馈，只是想知道哪种方式是导入 lodash 的正确方式？

你最好从 'lodash/has' 导入 has。对于早期版本的 lodash (v3) 本身就很重，我们应该只导入一个特定的模块/函数，而不是导入整个 lodash 库。 不确定较新的版本 (v4)。

import has from 'lodash/has';

对比

import { has } from 'lodash';

谢谢

Answer 1

import has from 'lodash/has'; 更好，因为 lodash 将它的所有函数保存在一个文件中，所以与其以 100k 的大小导入整个 'lodash' 库，最好只导入 lodash 的has函数，它可能是 2k。

Answer 2

如果你使用的是webpack 4 ，下面的代码是 tree shakable 的。

import { has } from 'lodash-es';

注意事项；

1. CommonJS 模块不可摇树，所以你绝对应该使用lodash-es ，它是作为 ES 模块导出的 Lodash 库，而不是lodash (CommonJS)。

2. lodash-es的 package.json 包含"sideEffects": false ，它通知 webpack 4 包内的所有文件都没有副作用（参见https://webpack.js.org/guides/tree-shaking/#mark -the-file-as-side-effect-free ）。

3. 此信息对于 treeShaking 至关重要，因为模块捆绑器不会对可能包含副作用的文件进行 treeshake，即使其导出的成员未在任何地方使用。

编辑

从 1.9.0 版本开始，Parcel 还支持"sideEffects": false ，因此import { has } from 'lodash-es'; 也可以用 Parcel 摇树。 它还支持摇树 CommonJS 模块，尽管根据我的实验，ES 模块的摇树可能比 CommonJS 更有效。

Answer 3

在大括号内导入特定方法

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

优点：

• 只有一个导入行（对于相当数量的功能）
• 更易读的用法：稍后在 javascript 代码中使用 map() 而不是 _.map() 。

缺点：

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

复制自： The Correct Way to Import Lodash Libraries - Alexander Chertkov 撰写的一篇基准文章。

Answer 4

您可以将它们导入为

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 5

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

它有一些限制：

• 您必须使用 ES2015 导入来加载 Lodash
• 不支持 Babel < 6 和 Node.js < 4
• 不支持链序列。 有关替代方案，请参阅此博客文章。
• 不支持模块化方法包

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

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

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

// 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 VS 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) 一起使用

Answer 8

我认为更简洁的导入 lodash 的方式是这样的：-

从'lodash'导入_

然后你可以像这样使用这个下划线来使用你想要的任何东西：-

_。已（）

Answer 9

对于那些想要继续使用 _ 的人，只需像这样导入它们：

import groupBy from 'lodash/groupBy';
import filter from 'lodash/filter';
import get from 'lodash/get';

window._ = {groupBy, filter, get};

Answer 10

import { cloneDeep, groupBy } from 'lodash';

我认为当您不需要使用 _ 将数组转换为 lodash object 时，这会更简单。

const groupData = groupBy(expandedData, (x) => x.room.name);