Bagaimana cara Mengimpor Fungsi Lodash Tunggal?

Menggunakan webpack, saya mencoba mengimpor isEqual karena lodashsepertinya mengimpor semuanya. Saya telah mencoba melakukan hal berikut tetapi tidak berhasil:

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'

Anda dapat menginstal lodash.isequalsebagai modul tunggal tanpa menginstal seluruh paket lodash seperti:

npm install --save lodash.isequal

Saat menggunakan modul ECMAScript 5 dan CommonJS, Anda kemudian mengimpornya seperti ini:

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

Menggunakan modul ES6, ini akan menjadi:

import isEqual from 'lodash.isequal';

Dan Anda dapat menggunakannya di kode Anda:

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

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

Sumber: Dokumentasi Lodash

Setelah mengimpor, Anda dapat menggunakan isEqualfungsi tersebut di kode Anda. Perhatikan bahwa ini bukan bagian dari objek yang dinamai _jika Anda mengimpornya dengan cara ini, jadi Anda tidak mereferensikannya dengan _.isEqual, tetapi langsung denganisEqual .

Alternatif: Menggunakan lodash-es

Seperti yang ditunjukkan oleh @kimamula :

Dengan webpack 4 dan lodash-es 4.17.7 dan yang lebih tinggi, kode ini berfungsi.

import { isEqual } from 'lodash-es';

Hal ini karena Webpack 4 mendukung para sideeffects bendera dan lodash-es4.17.7 dan lebih tinggi termasuk bendera (yang diatur ke false).

Mengapa Tidak Menggunakan Versi Dengan Slash? Jawaban lain untuk pertanyaan ini menyarankan Anda juga dapat menggunakan tanda hubung sebagai pengganti titik, seperti ini:

import isEqual from 'lodash/isequal';

Ini juga berfungsi, tetapi ada dua kelemahan kecil:

• Anda harus menginstal seluruh paket lodash ( npm install --save lodash), bukan hanya lodash.isequal kecil yang terpisah paket ; ruang penyimpanan murah dan CPU cepat, jadi Anda mungkin tidak peduli tentang ini
• Bundel yang dihasilkan saat menggunakan alat seperti webpack akan sedikit lebih besar; Saya menemukan bahwa ukuran bundel dengan contoh kode minimal isEqualrata-rata 28% lebih besar (mencoba webpack 2 dan webpack 3, dengan atau tanpa Babel, dengan atau tanpa Uglify)

Jika Anda hanya ingin memasukkan isEqualdan bukan lodashfungsi lainnya (berguna untuk menjaga ukuran bundel Anda tetap kecil), Anda dapat melakukan ini di ES6;

import isEqual from 'lodash/isEqual'

Ini cukup banyak yang sama seperti apa yang dijelaskan dalam yang lodashREADME , kecuali bahwa ada mereka gunakan require()sintaks.

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

Dengan webpack 4 dan lodash-es 4.17.7 dan yang lebih tinggi, kode ini berfungsi.

import { isEqual } from 'lodash-es';

Ini karena webpack 4 mendukung sideEffectsflag dan lodash-es 4.17.7 dan yang lebih tinggi menyertakan flag (yang disetel kefalse ).

Sunting

Mulai versi 1.9.0, Parcel juga mendukung"sideEffects": false , karena import { isEqual } from 'lodash-es';itu juga pohon dapat diguncang dengan Parcel.

Tidak terkait dengan webpack tetapi saya akan menambahkannya di sini karena banyak orang saat ini pindah ke skrip ketikan.

Anda juga dapat mengimpor satu fungsi dari lodash menggunakan import isEqual from 'lodash/isEqual';in typescript dengan esModuleInteropflag di opsi compiler (tsconfig.json)

contoh

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

Lodash mencantumkan beberapa opsi di README mereka :

• babel-plugin-lodash

  • Instal lodash dan plugin babel:

  $ npm i --save lodash
  $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env

  • Tambahkan ini ke Anda .babelrc

  {
    "plugins": ["lodash"],
    "presets": [["@babel/env", { "targets": { "node": 6 } }]]
  }

  • Ubah ini

  import _ from 'lodash'
  import { add } from 'lodash/fp'
  
  const addOne = add(1)
  _.map([1, 2, 3], addOne)

  Secara kasar untuk ini:

  import _add from 'lodash/fp/add'
  import _map from 'lodash/map'
  
  const addOne = _add(1)
  _map([1, 2, 3], addOne)

• lodash-webpack-plugin

  • Instal plugin lodash dan webpack:

  $ npm i --save lodash
  $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack

  • Konfigurasi Anda 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 menggunakan lodash cli

  • $ lodash modularize exports=es -o ./

ini benar-benar berhasil untuk saya

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';sedang mengimpor seluruh perpustakaan. Saya menggunakan Rollup yang seharusnya melakukan goyangan pohon secara default.

Setiap kali saya menulis modul saya sendiri, sintaks impor bernama ini berfungsi dan Rollup berhasil getar pohon, jadi saya agak bingung mengapa tidak berfungsi dengan Lodash.