Come importare una singola funzione Lodash?

Utilizzando webpack, sto cercando di importare isEqual poiché lodashsembra importare tutto. Ho provato a fare quanto segue senza successo:

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'

Puoi installare lodash.isequalcome un singolo modulo senza installare l'intero pacchetto lodash in questo modo:

npm install --save lodash.isequal

Quando si utilizzano i moduli ECMAScript 5 e CommonJS, lo si importa in questo modo:

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

Utilizzando i moduli ES6, questo sarebbe:

import isEqual from 'lodash.isequal';

E puoi usarlo nel tuo codice:

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

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

Fonte: documentazione Lodash

Dopo l'importazione, puoi utilizzare la isEqualfunzione nel tuo codice. Nota che non fa parte di un oggetto denominato _se lo importi in questo modo, quindi non lo fai riferimento con _.isEqual, ma direttamente con isEqual.

Alternativa: utilizzo lodash-es

Come sottolineato da @kimamula :

Con webpack 4 e lodash-es 4.17.7 e versioni successive, questo codice funziona.

import { isEqual } from 'lodash-es';

Questo perché webpack 4 supporta il flag sideEffects e lodash-es4.17.7 e versioni successive include il flag (che è impostato su false).

Perché non utilizzare la versione con la barra? Altre risposte a questa domanda suggeriscono che puoi anche usare un trattino invece di un punto, in questo modo:

import isEqual from 'lodash/isequal';

Anche questo funziona, ma ci sono due piccoli inconvenienti:

• Devi installare l'intero pacchetto lodash ( npm install --save lodash), non solo il piccolo pacchetto separato lodash.isequal ; lo spazio di archiviazione è economico e le CPU sono veloci, quindi potrebbe non interessarti
• Il bundle risultante quando si utilizzano strumenti come webpack sarà leggermente più grande; Ho scoperto che le dimensioni dei pacchetti con un esempio di codice minimo isEqualsono in media del 28% più grandi (ho provato webpack 2 e webpack 3, con o senza Babel, con o senza Uglify)

Se vuoi solo includere isEquale non il resto delle lodashfunzioni (utile per mantenere piccole le dimensioni del tuo bundle), puoi farlo in ES6;

import isEqual from 'lodash/isEqual'

Questo è più o meno lo stesso di quello che è descritto nella la lodashREADME , tranne che non si usano require()sintassi.

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

Con webpack 4 e lodash-es 4.17.7 e versioni successive, questo codice funziona.

import { isEqual } from 'lodash-es';

Questo perché webpack 4 supporta sideEffectsflag e lodash-es 4.17.7 e versioni successive include il flag (che è impostato su false).

modificare

A partire dalla versione 1.9.0, anche Parcel supporta"sideEffects": false , quindi import { isEqual } from 'lodash-es';è anche scuotibile con Parcel.

Non correlato al webpack, ma lo aggiungerò qui poiché molte persone stanno attualmente passando al dattiloscritto.

Puoi anche importare una singola funzione da lodash usando import isEqual from 'lodash/isEqual';in dattiloscritto con il esModuleInteropflag nelle opzioni del compilatore (tsconfig.json)

esempio

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

Lodash elenca un paio di opzioni nel suo README :

• babel-plugin-lodash

  • Installa lodash e il plugin babel:

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

  • Aggiungi questo al tuo .babelrc

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

  • Trasforma questo

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

  Approssimativamente a questo:

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

• lodash-webpack-plugin

  • Installa lodash e plugin webpack:

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

  • Configura il tuo 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 utilizzando il lodash cli

  • $ lodash modularize exports=es -o ./

questo effettivamente ha funzionato per me

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';sta importando l'intera libreria. Sto usando Rollup che dovrebbe scuotere gli alberi per impostazione predefinita.

Ogni volta che ho scritto i miei moduli, questa sintassi di importazione denominata funziona e Rollup scuote correttamente l'albero, quindi sono un po 'confuso sul motivo per cui non funzionerà con Lodash.