it-swarm.com.de

So importieren Sie eine einzelne Lodash-Funktion

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

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'
61
Eh Dang

Sie können lodash.isequal als einzelnes Modul installieren, ohne das gesamte Paket lodash wie folgt installieren zu müssen:

npm install --save lodash.isequal

Wenn Sie ECMAScript 5- und CommonJS-Module verwenden, importieren Sie sie dann folgendermaßen:

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 isEqual-Funktion in Ihrem Code verwenden. Beachten Sie, dass es nicht Teil eines Objekts mit dem Namen _ ist, wenn Sie es auf diese Weise importieren. Daher verweisen Sie nicht mit _.isEqual, aber direkt mit isEqual.

Alternative: Verwenden von 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 und lodash-es 4.17.7 und höher enthält, das das Flag enthält (das auf false gesetzt ist).

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

import isEqual from 'lodash/isequal';

Das funktioniert auch, aber es gibt zwei kleinere Nachteile:

  • Sie müssen das gesamte Paket lodash (npm install --save lodash) installieren, nicht nur das kleine separate Paket lodash.isequal; Speicherplatz ist billig und die CPUs sind schnell, so dass Sie sich nicht darum kümmern
  • Das resultierende Paket bei Verwendung von Tools wie Webpack ist etwas größer. Ich habe herausgefunden, dass Paketgrößen mit einem minimalen Codebeispiel von isEqual im Durchschnitt um 28% größer sind (Webpack 2 und Webpack 3 (mit oder ohne Babel, mit oder ohne Uglify).
100
Patrick Hund

Wenn Sie nur isEqual und nicht den Rest der lodash-Funktionen einschließen möchten (nützlich, um die Paketgröße klein zu halten), können Sie dies in ES6 tun.

import isEqual from 'lodash/isEqual'

Dies ist ziemlich genau das, was in der lodash README beschrieben ist, nur dass dort die require()-Syntax verwendet wird.

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

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 sideEffects flag unterstützt und lodash-es 4.17.7 und höher enthält das Flag (das auf false gesetzt ist).

Bearbeiten

Ab Version 1.9.0 unterstützt Parcel auch "sideEffects": false , so dass import { isEqual } from 'lodash-es'; auch mit Parcel baumstrukturierbar ist.

14
kimamula

Nicht mit Webpack verwandt, aber ich füge es hier hinzu, da viele Leute gerade zu TypeScript wechseln.

Sie können auch eine einzelne Funktion aus lodash mithilfe von import isEqual from 'lodash/isEqual'; in TypeScript mit dem Flag esModuleInterop in den Compileroptionen (tsconfig.json) importieren.

beispiel

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

Lodash listet einige Optionen in ihrer README 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 .babelrc hinzu.
    {
      "plugins": ["lodash"],
      "presets": [["@babel/env", { "targets": { "node": 6 } }]]
    }
    
    • Wandelt das um
    import _ from 'lodash'
    import { add } from 'lodash/fp'
    
    const addOne = add(1)
    _.map([1, 2, 3], addOne)
    

    Etwas 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 lodash und das 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 Ihren 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 ./
1
mlunoe

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

Wann immer ich meine eigenen Module geschrieben habe, funktioniert diese benannte Importsyntax und das Rollup wird erfolgreich von Tree Shakes erzeugt. Ich bin etwas verwirrt, warum es nicht mit Lodash funktioniert. 

0
o-t-w

das hat tatsächlich für mich funktioniert

import { isEqual } from 'lodash';
0
viktorko99