Menggunakan webpack, I'm mencoba untuk mengimpor sama dengan sejak lodash
tampaknya akan mengimpor segala sesuatu. I've mencoba melakukan hal berikut dengan sukses:
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.isequal
sebagai satu modul tanpa menginstal seluruh lodash paket seperti:
npm install --save lodash.isequal
Ketika menggunakan ECMAScript 5 dan CommonJS modul, kemudian impor seperti ini:
var isEqual = require('lodash.isequal');
Menggunakan ES6 modul, ini akan sama:
import isEqual from 'lodash.isequal';
Dan anda dapat menggunakannya dalam 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: Lodash dokumentasi
Setelah mengimpor, anda dapat menggunakan sama dengan
fungsi dalam kode anda. Perhatikan bahwa ini bukan bagian dari sebuah objek bernama _
jika anda mengimpor dengan cara ini, sehingga anda
don't referensi dengan _.ini sama dengan
, tapi langsung dengan sama dengan
.
Alternatif: Menggunakan lodash-es
Seperti yang ditunjukkan oleh @kimamula:
Dengan webpack 4 dan lodash-es 4.17.7 dan lebih tinggi, kode ini bekerja.
import { isEqual } from 'lodash-es';
Hal ini karena webpack 4 mendukung sideEffects bendera dan lodash-es
4.17.7 dan lebih tinggi termasuk bendera (yang diatur untuk false
).
Mengapa Tidak Menggunakan Versi Dengan Slash? Jawaban lain untuk pertanyaan ini menunjukkan bahwa anda juga dapat menggunakan dash bukannya sebuah titik, seperti:
import isEqual from 'lodash/isequal';
Ini bekerja juga, tapi ada dua kekurangan kecil:
npm install-simpan lodash
), tidak hanya yang kecil-kecil yang terpisah lodash.isequal paket; ruang penyimpanan yang murah dan Cpu yang cepat, sehingga anda mungkin tidak peduli tentang hal inisama dengan
rata-rata 28% lebih besar (mencoba webpack 2 dan webpack 3, dengan atau tanpa Babel, dengan atau tanpa Uglify)Jika anda hanya ingin memasukkan sama dengan
dan tidak sisa lodash
fungsi (berguna untuk menjaga anda bundel ukuran kecil), anda dapat melakukan ini di ES6;
import isEqual from 'lodash/isEqual'
Ini adalah cukup banyak yang sama seperti apa's yang dijelaskan dalam lodash
README, kecuali bahwa di sana mereka menggunakan require()
sintaks.
var at = require('lodash/at');
Dengan webpack 4 dan lodash-es 4.17.7 dan lebih tinggi, kode ini bekerja.
import { isEqual } from 'lodash-es';
Hal ini karena webpack 4 mendukung sideEffects
flag dan lodash-es 4.17.7 dan lebih tinggi termasuk bendera (yang diatur untuk false
).
Edit
Sebagai versi 1.9.0, Parcel juga mendukung "sideEffects": false
, threrefore impor { isEqual } dari 'lodash-es';
juga pohon shakable dengan Paket.
Tidak terkait dengan webpack tapi aku'akan menambahkannya di sini karena banyak orang yang saat ini pindah ke ketangkasan.
Anda juga dapat mengimpor satu fungsi dari lodash menggunakan impor isEqual dari 'lodash/isEqual';
dalam naskah dengan esModuleInterop
bendera di opsi kompiler (tsconfig.json)
contoh
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"lib": ["es6", "dom"],
"moduleResolution": "node",
"esModuleInterop": true,
...
}
}
Lodash daftar beberapa pilihan mereka README:
$ npm saya-simpan lodash $ npm saya-simpan-dev babel-plugin-lodash @babel/cli @babel/preset-env
.babelrc
{ "plugins": ["lodash"], "preset": [["@babel/env", { "target": { "node": 6 } }]] }
const addOne = tambah(1)
_.peta([1, 2, 3], addOne)
Kira-kira ini:
impor t_ambahkan dari 'lodash/fp/menambah'
impor _map dari 'lodash/peta'
const addOne = t_ambahkan(1) _map([1, 2, 3], addOne) ``
$ npm saya-simpan lodash $ npm saya-simpan-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');modul.ekspor = { 'modul': { 'aturan': [{ 'menggunakan': 'babel-loader', 'test': /.js$/, 'mengecualikan': /node_modules/, 'pilihan': { 'plugin': ['lodash'], 'preset': [['env', { 'modul': false, 'target': { 'node': 4 } }]] } }] }, 'plugins': [ baru LodashModuleReplacementPlugin, baru webpack.mengoptimalkan.UglifyJsPlugin ] }; ``
$ lodash modules ekspor=es -o ./
impor { isEqual } dari 'lodash-es';
mengimpor seluruh perpustakaan. Saya menggunakan Rollup yang harus dilakukan pohon gemetar secara default.
Setiap kali saya've menulis modul sendiri, ini bernama impor sintaks bekerja dan Rollup berhasil pohon getar, jadi saya'm sedikit bingung mengapa hal itu tidak't bekerja dengan Lodash.