如何导入单个Lodash函数？

使用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'

您可以将其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文档

导入后，您可以isEqual在代码中使用该函数。请注意，_如果您以这种方式导入对象，则它不是命名对象的一部分，因此，您 不必使用_.isEqual而是直接使用来引用它isEqual。

选择：使用 lodash-es

正如@kimamula指出的那样：

在webpack 4和lodash-es 4.17.7及更高版本中，此代码有效。

import { isEqual } from 'lodash-es';

这是因为webpack 4支持sideEffects标志，并且lodash-es4.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））

如果您只想包括isEqual而不是其余的lodash功能（对于使软件包大小保持较小有用），则可以在ES6中完成；

import isEqual from 'lodash/isEqual'

这与lodash自述文件中的描述几乎相同，除了它们使用require()语法。

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

在webpack 4和lodash-es 4.17.7及更高版本中，此代码有效。

import { isEqual } from 'lodash-es';

这是因为webpack 4支持sideEffectsflag，并且lodash-es 4.17.7和更高版本包含该flag（设置为false）。

编辑

从1.9.0版开始，Parcel还支持"sideEffects": false，因此import { isEqual } from 'lodash-es';也可以与Parcel一起摇树。

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

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

例

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

Lodash在自述文件中列出了几个选项：

• 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 cli的lodash-es

  • $ lodash modularize exports=es -o ./

这实际上为我工作

import { isEqual } from 'lodash';

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

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