¿Cómo importar una sola función Lodash?

Usando webpack, estoy tratando de importar isEqual ya que lodashparece estar importando todo. He intentado hacer lo siguiente sin éxito:

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'

Puede instalar lodash.isequalcomo un solo módulo sin instalar todo el paquete lodash de la siguiente manera:

npm install --save lodash.isequal

Al usar los módulos ECMAScript 5 y CommonJS, lo importas así:

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

Usando módulos ES6, esto sería:

import isEqual from 'lodash.isequal';

Y puedes usarlo en tu código:

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

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

Fuente: documentación de Lodash

Después de importar, puede usar la isEqualfunción en su código. Tenga en cuenta que no es parte de un objeto con nombre _si lo importa de esta manera, por lo que no lo referencia con _.isEqual, sino directamente con isEqual.

Alternativa: uso lodash-es

Como señaló @kimamula :

Con webpack 4 y lodash-es 4.17.7 y superior, este código funciona.

import { isEqual } from 'lodash-es';

Esto se debe a que webpack 4 es compatible con el indicador sideEffects y lodash-es4.17.7 y superior incluye el indicador (que se establece en false).

¿Por qué no usar la versión con la barra diagonal? Otras respuestas a esta pregunta sugieren que también puede usar un guión en lugar de un punto, así:

import isEqual from 'lodash/isequal';

Esto también funciona, pero hay dos inconvenientes menores:

• Debe instalar todo el paquete lodash ( npm install --save lodash), no solo el pequeño paquete separado lodash.isequal ; el espacio de almacenamiento es económico y las CPU son rápidas, por lo que es posible que no le importe
• El paquete resultante al usar herramientas como webpack será un poco más grande; Descubrí que los tamaños de los paquetes con un ejemplo de código mínimo isEqualson en promedio un 28% más grandes (probé webpack 2 y webpack 3, con o sin Babel, con o sin Uglify)

Si solo desea incluir isEqualy no el resto de las lodashfunciones (útil para mantener pequeño el tamaño de su paquete), puede hacerlo en ES6;

import isEqual from 'lodash/isEqual'

Esto es más o menos lo que se describe en el lodasharchivo README , excepto que allí usan la require()sintaxis.

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

Con webpack 4 y lodash-es 4.17.7 y superior, este código funciona.

import { isEqual } from 'lodash-es';

Esto se debe a que webpack 4 admite sideEffectsflag y lodash-es 4.17.7 y superior incluye la bandera (que está configurada en false).

Editar

A partir de la versión 1.9.0, Parcel también es compatible"sideEffects": false , por lo tanto, import { isEqual } from 'lodash-es';también se puede sacudir en árbol con Parcel.

No está relacionado con el paquete web, pero lo agregaré aquí, ya que muchas personas se están moviendo al mecanografiado.

También puede importar una sola función desde lodash usando import isEqual from 'lodash/isEqual';en mecanografiado con la esModuleInteropbandera en las opciones del compilador (tsconfig.json)

ejemplo

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

Lodash enumera un par de opciones en su README :

• babel-plugin-lodash

  • Instale lodash y el complemento babel:

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

  • Agregue esto a su .babelrc

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

  • Transforma esto

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

  Aproximadamente a esto:

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

• lodash-webpack-plugin

  • Instale el complemento lodash y webpack:

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

  • Configura tu 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 usando el cli de lodash

  • $ lodash modularize exports=es -o ./

esto realmente funcionó para mí

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';está importando toda la biblioteca. Estoy usando Rollup que debería hacer temblar los árboles por defecto.

Cada vez que escribo mis propios módulos, esta sintaxis de importación llamada funciona y Rollup se agita con éxito, así que estoy un poco confundido sobre por qué no funcionará con Lodash.