Tek Bir Lodash İşlevi Nasıl İçe Aktarılır?

WebPack kullanarak, içe çalışıyorum IsEqual beri lodashherşeyi ithal gibi görünüyor. Başarısız olarak aşağıdakileri yapmayı denedim:

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.isequalTüm lodash paketini şu şekilde kurmadan tek bir modül olarak kurabilirsiniz :

npm install --save lodash.isequal

ECMAScript 5 ve CommonJS modüllerini kullanırken, bunu şu şekilde içe aktarırsınız:

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

ES6 modüllerini kullanarak bu şöyle olur:

import isEqual from 'lodash.isequal';

Ve bunu kodunuzda kullanabilirsiniz:

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

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

Kaynak: Lodash belgeleri

İçe aktardıktan sonra, isEqualişlevi kodunuzda kullanabilirsiniz. O adında bir nesnenin bir parçası olmadığını Not _sen bu yüzden, bu şekilde ithal eğer yok ile ona başvuru _.isEqualile doğrudan ama isEqual.

Alternatif: Kullanma lodash-es

@Kimamula tarafından belirtildiği gibi :

Webpack 4 ve lodash-es 4.17.7 ve üstü ile bu kod çalışır.

import { isEqual } from 'lodash-es';

Bunun nedeni, webpack 4'ün sideEffects bayrağını desteklemesi ve lodash-es4.17.7 ve daha üst sürümünün bayrağı içermesidir (olarak ayarlanmıştır false).

Sürümü Neden Eğik Çizgi ile Kullanmıyorsunuz? Bu sorunun diğer yanıtları, nokta yerine kısa çizgi de kullanabileceğinizi gösteriyor, örneğin:

import isEqual from 'lodash/isequal';

Bu da işe yarıyor, ancak iki küçük dezavantaj var:

• Sadece küçük ayrı lodash.isequal paketini değil , tüm lodash paketini ( npm install --save lodash) yüklemelisiniz ; depolama alanı ucuzdur ve CPU'lar hızlıdır, bu yüzden bunu önemsemeyebilirsiniz
• Web paketi gibi araçlar kullanılırken ortaya çıkan paket biraz daha büyük olacaktır; Minimum kod örneğine sahip paket boyutlarının isEqualortalama% 28 daha büyük olduğunu öğrendim (Uglify ile veya Babel olmadan, webpack 2 ve webpack 3'ü denedim)

İşlevlerin isEqualgeri kalanını değil de yalnızca dahil etmek istiyorsanız lodash(paket boyutunuzu küçük tutmak için kullanışlıdır), bunu ES6'da yapabilirsiniz;

import isEqual from 'lodash/isEqual'

Bu hemen hemen anlatıldığı ne aynıdır README , orada kullandıkları hariç sözdizimi.lodashrequire()

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

Webpack 4 ve lodash-es 4.17.7 ve üstü ile bu kod çalışır.

import { isEqual } from 'lodash-es';

Bunun nedeni, webpack 4'ün sideEffectsbayrak ve lodash'leri desteklemesi ve 4.17.7 ve daha üst sürümünün bayrağı içermesidir (olarak ayarlanmıştır false).

Düzenle

1.9.0 sürümünden itibaren, Parcel ayrıca desteklemektedir"sideEffects": false , bu nedenle import { isEqual } from 'lodash-es';Parcel ile ağaç sarsılabilir.

Web paketi ile ilgili değil, ancak birçok insan şu anda daktilo kullanmaya geçtiği için buraya ekleyeceğim.

Ayrıca kullanarak lodash tek işlevi alabilirsiniz import isEqual from 'lodash/isEqual';ile daktilo esModuleInteropderleyici seçenekleri bayrağı (tsconfig.json)

misal

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

Lodash listeleri kendi içinde seçeneklerin bir çift README :

• babel-eklentisi-lodash

  • Lodash ve babel eklentisini yükleyin:

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

  • Bunu seninkine ekle .babelrc

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

  • Bunu dönüştürür

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

  Kabaca şuna göre:

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

• lodash-webpack-eklentisi

  • Lodash ve webpack eklentisini yükleyin:

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

  • Yapılandırın 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 klibi kullanan lodash-es

  • $ lodash modularize exports=es -o ./

bu aslında benim için çalıştı

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';tüm kitaplığı içe aktarıyor. Varsayılan olarak ağaç sallama yapması gereken Rollup kullanıyorum.

Ne zaman kendi modüllerimi yazsam, bu adlandırılmış içe aktarma sözdizimi çalışıyor ve Toplama başarıyla ağaç sallıyor, bu yüzden neden Lodash ile çalışmayacağı konusunda biraz kafam karışıyor.