Wie importiere ich eine einzelne Lodash-Funktion?

Mit Webpack versuche ich, isEqual zu importieren, da lodashanscheinend alles importiert wird. Ich habe Folgendes ohne Erfolg versucht:

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'

Sie können lodash.isequalals einzelnes Modul installieren, ohne das gesamte lodash- Paket wie folgt zu installieren :

npm install --save lodash.isequal

Wenn Sie die Module ECMAScript 5 und CommonJS verwenden, importieren Sie sie wie folgt:

var isEqual = require('lodash.isequal');

Bei Verwendung von ES6-Modulen wäre dies:

import isEqual from 'lodash.isequal';

Und Sie können es in Ihrem Code verwenden:

const obj1 = {username: 'peter'};
const obj2 = {username: 'peter'};
const obj3 = {username: 'gregory'};

isEqual(obj1, obj2) // returns true
isEqual(obj1, obj3) // returns false

Quelle: Lodash-Dokumentation

Nach dem Import können Sie die isEqualFunktion in Ihrem Code verwenden. Beachten Sie, dass es kein Teil eines Objekts mit dem Namen ist, _wenn Sie es auf diese Weise importieren. Sie verweisen also nicht mit _.isEqual, sondern direkt mit isEqual.

Alternative: Verwenden lodash-es

Wie von @kimamula hervorgehoben :

Mit Webpack 4 und lodash-es 4.17.7 und höher funktioniert dieser Code.

import { isEqual } from 'lodash-es';

Dies liegt daran, dass Webpack 4 das sideEffects- Flag unterstützt und lodash-es4.17.7 und höher das Flag enthält (das auf gesetzt ist false).

Warum nicht die Version mit dem Schrägstrich verwenden? Andere Antworten auf diese Frage legen nahe, dass Sie anstelle eines Punkts auch einen Bindestrich verwenden können:

import isEqual from 'lodash/isequal';

Dies funktioniert auch, aber es gibt zwei kleinere Nachteile:

• Sie müssen das gesamte lodash- Paket ( npm install --save lodash) installieren , nicht nur das kleine separate lodash.isequal- Paket. Der Speicherplatz ist billig und die CPUs sind schnell, sodass Sie sich möglicherweise nicht darum kümmern
• Das resultierende Bundle bei Verwendung von Tools wie Webpack ist etwas größer. Ich fand heraus, dass Bundle-Größen mit einem minimalen Codebeispiel von isEqualdurchschnittlich 28% größer sind (ausprobiertes Webpack 2 und Webpack 3, mit oder ohne Babel, mit oder ohne Uglify)

Wenn Sie nur isEqualdie restlichen lodashFunktionen einbeziehen möchten und nicht (nützlich, um die Größe Ihres Bundles klein zu halten), können Sie dies in ES6 tun.

import isEqual from 'lodash/isEqual'

Dies ist so ziemlich das Gleiche wie in der lodashREADME-Datei beschrieben , außer dass dort die require()Syntax verwendet wird.

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

Mit Webpack 4 und lodash-es 4.17.7 und höher funktioniert dieser Code.

import { isEqual } from 'lodash-es';

Dies liegt daran, dass Webpack 4 sideEffectsFlag und Lodash-es 4.17.7 und höher unterstützt und das Flag enthält (das auf gesetzt ist false).

Bearbeiten

Ab Version 1.9.0 unterstützt Parcel auch"sideEffects": false , daher import { isEqual } from 'lodash-es';kann mit Parcel auch ein Baum geschüttelt werden.

Nicht mit Webpack verwandt, aber ich werde es hier hinzufügen, da viele Leute derzeit auf Typoskript umsteigen.

Sie können auch eine einzelne Funktion aus lodash importieren, indem Sie import isEqual from 'lodash/isEqual';in Typoskript das esModuleInteropFlag in den Compileroptionen (tsconfig.json) verwenden.

Beispiel

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

Lodash listet in seiner README- Datei einige Optionen auf :

• babel-plugin-lodash

  • Installiere lodash und das babel plugin:

  $ npm i --save lodash
  $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
  

  • Fügen Sie dies Ihrem hinzu .babelrc

  {
    "plugins": ["lodash"],
    "presets": [["@babel/env", { "targets": { "node": 6 } }]]
  }
  

  • Transformiert dies

  import _ from 'lodash'
  import { add } from 'lodash/fp'
  
  const addOne = add(1)
  _.map([1, 2, 3], addOne)
  

  Grob dazu:

  import _add from 'lodash/fp/add'
  import _map from 'lodash/map'
  
  const addOne = _add(1)
  _map([1, 2, 3], addOne)
  

• lodash-webpack-plugin

  • Installieren Sie das lodash- und webpack-Plugin:

  $ npm i --save lodash
  $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack
  

  • Konfigurieren Sie Ihre 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 mit dem lodash cli

  • $ lodash modularize exports=es -o ./

das hat tatsächlich bei mir funktioniert

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';importiert die gesamte Bibliothek. Ich verwende Rollup, das standardmäßig Baumschütteln durchführen soll.

Immer wenn ich meine eigenen Module geschrieben habe, funktioniert diese benannte Importsyntax und Rollup erfolgreich Tree Shakes, daher bin ich etwas verwirrt darüber, warum es mit Lodash nicht funktioniert.