导入洛达什的正确方法

Correct way to import lodash

本文关键字：方法 导入      更新时间：2023-09-26

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

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

import has from 'lodash/has';

与

import { has } from 'lodash';

谢谢

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

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

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. 此信息对于树摇动至关重要，因为模块捆绑器不会树摇动可能包含副作用的文件，即使其导出的成员未在任何地方使用也是如此。

编辑

从 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 库的正确方法 - 亚历山大·切尔特科夫撰写的基准测试文章。

您可以将

它们导入为 

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

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

它有一些限制：

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

我只是把它们放在他们自己的文件中，然后导出到节点和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')
}

或者，如果您希望保留_以避免冲突(例如 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"' 用途"导出 ="，不能与"导出 *"一起使用.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' 的所有导入。按照文档进行操作，以确保它适合您。

import { cloneDeep, groupBy } from 'lodash';

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

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

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

import groupBy from 'lodash/groupBy';
import filter from 'lodash/filter';
import get from 'lodash/get';
window._ = {groupBy, filter, get};

我认为导入 lodash 的更干净的方式是这样的：-

import _ from 'lodash'

然后，您只需使用此下划线即可使用所需的任何内容，就像这样：-

_.has()
相关文章：