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

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

import has from 'lodash/has';

vs

import { has } from 'lodash';

谢谢


当前回答

从 'lodash' 导入 { cloneDeep, groupBy };

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

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

其他回答

我认为这个答案可以很容易地用在任何项目中,用较少的努力带来最好的结果。

对于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 from 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有一个奇怪的碰撞,我已经删除了这个类型包,因为我会得到这个错误:

模块”/ . ./项目/ 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};

从 'lodash' 导入 { cloneDeep, groupBy };

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

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

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

import { has } from 'lodash-es';

注意事项;

CommonJS modules are not tree shakable so you should definitely use lodash-es, which is the Lodash library exported as ES Modules, rather than lodash (CommonJS). lodash-es's package.json contains "sideEffects": false, which notifies webpack 4 that all the files inside the package are side effect free (see https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). This information is crucial for tree shaking since module bundlers do not tree shake files which possibly contain side effects even if their exported members are not used in anywhere.

Edit

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