単一の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パッケージ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がsideEffectsフラグをサポートし、4.17.7以降にフラグがlodash-es含まれているためです（これはに設定されていますfalse）。

スラッシュでバージョンを使用しないのはなぜですか？ この質問に対する他の回答は、次のように、ドットの代わりにダッシュを使用することもできます：

import isEqual from 'lodash/isequal';

これも機能しますが、2つの小さな欠点があります。

• 小さな個別のlodash.isequalパッケージだけでなく、lodashパッケージ全体（npm install --save lodash）をインストールする必要があります。ストレージスペースが安価で、CPUが高速であるため、これについて気にする必要はありません。
• webpackなどのツールを使用した場合の結果のバンドルは少し大きくなります。最小限のコード例のバンドルサイズisEqualが平均28％大きいことがわかりました（webl 2とwebpack 3を試してみました（Babelありまたはなし、Uglifyありまたはなし）。

isEqual残りのlodash関数を含めたくない場合（バンドルサイズを小さく保つのに便利）、ES6でこれを行うことができます。

import isEqual from 'lodash/isEqual'

これは、構文を使用していることを除いて、lodashREADMEで説明されているものとほとんど同じ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以降、Parcel"sideEffects": falseはもサポートしているため、Parcelでimport { isEqual } from 'lodash-es';ツリーを揺さぶることもできます。

webpackとは関係ありませんが、多くの人が現在typescriptに移行しているので、ここに追加します。

コンパイラー・オプション（tsconfig.json）にフラグを付けimport isEqual from 'lodash/isEqual';たtypescriptを使用して、lodashから単一の関数をインポートすることもできesModuleInteropます。

例

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

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 cliを使用したlodash-es

  • $ lodash modularize exports=es -o ./

これは実際に私のために働きました

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';ライブラリ全体をインポートしています。デフォルトでツリーの揺れを行うRollupを使用しています。

私が独自のモジュールを作成したときはいつでも、この名前付きインポート構文が機能し、Rollupがツリーシェイクに成功したため、Lodashで機能しない理由について少し混乱しています。