web-dev-qa-db-ja.com

単一のLodash関数をインポートする方法

Webpackを使って、lodashが全てをインポートしているように見えるので、私は isEqual をインポートしようとしています。私は成功せずに次のことをやろうとしました：

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'
javascriptlodash
82
Dangggg

以下のように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関数を使用できます。この方法でインポートした場合、_という名前のオブジェクトの一部ではないため、don't_.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';

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

  • 小さな個別のlodash.isequalパッケージだけでなく、lodashパッケージ（npm install --save lodash）全体をインストールする必要があります。記憶スペースは安く、CPUは速いです、従ってこれを気にしないかもしれません
  • Webpackのようなツールを使用したときに得られるバンドルは少し大きくなります。私は、isEqualの最小コード例のバンドルサイズが平均28％大きいことを発見しました（webpack 2とwebpack 3を、Babelの有無にかかわらず、Uglifyの有無にかかわらず試してみました）。
129
Patrick Hund

他のisEqual関数ではなくlodashを含めたいだけの場合（バンドルサイズを小さくするのに役立ちます）、ES6でこれを実行できます。

import isEqual from 'lodash/isEqual'

これは lodash README で説明されているものとほとんど同じですが、そこではrequire()構文を使用します。

var at = require('lodash/at');
41
Jo Sprague

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 もサポートしています。rereforeimport { isEqual } from 'lodash-es';もParcelとツリーシェイク可能です。

15
kimamula

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

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

例

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

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 ./
1
mlunoe

import { isEqual } from 'lodash-es';はライブラリ全体をインポートしています。私はロールアップを使用しています。これはデフォルトでツリーシェイクをするべきです。

私自身のモジュールを書いたときはいつでも、この名前付きimport構文はうまくいき、Rollupはうまくツリーシェイクするので、なぜそれがLodashでうまくいかないのかについて少し混乱しています。

0
o-t-w

これは実際に私のために働いた

import { isEqual } from 'lodash';
0
viktorko99