Як імпортувати єдину функцію Лодаша?

Використовуючи 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

Джерело: документація Лодаша

Після імпорту ви можете використовувати isEqualфункцію у своєму коді. Зауважте, що він не є частиною об'єкта з ім'ям, _якщо ви імпортуєте його таким чином, тому ви не посилаєтесь на нього _.isEqual, а безпосередньо на isEqual.

Альтернатива: Використання lodash-es

Як вказував @kimamula :

Цей веб- пакет 4 і lodash-es 4.17.7 і новіших версій цей код працює.

import { isEqual } from 'lodash-es';

Це тому, що webpack 4 підтримує прапор sideEffects, а lodash-es4.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');

Цей веб-пакет 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,
    ...
  }
}

Лодаш перелічує кілька варіантів у своєму ПРОЧИТАННІ :

• babel-plugin-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, використовуючи cliash cliash

  • $ lodash modularize exports=es -o ./

це насправді працювало на мене

import { isEqual } from 'lodash';

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

Кожного разу, коли я писав власні модулі, цей ім’яний синтаксис імпорту працює, і згорнутий файл успішно тремтить, тому я трохи заплутався, чому він не працюватиме з Lodash.