วิธีการนำเข้าฟังก์ชัน 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ฟังก์ชันในโค้ดของคุณได้ โปรดทราบว่ามันไม่ได้เป็นส่วนหนึ่งของวัตถุชื่อ_ถ้าคุณนำวิธีนี้เพื่อให้คุณ ไม่อ้างอิงกับแต่โดยตรงกับ_.isEqualisEqual

ทางเลือก: การใช้ lodash-es

ตามที่ระบุไว้โดย@kimamula :

ด้วยwebpack 4 และlodash-es 4.17.7 ขึ้นไปโค้ดนี้ใช้งานได้

import { isEqual } from 'lodash-es';

เนื่องจากwebpack 4 สนับสนุนค่าสถานะlodash-essideEffects และ 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'

นี้จะสวยมากเช่นเดียวกับสิ่งที่อธิบายไว้ในREADMEยกเว้นว่ามีพวกเขาใช้ไวยากรณ์lodashrequire()

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ด้วย threrefore import { isEqual } from 'lodash-es';ยังสามารถเขย่าต้นไม้ได้ด้วย Parcel

ไม่เกี่ยวข้องกับ webpack แต่ฉันจะเพิ่มไว้ที่นี่เนื่องจากผู้คนจำนวนมากกำลังเปลี่ยนไปใช้ typescript

คุณยังสามารถนำเข้าฟังก์ชันเดียวจาก lodash โดยใช้import isEqual from 'lodash/isEqual';ใน typescript พร้อมกับesModuleInteropแฟล็กในตัวเลือกคอมไพเลอร์ (tsconfig.json)

ตัวอย่าง

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

Lodash แสดงรายการตัวเลือกสองสามอย่างในREADME :

• Babel-ปลั๊กอิน 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