如何导入单个Lodash功能

您可以在不安装整个 lodash 软件包的情况下安装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和Lodash-es 4.17.7及更高，此代码有效。

import { isEqual } from 'lodash-es';

这是因为WebPack 4支持副作用标志，lodash-es 4.17.7及更高版本包括标志(设置为false(。

为什么不将版本与斜线一起使用？这个问题的其他答案表明，您也可以使用破折号而不是点，例如：

import isEqual from 'lodash/isequal';

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

• 您必须安装整个 lodash 软件包(npm install --save lodash(，而不仅仅是小型独立 lodash.isequal 软件包；存储空间便宜，CPU很快，因此您可能不在乎这个
• 使用WebPack之类的工具时，由此产生的捆绑包将稍大一些；我发现，isEqual的最小代码示例的捆绑尺寸平均大28％(尝试过有或没有babel的WebPack 2和WebPack 3，有或不带有uglify(
(

如果您只想包括isEqual，而不是其余的lodash函数(对于保持捆绑尺寸小(，则可以在ES6中执行此操作;

import isEqual from 'lodash/isEqual'

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

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

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

import { isEqual } from 'lodash-es';

这是因为WebPack 4支持sideEffects标志和Lodash-Es 4.17.7及更高版本包括标志(设置为false(。

编辑

从1.9.0版本开始，包裹也支持"sideEffects": false，因此import { isEqual } from 'lodash-es';也可以用包裹摇晃。

与webpack无关，但我'在这里添加它，因为很多人当前正在转向打字稿。

您还可以使用import isEqual from 'lodash/isEqual';在COC_21在编译器选项(tsconfig.json(中使用CC_20在Lodash中导入单个函数。

示例

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

我认为值得注意的是，关于每个方法包的lodash文档至少从2020年6月开始回答此问题：

lodash方法可在每个方法软件包中使用，例如lodash.mapvalues，lodash.pickby等。这些软件包仅包含该方法依赖的代码。

但是，使用这些软件包的使用是不建议的，并且将在V5 中删除它们。

尽管它们看起来更轻巧，但它们通常会增加Node_modules和WebPack/rollup Bundles的大小，该项目透支依赖于每个方法软件包和/或主Lodash软件包的多个。尽管主lodash包共享代码中的许多方法，而每个方法软件包的内部包装副本的任何代码的副本。

文档实际上建议：

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

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

最佳方法是使用斜杠：

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

也许每个功能软件包点缀是一次正确的答案，但是现在不建议使用它们的使用并将其删除。

也是，正如卢卡斯所说的那样，它比 import {isEqual} from 'lodash'，因为这将导入所有lib和然后将一个函数提取到当前范围。

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 modularize exports=es -o ./

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

每当我编写自己的模块时，这个名为导入语法的作品和滚动成功摇晃，所以我对为什么它不适用于lodash感到有些困惑。

大多数方法都有自己的软件包。安装相关软件包/方法：

npm i -S lodash.debounce
npm i -D @types/lodash.debounce

然后只导入该方法

import debounce from 'lodash.debounce';
debounce(() => { ...

另请参见：https：//www.npmjs.com/package/lodash.debouncouse

这实际上对我有用

import { isEqual } from 'lodash';