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

Ответ 1

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

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

После импорта вы можете использовать функцию 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 с минимальным примером кода isEqual в среднем на 28% больше (пробовал webpack 2 и webpack 3, с или без Babel, с или без Uglify)

Ответ 2

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

import isEqual from 'lodash/isEqual'

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

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

Ответ 3

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

Ответ 4

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

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

пример

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

Ответ 5

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

import { isEqual } from 'lodash';

Ответ 6

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

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

Ответ 7

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