Como importar uma única função Lodash?

Usando o webpack, estou tentando importar o isEqual, pois lodashparece estar importando tudo. Eu tentei fazer o seguinte sem sucesso:

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'

Você pode instalar lodash.isequalcomo um único módulo sem instalar todo o pacote lodash da seguinte maneira:

npm install --save lodash.isequal

Ao usar os módulos ECMAScript 5 e CommonJS, você os importa da seguinte maneira:

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

Usando os módulos ES6, isso seria:

import isEqual from 'lodash.isequal';

E você pode usá-lo em seu código:

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

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

Fonte: documentação do Lodash

Após a importação, você pode usar a isEqualfunção no seu código. Observe que ele não faz parte de um objeto nomeado _se você o importar dessa maneira; portanto , não faça referência a ele _.isEqual, mas diretamente a ele isEqual.

Alternativa: Usando lodash-es

Como apontado por @kimamula :

Com o webpack 4 e o lodash-es 4.17.7 e superior, esse código funciona.

import { isEqual } from 'lodash-es';

Isso ocorre porque o webpack 4 suporta o sinalizador sideEffects e lodash-es4.17.7 e superior inclui o sinalizador (que está definido como false).

Por que não usar a versão com a barra? Outras respostas a esta pergunta sugerem que você também pode usar um traço em vez de um ponto, assim:

import isEqual from 'lodash/isequal';

Isso funciona também, mas há duas desvantagens menores:

• Você precisa instalar o pacote lodash inteiro ( npm install --save lodash), não apenas o pequeno pacote lodash.isequal ; o espaço de armazenamento é barato e as CPUs são rápidas, então você pode não se importar com isso
• O pacote resultante ao usar ferramentas como o webpack será um pouco maior; Descobri que os tamanhos dos pacotes com um exemplo de código mínimo isEqualsão em média 28% maiores (tentei o webpack 2 e o webpack 3, com ou sem Babel, com ou sem Uglify)

Se você deseja incluir isEquale não o restante das lodashfunções (útil para manter o tamanho do pacote pequeno), você pode fazer isso no ES6;

import isEqual from 'lodash/isEqual'

Este é praticamente o mesmo que o que está descrito no o lodashREADME , exceto que não usam require()sintaxe.

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

Com o webpack 4 e o lodash-es 4.17.7 e superior, esse código funciona.

import { isEqual } from 'lodash-es';

Isso ocorre porque o webpack 4 suporta sideEffectsflag e o lodash-es 4.17.7 e superior inclui o flag (que está definido como false).

Editar

A partir da versão 1.9.0, o Parcel também suporta"sideEffects": false , portanto, import { isEqual } from 'lodash-es';também é instável com o Parcel.

Não está relacionado ao webpack, mas vou adicioná-lo aqui, já que muitas pessoas estão migrando para o texto datilografado.

Você também pode importar uma única função do lodash usando import isEqual from 'lodash/isEqual';no texto datilografado com o esModuleInteropsinalizador nas opções do compilador (tsconfig.json)

exemplo

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

O Lodash lista algumas opções em seu README :

• babel-plugin-lodash

  • Instale o lodash e o plugin babel:

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

  • Adicione isto ao seu .babelrc

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

  • Transforma isso

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

  Aproximadamente a isso:

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

• lodash-webpack-plugin

  • Instale o plugin lodash e webpack:

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

  • Configure o seu 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 o lodash cli

  • $ lodash modularize exports=es -o ./

isso realmente funcionou para mim

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';está importando a biblioteca inteira. Estou usando o pacote cumulativo que deve agitar a árvore por padrão.

Sempre que eu escrevi meus próprios módulos, essa sintaxe de importação nomeada funciona e a árvore Rollup é bem-sucedida, com um tremor, por isso estou um pouco confuso sobre o porquê de não funcionar com o Lodash.