javascript - react - lodash pluck

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

Question

Con webpack, intento importar isEqual ya que lodash parece 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''

Answer 1

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 el sideEffects y lodash-es 4.17.7 y superior incluye el indicador (que se establece en false ).

Editar

A partir de la versión 1.9.0, Parcel también admite "sideEffects": false , por lo tanto, import { isEqual } from ''lodash-es''; También es un árbol sacudible con Parcela.

Answer 2

Lodash enumera un par de opciones en su README :

• babel-plugin-lodash

  • Instala 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

  • Configure su 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 ./

Answer 3

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 el indicador esModuleInterop en las opciones del compilador (tsconfig.json)

ejemplo

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

Answer 4

Puede instalar lodash.isequal como 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: npmjs.com/package/lodash.isequal

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

Alternativa: usar 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 admite el indicador sideEffects y lodash-es 4.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 paquete con un ejemplo de código mínimo de isEqual son, en promedio, un 28% más grandes (probé webpack 2 y webpack 3, con o sin Babel, con o sin Uglify)

Answer 5

Si solo desea incluir isEqual y no el resto de las funciones lodash (ú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 lodash README de lodash , excepto que allí usan la sintaxis require() .

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

Answer 6

esto realmente funcionó para mí

import { isEqual } from ''lodash'';

Answer 7

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.