Como importar uma única função Lodash?

128

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'
adang3
fonte
1
Você quer dizer npmjs.com/package/lodash.isequal ?
Boris Charpentier
1
não, eu gostaria de importar outras funções também
adang3
2
No meu entender, agora você pode importar um por um ou todos eles, sem meio termo. Eu recomendo a um por um mesmo se adicionar um monte de dependências em package.json, será mais fácil para testar e atualizar um método por um mais tarde, em vez de todos eles em uma única etapa
Boris Charpentier

Respostas:

205

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)
Patrick Hund
fonte
Não funciona para mim por alguma razão, eu estou recebendo _ is not definedquando se utiliza_.isEquals
adang3
9
@cvDv, mas não é suposto para usar como _.isEqual, você deve usar diretamenteisEqual
Aren Hovsepyan
1
Você realmente instalou o módulo? npm i --save lodash.isequal
Patrick Hund
1
@thund Desde esta resposta recebe um lote de obter votos, tenho tido o tempo para comparar tamanhos de pacote ao usar ponto (como recomendado pelo docs lodash) e barras, veja a minha resposta editada
Patrick Hund
1
@PatrickHund: Isso é muito interessante. Concordo que a sobrecarga de ter todo o lodash em sua máquina de desenvolvimento é bastante trivial, especialmente porque elimina a necessidade de executar npm --save lodash.whatevercada função separadamente, mas o tamanho maior do pacote certamente valeria a pena usar o método de período. Estou surpreso com a diferença, então estou feliz que você tenha corrido os números para nós.
Thund
64

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');
Jo Sprague
fonte
29

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.

kimamula
fonte
1
Excelente, eu adicionei esta informação para a minha resposta, esperança de que está tudo bem com você 😀
Patrick Hund
Impressionante. Isso pode reduzir o tamanho do meu pacote de 78 kb para 18 kb usando o webpack.
fsevenm 13/07
6

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,
    ...
  }
}
Alex Beauchemin
fonte
1

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 ./
mlunoe
fonte
0

isso realmente funcionou para mim

import { isEqual } from 'lodash';
viktorko99
fonte
24
Você ainda obtém a biblioteca completa do lodash usando esta sintaxe. O OP quer obter apenas a função isEqual, reduzindo o tamanho do seu pacote.
Nyegaard 29/09
Isto irá importar todos os lib e , em seguida, extrair uma função para o âmbito actual.
Lukas Liesis
0

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.

Ollie Williams
fonte