Jak zaimportować pojedynczą funkcję Lodash?


128

Używając pakietu webpack, próbuję zaimportować isEqual, ponieważ lodashwydaje się, że importuje wszystko. Próbowałem wykonać następujące czynności bez powodzenia:

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
nie, chciałbym również zaimportować inne funkcje
adang3

2
W moim rozumieniu możesz teraz importować pojedynczo lub wszystkie z nich, bez pośrednictwa. Poleciłbym jeden po drugim, nawet jeśli doda wiele zależności w package.json, łatwiej będzie przetestować i zaktualizować metodę jeden po drugim, zamiast wszystkich w jednym kroku
Boris Charpentier

Odpowiedzi:


205

Możesz zainstalować lodash.isequaljako pojedynczy moduł bez instalowania całego pakietu lodash w następujący sposób:

npm install --save lodash.isequal

Korzystając z modułów ECMAScript 5 i CommonJS, importujesz je w następujący sposób:

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

Używając modułów ES6, byłoby to:

import isEqual from 'lodash.isequal';

I możesz go użyć w swoim kodzie:

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

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

Źródło: dokumentacja Lodash

Po zaimportowaniu możesz użyć tej isEqualfunkcji w swoim kodzie. Zauważ, że nie jest to część obiektu nazwanego, _jeśli importujesz go w ten sposób, więc nie odwołujesz się do niego _.isEqual, ale bezpośrednio za pomocąisEqual .

Alternatywa: używanie lodash-es

Jak wskazał @kimamula :

Ten kod działa z pakietem webpack 4 i lodash-es 4.17.7 i nowszymi.

import { isEqual } from 'lodash-es';

Dzieje się tak, ponieważ webpack 4 obsługuje flagę sideEffects, a lodash-es4.17.7 i nowsze zawierają flagę (która jest ustawiona na false).

Dlaczego nie używać wersji z ukośnikiem? Inne odpowiedzi na to pytanie sugerują, że możesz również użyć myślnika zamiast kropki, na przykład:

import isEqual from 'lodash/isequal';

To też działa, ale są dwie drobne wady:

  • Musisz zainstalować cały pakiet lodash ( npm install --save lodash), a nie tylko mały oddzielny pakiet lodash.isequal ; przestrzeń dyskowa jest tania, a procesory są szybkie, więc możesz nie przejmować się tym
  • Wynikowy pakiet podczas korzystania z narzędzi takich jak webpack będzie nieco większy; Dowiedziałem się, że rozmiary paczek z minimalnym przykładem kodu isEqualsą średnio o 28% większe (wypróbowano webpack 2 i webpack 3, z Babel lub bez, z Uglify lub bez)

Z jakiegoś powodu nie działa u mnie, dostaję _ is not definedpodczas używania_.isEquals
adang3

9
@cvDv, ale nie ma to być jak _.isEqual, powinieneś używać bezpośrednioisEqual
Aren Hovsepyan

1
Czy faktycznie zainstalowałeś moduł? npm i --save lodash.isequal
Patrick Hund

1
@thund Ponieważ ta odpowiedź zyskała wiele głosów, poświęciłem czas na porównanie rozmiarów pakietów przy użyciu kropki (zgodnie z zaleceniami lodash Docs) i ukośników, zobacz moją zredagowaną odpowiedź
Patrick Hund

1
@PatrickHund: To bardzo interesujące. Zgadzam się, że narzut związany z posiadaniem całego lodash na twojej maszynie deweloperskiej jest dość trywialny, zwłaszcza, że ​​eliminuje potrzebę uruchamiania npm --save lodash.whateverkażdej funkcji osobno, ale większy rozmiar pakietu może z pewnością sprawić, że warto użyć metody okresowej. Dziwię się, że jest różnica, więc cieszę się, że sprawdziłeś dla nas liczby.
grzm

64

Jeśli chcesz dołączyć isEqualtylko resztę lodashfunkcji, a nie pozostałe funkcje (przydatne do utrzymania małego rozmiaru pakietu), możesz to zrobić w ES6;

import isEqual from 'lodash/isEqual'

To jest prawie tak samo jak to, co jest opisane w tej lodashREADME , chyba że używają require()składni.

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

29

Ten kod działa z pakietem webpack 4 i lodash-es 4.17.7 i nowszymi.

import { isEqual } from 'lodash-es';

Dzieje się tak, ponieważ webpack 4 obsługuje sideEffectsflagę, a lodash-es 4.17.7 i nowsze zawierają flagę (która jest ustawiona nafalse ).

Edytować

Począwszy od wersji 1.9.0, Parcel obsługuje również"sideEffects": false , dlatego import { isEqual } from 'lodash-es';jest również wstrząsany drzewem z Parcel.


1
Świetnie, dodałem te informacje do mojej odpowiedzi, mam nadzieję, że wszystko w porządku 😀
Patrick Hund

Niesamowite. Może to zmniejszyć rozmiar mojego pakietu z 78 kb do 18 kb przy użyciu pakietu webpack.
fsevenm

6

Nie jest związany z pakietem internetowym, ale dodam go tutaj, ponieważ wiele osób obecnie przechodzi na maszynopis.

Możesz również zaimportować pojedynczą funkcję z lodash, używając import isEqual from 'lodash/isEqual';w skrypcie maszynowym z esModuleInteropflagą w opcjach kompilatora (tsconfig.json)

przykład

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

1

Lodash wymienia kilka opcji w swoim README :

  • babel-plugin-lodash

    • Zainstaluj lodash i wtyczkę babel:
    $ npm i --save lodash
    $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
    • Dodaj to do swojego .babelrc
    {
      "plugins": ["lodash"],
      "presets": [["@babel/env", { "targets": { "node": 6 } }]]
    }
    • Przekształca to
    import _ from 'lodash'
    import { add } from 'lodash/fp'
    
    const addOne = add(1)
    _.map([1, 2, 3], addOne)

    Z grubsza do tego:

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

    • Zainstaluj wtyczkę lodash i webpack:
    $ npm i --save lodash
    $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack
    • Skonfiguruj 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 przy użyciu lodash cli

    • $ lodash modularize exports=es -o ./

0

to faktycznie zadziałało dla mnie

import { isEqual } from 'lodash';

24
Nadal masz pełną bibliotekę lodash, używając tej składni. OP chce uzyskać tylko funkcję isEqual, zmniejszając rozmiar swojego pakietu.
Nyegaard

Spowoduje to zaimportowanie całej biblioteki lib, a następnie wyodrębnienie jednej funkcji do bieżącego zakresu.
Lukas Liesis

0

import { isEqual } from 'lodash-es';importuje całą bibliotekę. Używam Rollup, który powinien domyślnie wykonywać potrząsanie drzewem.

Za każdym razem, gdy piszę własne moduły, ta nazwana składnia importu działa, a Rollup pomyślnie się trzęsie, więc jestem trochę zdezorientowany, dlaczego nie działa z Lodash.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.