导入lodash的正确方法

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

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

import has from 'lodash/has';

vs

import { has } from 'lodash';

谢谢

259854 次浏览
小开
最佳答案

import has from 'lodash/has';更好，因为lodash将所有函数保存在一个文件中，因此与其在100k处导入整个'lodash'库，不如只导入lodash的has函数，该函数可能为2k。

小开

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

它有一些限制:

  • 你必须使用ES2015导入来加载Lodash
  • 巴别塔& lt;6,node . js & lt;4个不支持
  • 不支持链序列。有关替代方案，请参阅博客。
  • 不支持模块化的方法包
小开

如果你正在使用webpack 4，下面的代码是可摇树的。

import { has } from 'lodash-es';

注意事项;

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

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

  3. 这个信息对于摇树是至关重要的，因为模块绑定器不会摇树文件，即使导出的成员不在任何地方使用，这些文件也可能包含副作用。

编辑

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

小开

导入花括号内的特定方法

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

优点:

  • 只有一个导入行(用于相当数量的函数)
  • 更可读的用法:map()而不是后面javascript代码中的_.map()。

缺点:

  • 每当我们想要使用一个新功能或停止使用另一个功能时，它都需要维护和管理

摘自:导入Lodash库的正确方法-一个基准文章，作者Alexander Chertkov。

小开

您可以导入它们为

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),
小开

我只是把它们放在自己的文件中，然后导出给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'),
}
小开

我认为这个回答可以很容易地用于任何项目，并以较少的努力带来最好的结果。

对于Typescript用户，使用如下方式:

// 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')
}

或者，如果你更喜欢保留_以避免冲突(例如，rxjs中的map 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')
}
< p >更新: 似乎正确的导出方式是:

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

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

Module '"/../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的方式是这样的:-

import _ from 'lodash'

然后你可以使用任何你想要的，只要使用下划线，就像这样:-

_.has()
小开

对于那些想要继续使用_的人，那么就像这样导入它们:

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


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

import { cloneDeep, groupBy } from 'lodash';

我认为这是更简单的时候，你不需要转换数组到lodash对象使用_。

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


提交答案