如何导入单个 Lodash 函数?

使用 webpack,我试图导入 是平等的,因为 lodash似乎导入一切。我尝试过以下方法,但没有成功:

import { isEqual } from 'lodash'


import isEqual from 'lodash/lang'


import isEqual from 'lodash/lang/isEqual'


import { isEqual } from 'lodash/lang'


import { isEqual } from 'lodash/lang'
129064 次浏览

您可以将 lodash.isequal作为一个单独的模块安装,而不必像下面这样安装整个 浪荡包:

npm install --save lodash.isequal

当使用 ECMAScript 5和 CommonJS 模块时,您可以这样导入它:

var isEqual = require('lodash.isequal');

使用 ES6模块,这将是:

import isEqual from 'lodash.isequal';

您可以在代码中使用它:

const obj1 = {username: 'peter'};
const obj2 = {username: 'peter'};
const obj3 = {username: 'gregory'};


isEqual(obj1, obj2) // returns true
isEqual(obj1, obj3) // returns false

资料来源: Lodash 文档

导入后,可以在代码中使用 isEqual函数。注意,如果以这种方式导入它,它就不是名为 _的对象的一部分,因此 不要用 _.isEqual引用它,而是直接用 isEqual引用它。

备选方案: 使用 lodash-es

正如 @ kimamula指出的:

对于 webpack 4和 懒散4.17.7或更高版本,这段代码可以工作。

import { isEqual } from 'lodash-es';

这是因为 webpack 4支持 副作用标志,而 lodash-es4.17.7及更高版本包含该标志(设置为 false)。

< strong > 为什么不使用带斜杠的版本? 这个问题的其他答案表明,你也可以使用破折号代替点,比如:

import isEqual from 'lodash/isequal';

这种方法也有效,但有两个小缺点:

  • 您必须安装整个 浪荡包(npm install --save lodash) ,而不仅仅是小的单独的 Lodash 等于包; 存储空间很便宜,CPU 很快,所以您可能不会关心这个
  • 当使用 webpack 这样的工具时,产生的捆绑包会稍微大一些; 我发现使用最小代码示例 isEqual的捆绑包大小平均要大28% (尝试使用 webpack 2和 webpack 3,使用或不使用 Babel,使用或不使用 Uglify)

这招对我挺管用的

import { isEqual } from 'lodash';

如果只想包含 isEqual而不想包含 lodash函数的其余部分(这对于保持捆绑包的小型化很有用) ,可以在 ES6中完成;

import isEqual from 'lodash/isEqual'

这与 lodash自述文件中描述的非常相似,只是它们使用的是 require()语法。

var at = require('lodash/at');

对于 webpack 4和 loash-es 4.17.7或更高版本,这段代码可以工作。

import { isEqual } from 'lodash-es';

这是因为 webpack 4支持 sideEffects旗帜,loash-es 4.17.7及更高版本包含标志(设置为 false)。

剪辑

在1.9.0版本中,Parcel 还支持 "sideEffects": false,因此 import { isEqual } from 'lodash-es';也是树可以用包裹来震动的。

import { isEqual } from 'lodash-es';正在导入整个库。我正在使用汇总,默认情况下应该做树摇动。

每当我编写自己的模块时,这个名为 import 的语法都能正常工作,Rollup 成功地进行了树摇动,所以我有点困惑为什么它不能用于 Lodash。

与 webpack 无关,但我会在这里添加它,因为很多人目前正在转向打字。

您还可以使用 import isEqual from 'lodash/isEqual';打印文本,在编译器选项(tsconfig.json)中使用 esModuleInterop标志从 loash 导入单个函数

例子

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"lib": ["es6", "dom"],
"moduleResolution": "node",
"esModuleInterop": true,
...
}
}

Lodash 在他们的 自述中列出了几个选项:

  • < p > 巴别尔-插件-罗达什

    • 安装 loash 和 babel 插件:
    $ npm i --save lodash
    $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
    
    • 把这个加到你的 .babelrc
    {
    "plugins": ["lodash"],
    "presets": [["@babel/env", { "targets": { "node": 6 } }]]
    }
    
    • 改变了这一切
    import _ from 'lodash'
    import { add } from 'lodash/fp'
    
    
    const addOne = add(1)
    _.map([1, 2, 3], addOne)
    

    大致如下:

    import _add from 'lodash/fp/add'
    import _map from 'lodash/map'
    
    
    const addOne = _add(1)
    _map([1, 2, 3], addOne)
    
  • lodash-webpack-plugin

    • Install lodash and webpack plugin:
    $ npm i --save lodash
    $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack
    
    • 配置你的 webpack.config.js:
    var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
    var webpack = require('webpack');
    
    
    module.exports = {
    'module': {
    'rules': [{
    'use': 'babel-loader',
    'test': /\.js$/,
    'exclude': /node_modules/,
    'options': {
    'plugins': ['lodash'],
    'presets': [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
    }
    }]
    },
    'plugins': [
    new LodashModuleReplacementPlugin,
    new webpack.optimize.UglifyJsPlugin
    ]
    };
    
  • lodash-es using the lodash cli

    • $ lodash modularize exports=es -o ./

我认为 每个方法包上的 loash 文档至少在2020年6月回答这个问题是值得注意的:

每个方法包(如 Lodash.mapvalue、 Lodash.pickby 等)都有独立的 Lodash 方法。这些包只包含方法所依赖的代码。

但是,使用这些包是 气馁,他们将被移除在 v5

尽管它们可能看起来更轻量级,但是它们通常会增加 node _ module 和 webpack/rollup 包的大小,这些包在项目中传递性地依赖于每个方法包和/或主 loash 包。尽管主 loash 包中的许多方法共享代码,但 per 方法包内部绑定它们所依赖的任何代码的副本。

实际上医生建议:

不要担心ーー如果您直接导入或需要方法,例如 const throttle = require('lodash/throttle'),那么只有您的包使用的 loash 代码的子集将被绑定到使用您的包的项目中。

此外,这个页面还对不同的导入选项和生成的构建大小进行了一些非常有趣的研究: https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark

最好的方法是用斜杠:

import isEqual from 'lodash/isEqual'  //or equivalent

也许每个函数包的点是正确的答案一次,但他们使用 现在已经气馁了和他们将是 被移除了

而且,正如 卢卡斯所说,它比 因为这将导入所有 lib,而 那么将一个函数提取到当前作用域

如果你在浏览器上使用 REPL (比如 chrome dev 工具或者 Deno) ,你只需要快速测试一些东西,而不需要使用任何 IDE、 babel 或者工具,你可以从几乎任何网站导入一个或者更多的 loash 函数,除非它们受 CORS 限制,方法如下:

(arr => Promise.all(arr.map(_ =>
import ('https://cdn.skypack.dev/lodash.' + _))).then(_ => _[0].default(arr, _.map(d => d.default))))(
["zip", "unzip", "groupby", "mapvalues"])
.then(_ => Object.fromEntries(_)).then(_ => {
//you can use _ with zip, unzip, groupby, and mapvalues
console.log(Object.keys(_))
})