कैसे एक एकल Lodash समारोह आयात करने के लिए?

Question

Webpack का उपयोग करते हुए, मैं आयात करने की कोशिश कर रहा हूं क्योंकि 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'

Comments

क्या आपका मतलब है npmjs.com/package/lodash.isequal ?

— बोरिस चैरपिएर

नहीं, मैं अन्य कार्यों के साथ

— adang3

मेरी समझ में, अब आप एक या सभी के द्वारा एक आयात कर सकते हैं, कोई मध्य मैदान नहीं। मैं एक-एक करके इसकी सिफारिश करूंगा, भले ही यह पैकेज में बहुत अधिक निर्भरता जोड़ दे। इसके अलावा, एक के बाद एक, एक से एक चरण में, बल्कि एक-एक करके सभी तरीकों के बजाय टेस्ट को अपग्रेड करना आसान होगा

— बोरिस चार्परियर

Answer 1

आप lodash.isequalपूरे लॉकेट पैकेज को स्थापित किए बिना एकल मॉड्यूल के रूप में स्थापित कर सकते हैं :

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 और लॉकेट-एस 4.17.7 और उच्चतर के साथ, यह कोड काम करता है।

import { isEqual } from 'lodash-es';

ऐसा इसलिए है क्योंकि वेबपैक 4 साइडफ्लेक्स फ्लैग और lodash-es4.17.7 का समर्थन करता है और उच्चतर में फ्लैग (जो सेट है false) शामिल है।

स्लैश के साथ संस्करण का उपयोग क्यों नहीं करें? इस प्रश्न के अन्य उत्तर बताते हैं कि आप डॉट के बजाय डैश का उपयोग कर सकते हैं, जैसे:

import isEqual from 'lodash/isequal';

यह भी काम करता है, लेकिन दो छोटी कमियां हैं:

• आपको पूरे लॉश पैकेज को स्थापित करना होगा ( npm install --save lodash), न कि केवल छोटे से अलग लॉश.इसेक्वल पैकेज को; भंडारण स्थान सस्ता है और सीपीयू तेज हैं, इसलिए आप इस बारे में परवाह नहीं कर सकते हैं
• वेबपैक जैसे टूल का उपयोग करते समय परिणामी बंडल थोड़ा बड़ा होगा; मुझे पता चला कि एक न्यूनतम कोड उदाहरण के साथ बंडल आकार isEqualऔसतन 28% बड़ा होता है (वेबलॉग 2 और वेबपैक 3 की कोशिश की जाती है, बेगेल के साथ या उसके बिना या उसके बिना)

Comments

किसी कारण से मेरे लिए काम नहीं करता है, मैं _ is not definedका उपयोग करते समय हो रहा है_.isEquals

— adang3

@cvDv, लेकिन यह की तरह उपयोग करने के लिए माना जाता नहीं है _.isEqual, तो आप चाहिए सीधे का उपयोगisEqual

— Aren Hovsepyan

क्या आपने वास्तव में मॉड्यूल स्थापित किया है? npm i --save lodash.isequal

— पैट्रिक हुंड

@thund चूंकि इस उत्तर को बहुत अधिक वोट मिले हैं, इसलिए मैंने डॉट का उपयोग करते समय बंडल आकारों की तुलना करने के लिए समय लिया है (जैसा कि लॉक्ड डॉक्स द्वारा अनुशंसित है) और स्लैश, मेरा संपादित उत्तर देखें

— पैट्रिक हंड

@PatrickHund: यह बहुत दिलचस्प है। मैं सहमत हूं कि आपके विकास मशीन पर पूरे लॉश होने का ओवरहेड बहुत तुच्छ है, खासकर जब से यह npm --save lodash.whateverप्रत्येक फ़ंक्शन के लिए अलग से चलाने की आवश्यकता को समाप्त करता है , लेकिन बड़े बंडल आकार निश्चित रूप से अवधि पद्धति का उपयोग करने लायक बना सकता है। मुझे आश्चर्य है कि इसमें अंतर है, इसलिए मुझे खुशी है कि आपने हमारे लिए नंबर चलाए।

— थंड

Answer 2

यदि आप बस शामिल करना चाहते हैं isEqualऔर बाकी lodashकार्यों को नहीं करना चाहते हैं (अपने बंडल के आकार को छोटा रखने के लिए उपयोगी), तो आप ईएस 6 में ऐसा कर सकते हैं;

import isEqual from 'lodash/isEqual'

यह बहुत हद तक वही है जो lodashREADME में वर्णित है , सिवाय इसके कि वे require()सिंटैक्स का उपयोग करते हैं।

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

Answer 3

वेबपैक 4 और लॉकेट-एस 4.17.7 और उच्चतर के साथ यह कोड काम करता है।

import { isEqual } from 'lodash-es';

ऐसा इसलिए है क्योंकि वेबपैक 4 sideEffectsध्वज का समर्थन करता है और लेश-एस 4.17.7 और उच्चतर में ध्वज शामिल है (जो कि सेट है false)।

संपादित करें

संस्करण 1.9.0 के रूप में, पार्सल भी समर्थन करता है"sideEffects": false , थ्रेशर import { isEqual } from 'lodash-es';भी पार्सल के साथ वृक्ष के समान है।

Comments

बहुत बढ़िया, मैंने इस जानकारी को अपने जवाब में जोड़ा, आशा है कि यह आपके साथ ठीक है

— Patrick

बहुत बढ़िया। यह वेबपैक का उपयोग करके मेरे बंडल आकार को 78 केबी से 18 केबी तक कम कर सकता है।

— fsevenm

Answer 4

वेबपैक से संबंधित नहीं है, लेकिन मैं इसे यहां जोड़ूंगा क्योंकि बहुत से लोग वर्तमान में टाइपस्क्रिप्ट के लिए आगे बढ़ रहे हैं।

आप संकलक विकल्पों में ध्वज के import isEqual from 'lodash/isEqual';साथ टाइपस्क्रिप्ट का उपयोग करके लॉश से एकल फ़ंक्शन भी आयात कर सकते हैं esModuleInterop(tsconfig.json)

उदाहरण

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

Answer 5

लोदाश अपने README में कुछ विकल्पों की सूची देता है :

• कोलाहल-प्लगइन-lodash

  • लॉश और बैबल प्लगइन स्थापित करें:

  $ 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-प्लगइन

  • लॉश और वेबपैक प्लगइन स्थापित करें:

  $ 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 modularize exports=es -o ./

Answer 6

यह वास्तव में मेरे लिए काम किया

import { isEqual } from 'lodash';

Comments

इस सिंटैक्स का उपयोग करके आपको अभी भी पूर्ण लॉश लाइब्रेरी मिलती है। ओपी अपने बंडल के आकार को कम करने के लिए केवल आइसक्यूअल फ़ंक्सन प्राप्त करना चाहता है।

— नायगार्ड

यह सभी कामचलाऊ आयात करेगा और फिर एक कार्य को वर्तमान दायरे में निकालेगा।

— लुकास लाइज़िस

Answer 7

import { isEqual } from 'lodash-es';पूरे पुस्तकालय का आयात कर रहा है। मैं रोलअप का उपयोग कर रहा हूं जिसे डिफ़ॉल्ट रूप से पेड़ को हिलाना चाहिए।

जब भी मैंने अपने स्वयं के मॉड्यूल लिखे हैं, तो इसका नाम आयात सिंटैक्स काम करता है और रोलअप सफलतापूर्वक पेड़ हिलाता है, इसलिए मैं थोड़ा उलझन में हूं कि यह लॉडश के साथ काम क्यों नहीं करेगा।