Wie importiere ich eine einzelne Lodash-Funktion?

128

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'
adang3
quelle
1
Meinen Sie npmjs.com/package/lodash.isequal ?
Boris Charpentier
1
Nein, ich möchte auch andere Funktionen importieren
adang3
2
Nach meinem Verständnis können Sie jetzt einen nach dem anderen oder alle importieren, kein Mittelweg. Ich würde die eine nach der anderen empfehlen, selbst wenn sie viele Abhängigkeiten in package.json hinzufügt. Es wird einfacher sein, die Methode später einzeln zu testen und zu aktualisieren, als alle in einem Schritt
Boris Charpentier

Antworten:

205

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)
Patrick Hund
quelle
Funktioniert aus irgendeinem Grund nicht für mich, ich _ is not defined_.isEquals
bekomme
9
@cvDv, aber es soll nicht wie verwenden _.isEqual, sollten Sie direkt verwendenisEqual
Aren Hovsepyan
1
Haben Sie das Modul tatsächlich installiert? npm ich - speichern lodash.isequal
Patrick Hund
1
@thund Da diese Antwort viele Stimmen erhält, habe ich mir die Zeit genommen, Bündelgrößen zu vergleichen, wenn ich Punkte (wie von lodash docs empfohlen) und Schrägstriche verwende. Siehe meine bearbeitete Antwort
Patrick Hund
1
@PatrickHund: Das ist sehr interessant. Ich bin damit einverstanden, dass der Aufwand, den gesamten Lodash auf Ihrem Entwicklungscomputer zu haben, ziemlich trivial ist, zumal die Notwendigkeit, npm --save lodash.whateverjede Funktion einzeln auszuführen, entfällt , aber die größere Bündelgröße könnte es sicherlich lohnenswert machen, die Periodenmethode zu verwenden. Ich bin überrascht, dass es einen Unterschied gibt, und ich bin froh, dass Sie die Zahlen für uns angegeben haben.
Donnerstag,
64

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');
Jo Sprague
quelle
29

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.

Kimamula
quelle
1
Ausgezeichnet, ich habe diese Informationen zu meiner Antwort hinzugefügt, hoffe, das ist in Ordnung mit Ihnen 😀
Patrick Hund
Genial. Dies kann meine Bundle-Größe mithilfe von Webpack von 78 KB auf 18 KB reduzieren.
fsevenm
6

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,
    ...
  }
}
Alex Beauchemin
quelle
1

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 ./
mlunoe
quelle
0

das hat tatsächlich bei mir funktioniert

import { isEqual } from 'lodash';
viktorko99
quelle
24
Mit dieser Syntax erhalten Sie weiterhin die vollständige Lodash-Bibliothek. OP möchte nur die isEqual-Funktion erhalten und so die Größe seines Bundles reduzieren.
Nyegaard
Dadurch wird die gesamte Bibliothek importiert und anschließend eine Funktion in den aktuellen Bereich extrahiert.
Lukas Liesis
0

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.

Ollie Williams
quelle