Как импортировать одну функцию Lodash?


128

Используя webpack, я пытаюсь импортировать isEqual, поскольку, lodashпохоже, импортирует все. Я безуспешно пытался сделать следующее:

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
нет, я бы хотел импортировать и другие функции
adang3

2
Насколько я понимаю, теперь вы можете импортировать их по одному или все, без компромисса. Я бы порекомендовал один за другим, даже если он добавит много зависимостей в package.json, будет легче тестировать и обновлять метод один за другим позже, чем все за один шаг
Борис Шарпантье,

Ответы:


205

Вы можете установить lodash.isequalкак один модуль, не устанавливая весь пакет lodash , например:

npm install --save lodash.isequal

При использовании модулей ECMAScript 5 и CommonJS вы затем импортируете их следующим образом:

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

Используя модули ES6, это будет:

import isEqual from 'lodash.isequal';

И вы можете использовать это в своем коде:

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

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

Источник: документация Lodash

После импорта вы можете использовать isEqualфункцию в своем коде. Обратите внимание, что это не часть объекта с именем, _если вы импортируете его таким образом, поэтому вы не ссылаетесь на него _.isEqual, а напрямую с isEqual.

Альтернатива: Использование lodash-es

Как указал @kimamula :

Этот код работает с webpack 4 и lodash-es 4.17.7 и выше.

import { isEqual } from 'lodash-es';

Это связано с тем, что webpack 4 поддерживает флаг sideEffects, а lodash-esверсия 4.17.7 и выше включает флаг (для которого установлено значение false).

Почему бы не использовать версию с косой чертой? Другие ответы на этот вопрос предполагают, что вы также можете использовать тире вместо точки, например:

import isEqual from 'lodash/isequal';

Это тоже работает, но есть два незначительных недостатка:

  • Вам необходимо установить весь пакет lodash ( npm install --save lodash), а не только небольшой отдельный пакет lodash.isequal ; место для хранения дешевое, а процессоры быстрые, поэтому вам может быть все равно
  • Полученный пакет при использовании таких инструментов, как webpack, будет немного больше; Я обнаружил, что размеры isEqualпакетов с минимальным примером кода в среднем на 28% больше (пробовал webpack 2 и webpack 3, с или без Babel, с или без Uglify)

У меня почему-то не работает, получаю _ is not definedпри использовании_.isEquals
adang3

9
@cvDv, но не предполагается использовать лайк _.isEqual, надо использовать напрямуюisEqual
Арен Овсепян

1
Вы действительно установили модуль? npm i --save lodash.isequal
Патрик Хунд

1
@thund Поскольку этот ответ получил много голосов, я потратил время, чтобы сравнить размеры пакетов при использовании точки (как рекомендовано документами lodash) и косой черты, см. мой отредактированный ответ
Патрик Ханд

1
@PatrickHund: Это очень интересно. Я согласен с тем, что накладные расходы, связанные с наличием всего lodash на вашей машине разработки, довольно тривиальны, тем более что они устраняют необходимость запускать npm --save lodash.whateverкаждую функцию отдельно, но больший размер пакета, безусловно, может сделать целесообразным использование метода периода. Я удивлен, что есть разница, поэтому я рад, что вы нам подсчитали.
чт

64

Если вы хотите просто включить, isEqualа не остальные lodashфункции (полезно для сохранения небольшого размера пакета), вы можете сделать это в ES6;

import isEqual from 'lodash/isEqual'

Это в значительной степени так же , как то , что описано в в lodashREADME , за исключением того, что они используют require()синтаксис.

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

29

Этот код работает с webpack 4 и lodash-es 4.17.7 и выше.

import { isEqual } from 'lodash-es';

Это связано с тем, что webpack 4 поддерживает sideEffectsфлаг, а lodash-es 4.17.7 и выше включает флаг (для которого установлено значение false).

редактировать

Начиная с версии 1.9.0, Parcel также поддерживает"sideEffects": false , поэтому import { isEqual } from 'lodash-es';дерево может быть изменено с помощью Parcel.


1
Отлично, я добавил эту информацию к своему ответу, надеюсь, с вами все в порядке 😀
Патрик Хунд

Потрясающие. Это может уменьшить размер моего пакета с 78 кб до 18 кб при использовании webpack.
fsevenm

6

Не имеет отношения к webpack, но я добавлю его сюда, поскольку многие люди в настоящее время переходят на машинописный текст.

Вы также можете импортировать одну функцию из lodash, используя import isEqual from 'lodash/isEqual';машинописный текст с esModuleInteropфлагом в параметрах компилятора (tsconfig.json)

пример

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

1

Lodash перечисляет несколько вариантов в своем README :

  • столпотворение-плагин-lodash

    • Установите lodash и плагин babel:
    $ npm i --save lodash
    $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
    
    • Добавьте это в свой .babelrc
    {
      "plugins": ["lodash"],
      "presets": [["@babel/env", { "targets": { "node": 6 } }]]
    }
    
    • Преобразует это
    import _ from 'lodash'
    import { add } from 'lodash/fp'
    
    const addOne = add(1)
    _.map([1, 2, 3], addOne)
    

    Примерно к этому:

    import _add from 'lodash/fp/add'
    import _map from 'lodash/map'
    
    const addOne = _add(1)
    _map([1, 2, 3], addOne)
    
  • lodash-WebPack-плагин

    • Установите плагин lodash и webpack:
    $ npm i --save lodash
    $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack
    
    • Настройте свой 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 с использованием lodash cli

    • $ lodash modularize exports=es -o ./

0

это действительно сработало для меня

import { isEqual } from 'lodash';

24
Вы по-прежнему получаете полную библиотеку lodash, используя этот синтаксис. OP хочет получить только функцию isEqual, уменьшив размер своего пакета.
Найгаард,

Это импортирует всю библиотеку, а затем извлечет одну функцию в текущую область.
Лукас Лисис

0

import { isEqual } from 'lodash-es';импортирует всю библиотеку. Я использую Rollup, который по умолчанию должен встряхивать дерево.

Когда бы я ни писал свои собственные модули, этот именованный синтаксис импорта работает, и Rollup успешно качает дерево, поэтому я немного не понимаю, почему он не будет работать с Lodash.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.