Comment importer une seule fonction Lodash?

En utilisant webpack, j'essaie d'importer isEqual puisque lodashsemble 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'

Vous pouvez installer en lodash.isequaltant que module unique sans installer l'ensemble du package lodash comme ceci:

npm install --save lodash.isequal

Lorsque vous utilisez les modules ECMAScript 5 et CommonJS, vous les importez ensuite comme ceci:

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

En utilisant des modules ES6, 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 la isEqualfonction dans votre code. Notez qu'il ne fait pas partie d'un objet nommé _si vous l'importez de cette façon, vous ne le référencez donc pas avec _.isEqual, mais directement avec isEqual.

Alternative: utilisation lodash-es

Comme l'a souligné @kimamula :

Avec webpack 4 et lodash-es 4.17.7 et supérieur, ce code fonctionne.

import { isEqual } from 'lodash-es';

Ceci est dû au fait que webpack 4 prend en charge l' indicateur sideEffects et que la version lodash-es4.17.7 et supérieure inclut l'indicateur (qui est défini sur false).

Pourquoi ne pas utiliser la version avec le slash? D'autres réponses à cette question suggèrent que vous pouvez également utiliser un tiret au lieu d'un point, comme ceci:

import isEqual from 'lodash/isequal';

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

• Vous devez installer tout le package lodash ( npm install --save lodash), pas seulement le petit package séparé lodash.isequal ; l'espace de stockage est bon marché et les processeurs sont rapides, vous pouvez donc ne pas vous en soucier
• Le bundle résultant lors de l'utilisation d'outils comme webpack sera légèrement plus grand; J'ai découvert que les tailles de bundle avec un exemple de code minimal de isEqualsont en moyenne 28% plus grandes (essayé webpack 2 et webpack 3, avec ou sans Babel, avec ou sans Uglify)

Si vous voulez simplement inclure isEqualet non le reste des lodashfonctions (utile pour garder la petite taille de votre bundle), 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 lodashREADME , sauf qu'ils utilisent la require()syntaxe.

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

Avec webpack 4 et lodash-es 4.17.7 et supérieur, ce code fonctionne.

import { isEqual } from 'lodash-es';

Ceci est dû au fait que webpack 4 prend en charge le sideEffectsdrapeau et que lodash-es 4.17.7 et supérieur inclut le drapeau (qui est défini sur false).

Éditer

À partir de la version 1.9.0, Parcel prend également en charge"sideEffects": false , par conséquent, l'arborescence import { isEqual } from 'lodash-es';peut également être modifiée avec Parcel.

Pas lié au webpack mais je l'ajouterai ici car beaucoup de gens passent actuellement à la dactylographie.

Vous pouvez également importer une seule fonction à partir de lodash en utilisant import isEqual from 'lodash/isEqual';dans typescript avec l' esModuleInteropindicateur dans les options du compilateur (tsconfig.json)

exemple

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

Lodash répertorie quelques options dans leur README :

• babel-plugin-lodash

  • Installez lodash et le plugin babel:

  $ 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 cela

  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)

• plugin-webpack-lodash

  • Installez le plugin lodash et webpack:

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

  • Configurez 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 utilisant le lodash cli

  • $ lodash modularize exports=es -o ./

cela a fonctionné pour moi

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';importe la bibliothèque entière. J'utilise Rollup qui devrait faire trembler les arbres par défaut.

Chaque fois que j'ai écrit mes propres modules, cette syntaxe d'importation nommée fonctionne et Rollup réussit à trembler dans l'arborescence, donc je ne sais pas pourquoi cela ne fonctionnera pas avec Lodash.