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

Используя 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'

Вы можете установить 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)

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

import isEqual from 'lodash/isEqual'

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

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

Этот код работает с 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.

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

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

пример

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

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

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

import { isEqual } from 'lodash';

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

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