Question

使用webpack，我正在尝试导入isEqual，因为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'

Answer 1

您可以将lodash.isequal作为单个模块安装，而无需安装整个 lodash 软件包，如下所示：

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 documentation

导入后，您可以在代码中使用isEqual功能。请注意，如果您以这种方式导入它，它不是名为_的对象的一部分，所以您不使用_.isEqual引用它，但直接引用isEqual。

替代方案：使用lodash-es

正如@kimamula所指出的那样：

使用webpack 4和lodash-es 4.17.7及更高版本，此代码可以正常运行。

import { isEqual } from 'lodash-es';

这是因为webpack 4支持sideEffects标志和lodash-es 4.17.7及更高版本包含标志（设置为false）。

为什么不使用带斜线的版本？ 这个问题的其他答案表明你也可以使用短划线而不是点，如下所示：

import isEqual from 'lodash/isequal';

这也有效，但有两个小缺点：

你必须安装整个 lodash 包（npm install --save lodash），而不仅仅是小的单独的 lodash.isequal 包;存储空间很便宜且CPU速度很快，所以你可能不关心这个
使用webpack等工具时产生的捆绑会稍微大一点;我发现使用isEqual的最小代码示例的捆绑大小平均大28％（尝试使用webpack 2和webpack 3，有或没有Babel，有或没有Uglify）

Answer 2

如果您只想包含isEqual而不是其他lodash函数（有助于保持较小的包大小），可以在ES6中执行此操作;

import isEqual from 'lodash/isEqual'

这与the lodash README中描述的内容几乎相同，只是他们使用require()语法。

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

Answer 3

使用webpack 4和lodash-es 4.17.7及更高版本，此代码可以正常工作。

import { isEqual } from 'lodash-es';

这是因为webpack 4支持sideEffects flag而lodash-es 4.17.7及更高版本包含标志（设置为false）。

修改

As of version 1.9.0, Parcel also supports "sideEffects": false，因此import { isEqual } from 'lodash-es';也可以使用Parcel进行树形摇动。

Answer 4

与webpack无关，但由于许多人正在使用打字稿，我将在此处添加它。

您还可以使用打字机中的import isEqual from 'lodash/isEqual';和编译器选项（tsconfig.json）中的esModuleInterop标志，从lodash导入单个函数

示例

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

Answer 5

Lodash在README中列出了几个选项：

babel-plugin-lodash

安装lodash和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

安装lodash和webpack插件：

$ 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使用lodash cli
- $ lodash modularize exports=es -o ./

Answer 6

我认为至少在 2020 年 6 月之前lodash documentation on per method packages回答这个问题是值得注意的：

<块引用>

Lodash 方法可在独立的方法包中使用，例如 lodash.mapvalues、lodash.pickby 等。这些包仅包含该方法所依赖的代码。

但是，不鼓励使用这些软件包，它们将在 v5 中删除。

尽管它们看起来更轻量级，但它们通常会增加项目中 node_modules 和 webpack/rollup 包的大小，这些包传递地依赖于多个 per method 包和/或主 lodash 包。虽然主 lodash 包中的许多方法共享代码，但每个方法包在内部捆绑了它们所依赖的任何代码的副本。

文档实际上推荐：

<块引用>

别担心——如果你直接导入或需要方法，例如const throttle = require('lodash/throttle')，只有您的包使用的 lodash 代码子集会捆绑在使用您的包的项目中。

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

Answer 7

这实际上对我有用

import { isEqual } from 'lodash';

Answer 8

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

每当我编写了自己的模块时，这种名为import的语法就可以工作，并且Rollup可以成功地摇晃树，因此我对为什么它不适用于Lodash感到有些困惑。

Answer 9

最好的方法是使用斜线：

/etc/hosts

可能曾经对每个函数包加点是正确的答案，但是它们使用 is now discouraged 并且它们将是 removed。

另外，正如 Lukas 所说，它比 ssh_key_fingerprints，因为这将导入所有库，然后然后将一个函数提取到当前作用域。

如何导入单个Lodash功能？

9 个答案: