Jak zaimportować pojedynczą funkcję Lodash?

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'

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)

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

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.

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

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

to faktycznie zadziałało dla mnie

import { isEqual } from 'lodash';

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.