Comment importer une fonction Lodash unique?

Question

En utilisant webpack, j'essaie d'importer isEqual puisque lodash semble tout importer. J'ai essayé de faire ce qui suit sans succès:

 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'
 

Answer 1

Vous pouvez installer lodash.isequal en un seul module sans l'installation de l'ensemble de la lodash paquet comme suit:

npm install --save lodash.isequal

Lors de l'utilisation d'ECMAScript 5 et CommonJS modules, vous importez ensuite comme ceci:

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

À l'aide de ES6 modules, ce serait:

import isEqual from 'lodash.isequal';

Et vous pouvez l'utiliser dans votre code:

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

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

Source: documentation Lodash

Après l'importation, vous pouvez utiliser l' isEqual fonction dans votre code. Notez que ce n'est pas une partie d'un objet nommé _ si vous importez de cette façon, de sorte que vous ne pas référencer avec _.isEqual, mais directement avec isEqual.

Alternative: Utiliser lodash-es

Comme l'a souligné @kimamula:

Avec webpack 4 et lodash-es 4.17.7 et plus, ce code fonctionne.

import { isEqual } from 'lodash-es';

C'est parce que webpack 4 prend en charge les effets secondaires de drapeau et d' lodash-es 4.17.7 et supérieur comprend le drapeau (qui est définie à l' false).

Pourquoi ne Pas Utiliser la Version Avec la barre oblique? D'autres réponses à cette question suggèrent que vous pouvez également utiliser un tiret au lieu d'un point, comme suit:

import isEqual from 'lodash/isequal';

Cela fonctionne aussi, mais il y a deux inconvénients mineurs:

• Vous devez installer l'ensemble lodash paquet (npm install --save lodash), non seulement la petite lodash.isequal paquet; espace de stockage n'est pas cher et les Processeurs sont rapides, donc vous ne pouvez pas se soucier de cette
• Le faisceau résultant lors de l'utilisation d'outils comme webpack sera un peu plus grand; j'ai trouvé que les dimensions des paquets avec un minimum d'exemple de code d' isEqual sont en moyenne de 28% plus grand (essayé webpack 2 et webpack 3, avec ou sans Babel, avec ou sans Uglify)

Answer 2

Si vous souhaitez simplement inclure isEqual et pas le reste des fonctions lodash (utile pour garder la taille de votre paquet petite), vous pouvez le faire dans ES6;

 import isEqual from 'lodash/isEqual'
 

C'est à peu près la même chose que ce qui est décrit dans le fichier README lodash , sauf qu'ils utilisent la syntaxe require() .

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

Answer 3

Avec webpack 4 et lodash-es 4.17.7 et plus, ce code fonctionne.

import { isEqual } from 'lodash-es';

C'est parce que webpack 4 prend en charge l' sideEffects drapeau et lodash-es 4.17.7 et supérieur comprend le drapeau (qui est définie à l' false).

Modifier

À partir de la version 1.9.0, Colis prend également en charge "sideEffects": false, threrefore import { isEqual } from 'lodash-es'; est aussi l'arbre shakable avec le Colis.

Answer 4

Pas lié à webpack, mais je vais l'ajouter ici car beaucoup de gens se tournent actuellement vers le tapuscrit.

Vous pouvez également importer une fonction unique à partir de lodash en utilisant import isEqual from 'lodash/isEqual'; en dactylographe avec le drapeau esModuleInterop dans les options du compilateur (tsconfig.json)

Exemple

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

Answer 5

Lodash listes de quelques options dans leur README:

• babel-plugin-lodash

  • Installer lodash et la babel plugin:

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

  • Ajoutez ceci à votre .babelrc

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

  • Transforme cette

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

  À peu près à ceci:

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

• lodash-webpack-plugin

  • Installer lodash et webpack plugin:

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

  • Configurer votre 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 à l'aide de la lodash cli

  • $ lodash modularize exports=es -o ./