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


128

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'


1
no, me gustaría importar otras funciones también
adang3

2
Según tengo entendido, ahora puede importar uno por uno o todos ellos, sin término medio. Recomiendo uno por uno, incluso si agrega muchas dependencias en package.json, será más fácil probar y actualizar el método uno por uno más tarde, en lugar de todos en un solo paso
Boris Charpentier,

Respuestas:


205

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)

No funciona para mí por alguna razón, estoy obteniendo _ is not definedcuando uso_.isEquals
adang3

9
@cvDv, pero se supone que no debe usarse como _.isEqual, debería usarlo directamenteisEqual
Aren Hovsepyan

1
¿Has instalado realmente el módulo? npm i --save lodash.isequal
Patrick Hund

1
@thund Dado que esta respuesta recibe muchos votos positivos, me he tomado el tiempo para comparar los tamaños de los paquetes cuando uso puntos (como lo recomiendan los documentos de lodash) y las barras, vea mi respuesta editada
Patrick Hund

1
@PatrickHund: Eso es muy interesante. Estoy de acuerdo en que la sobrecarga de tener todo lodash en su máquina de desarrollo es bastante trivial, especialmente porque elimina la necesidad de ejecutar npm --save lodash.whatevercada función por separado, pero el tamaño de paquete más grande ciertamente podría hacer que valga la pena usar el método de período. Me sorprende que haya una diferencia, así que me alegro de que hayas corrido los números por nosotros.
Thund

64

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');

29

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.


1
Excelente, agregué esta información a mi respuesta, espero que esté bien contigo 😀
Patrick Hund

Increíble. Esto puede reducir el tamaño de mi paquete de 78 kb a 18 kb usando webpack.
fsevenm

6

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,
    ...
  }
}

1

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 ./

0

esto realmente funcionó para mí

import { isEqual } from 'lodash';

24
Aún obtienes la biblioteca completa de lodash usando esta sintaxis. OP solo quiere obtener la función isEqual, reduciendo el tamaño de su paquete.
Nyegaard

Esto importará todo lib y luego extraerá una función al alcance actual.
Lukas Liesis

0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.