Node.js के उपयोग से ES6 आयात / निर्यात की आवश्यकता होती है

Question

जिस परियोजना में मैं सहयोग कर रहा हूं, हमारे पास दो विकल्प हैं कि हम किस मॉड्यूल सिस्टम का उपयोग कर सकते हैं:

1. आयात मॉड्यूल का उपयोग कर require, और निर्यात का उपयोग कर module.exportsऔर exports.foo।
2. ईएस 6 का उपयोग करके मॉड्यूल आयात करना import, और ईएस 6 का उपयोग करके निर्यात करनाexport

क्या कोई प्रदर्शन लाभ एक दूसरे पर उपयोग करने के लिए है? क्या कुछ और है जो हमें पता होना चाहिए कि क्या हम नोड 6 से अधिक ईएस 6 मॉड्यूल का उपयोग कर रहे थे?

Comments

node --experimental-modules index.mjsआप importबेबल के बिना उपयोग करते हैं और नोड 8.5.0+ में काम करते हैं। पुराने तरीके के लिए पश्चगामी अनुकूलता के साथ, आप अपने ईपीएम पैकेजों को देशी ESModule के रूप में भी प्रकाशित (और कर सकते हैं) कर सकते हैं require।

— डेन डैस्कलेस्कु

Answer 1

क्या कोई प्रदर्शन लाभ एक दूसरे पर उपयोग करने के लिए है?

ध्यान रखें कि अभी तक कोई जावास्क्रिप्ट इंजन नहीं है जो मूल रूप से ईएस 6 मॉड्यूल का समर्थन करता है। आपने स्वयं कहा कि आप बैबल का उपयोग कर रहे हैं। बैबेल डिफ़ॉल्ट रूप से कॉमनजेएस ( / ) के लिए अभिसरण importऔर exportघोषणा करता है। इसलिए यदि आप ES6 मॉड्यूल सिंटैक्स का उपयोग करते हैं, तो यदि आप कोड को नोड में चलाते हैं, तो आप हुड के तहत कॉमनजेएस का उपयोग करेंगे।requiremodule.exports

कॉमनजस और ईएस 6 मॉड्यूल के बीच तकनीकी अंतर हैं, उदाहरण के लिए कॉमनजेएस आपको गतिशील रूप से मॉड्यूल लोड करने की अनुमति देता है। ES6 इसे अनुमति नहीं देता है, लेकिन इसके लिए विकास में एक एपीआई है ।

चूंकि ES6 मॉड्यूल मानक का हिस्सा हैं, इसलिए मैं उनका उपयोग करूंगा।

Comments

मैं का उपयोग करने की कोशिश की ES6 importके साथ require, लेकिन वे अलग तरह से काम किया। कॉमनजेएस केवल कक्षा का निर्यात करता है जबकि केवल एक वर्ग है। ईएस 6 निर्यात जैसे कई वर्ग हैं इसलिए आपको .ClassNameनिर्यात किए गए वर्ग को प्राप्त करने के लिए उपयोग करना होगा। क्या कोई अन्य मतभेद हैं जो वास्तव में कार्यान्वयन को प्रभावित करते हैं

— Thellimist

@Entei: लगता है जैसे आप एक डिफ़ॉल्ट निर्यात चाहते हैं, एक नामित निर्यात नहीं। module.exports = ...;के बराबर है export default ...। exports.foo = ...के बराबर है export var foo = ...;

— फेलिक्स क्लिंग

यह ध्यान देने योग्य है कि भले ही बाबेल अंत में कॉमनजेएस importको नोड में स्थानांतरित कर देता है, वेबपैक 2 / रोलअप के साथ उपयोग किया जाता है (और कोई अन्य बंडल जो ईएस 6 पेड़ को हिलाने की अनुमति देता है), यह एक ऐसी फ़ाइल के साथ हवा करना संभव है जो समकक्ष कोड नोड क्रंच से काफी छोटा है। का उपयोग कर के माध्यम से requireवास्तव में , क्योंकि तथ्य की ES6 आयात / निर्यात का स्थिर विश्लेषण की अनुमति देता है। हालांकि, इससे नोड (अभी तक) पर कोई फर्क नहीं पड़ेगा, यह निश्चित रूप से हो सकता है कि कोड अंततः एकल ब्राउज़र बंडल के रूप में बंद हो जाए।

— ली बेन्सन

जब तक आपको डायनामिक इंपोर्ट करने की जरूरत न हो

— चूलियन

ES6 मॉड्यूल नवीनतम V8 में हैं और झंडे के पीछे अन्य ब्राउज़रों में भी आ रहे हैं। देखें: medium.com/dev-channel/…

— Nexii Malthus

Answer 2

कई उपयोग / क्षमताएं हैं जिन पर आप विचार करना चाहते हैं:

आवश्यक है:

• आपके पास डायनामिक लोडिंग हो सकती है जहां लोड किए गए मॉड्यूल का नाम पूर्वनिर्धारित / स्थिर नहीं है, या जहां आप सशर्त रूप से केवल तभी लोड करते हैं यदि यह "वास्तव में आवश्यक" (कुछ कोड प्रवाह के आधार पर) हो।
• लोडिंग सिंक्रोनस है। इसका मतलब है कि यदि आपके पास कई requireएस हैं, तो वे एक-एक करके लोड और संसाधित होते हैं।

ES6 आयात:

• आप चुनिंदा आयात का उपयोग केवल चुनिंदा टुकड़ों को लोड करने के लिए कर सकते हैं, जिनकी आपको आवश्यकता है। जो याददाश्त को बचा सकता है।
• आयात अतुल्यकालिक हो सकता है (और वर्तमान ईएस 6 मॉड्यूल लोडर में, यह वास्तव में है) और थोड़ा बेहतर प्रदर्शन कर सकता है।

इसके अलावा, आवश्यकता मॉड्यूल प्रणाली मानक आधारित नहीं है। अब यह मानक बनने की बहुत संभावना नहीं है कि ईएस 6 मॉड्यूल मौजूद हैं। भविष्य में विभिन्न कार्यान्वयनों में ES6 मॉड्यूल के लिए मूल समर्थन होगा जो प्रदर्शन के मामले में लाभप्रद होगा।

Comments

आपको क्या लगता है कि ES6 आयात अतुल्यकालिक हैं?

— फेलिक्स क्लिंग

@ फेलिक्सलिंग - विभिन्न अवलोकनों का संयोजन। JSPM (ES6 मॉड्यूल लोडर ...) का उपयोग करते हुए मैंने देखा कि जब एक आयात ने वैश्विक नेमस्पेस को संशोधित किया तो प्रभाव अन्य आयातों के अंदर नहीं देखा गया (क्योंकि वे अतुल्यकालिक रूप से होते हैं .. यह ट्रांसप्लड कोड में भी देखा जा सकता है)। इसके अलावा, चूंकि यह व्यवहार है (1 आयात दूसरों को प्रभावित नहीं करता है) ऐसा करने का कोई कारण नहीं है, इसलिए यह कार्यान्वयन पर निर्भर हो सकता है

— अमित

आप कुछ बहुत महत्वपूर्ण उल्लेख करते हैं: मॉड्यूल लोडर। जबकि ES6 आयात और निर्यात सिंटैक्स प्रदान करता है, यह परिभाषित नहीं करता है कि मॉड्यूल को कैसे लोड किया जाना चाहिए। महत्वपूर्ण हिस्सा यह है कि घोषणाएं सांख्यिकीय रूप से विश्लेषण योग्य हैं, ताकि कोड को निष्पादित किए बिना निर्भरता निर्धारित की जा सके। यह एक मॉड्यूल लोडर को एक मॉड्यूल को सिंक्रोनाइज़ या एसिंक्रोनस रूप से लोड करने की अनुमति देगा। लेकिन ईएस 6 मॉड्यूल खुद से सिंक्रोनस या एसिंक्रोनस नहीं होते हैं।

— फेलिक्स क्लिंग

@FelixKling ES6 मॉड्यूल लोडर को ओपी में टैग किया गया था, इसलिए मुझे लगता है कि यह उत्तर के लिए प्रासंगिक बनाता है। मैंने यह भी कहा कि टिप्पणियों पर आधारित async वर्तमान व्यवहार है, साथ ही भविष्य में संभावना (किसी भी कार्यान्वयन में) इसलिए यह विचार करने के लिए एक प्रासंगिक बिंदु है। क्या आपको लगता है कि यह गलत है?

— अमित

मुझे लगता है कि मॉड्यूल लोडर के साथ मॉड्यूल सिस्टम / सिंटैक्स को भ्रमित नहीं करना महत्वपूर्ण है। उदाहरण के लिए, यदि आप नोड के लिए विकसित होते हैं, तो आप requireवैसे भी ES6 मॉड्यूल का संकलन कर रहे हैं, इसलिए आप वैसे भी नोड के मॉड्यूल सिस्टम और लोडर का उपयोग कर रहे हैं।

— फेलिक्स क्लिंग

Answer 3

मुख्य लाभ वाक्यात्मक हैं:

• अधिक घोषणात्मक / कॉम्पैक्ट सिंटैक्स
• ईएस 6 मॉड्यूल मूल रूप से यूएमडी (यूनिवर्सल मॉड्यूल डेफिनिशन) को अप्रचलित बना देगा - अनिवार्य रूप से कॉमनजेस और एएमडी (सर्वर) ब्राउज़र के बीच की विद्वता को दूर करता है।

आपको ES6 मॉड्यूल के साथ कोई प्रदर्शन लाभ देखने की संभावना नहीं है। तब भी आपको मॉड्यूल को बंडल करने के लिए अतिरिक्त लाइब्रेरी की आवश्यकता होगी, तब भी जब ब्राउज़र में ES6 सुविधाओं के लिए पूर्ण समर्थन हो।

Comments

क्या आप स्पष्ट कर सकते हैं कि ब्राउज़रों को पूर्ण ES6 मॉड्यूल समर्थन होने पर भी एक बंडल की आवश्यकता क्यों है?

— ई। सुंदरिन

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

— स्नोजा

यह मुझे थोड़ा विरोधाभासी लगता है। यदि पूर्ण समर्थन है तो बंडलर का उद्देश्य क्या है? ES6 कल्पना में कुछ याद आ रही है? बंडलर वास्तव में क्या करेगा जो पूरी तरह से समर्थित वातावरण में उपलब्ध नहीं है ?

— ई। सुंदरिन

जैसा कि @snozza ने कहा ... "आयात / निर्यात मॉड्यूल सुविधा किसी भी ब्राउज़र में भली-भांति लागू नहीं होती है। एक ट्रांसपिलर की अभी भी आवश्यकता है"

— रोबर्टमैन

अब आपको किसी अतिरिक्त लाइब्रेरी की आवश्यकता नहीं है। चूंकि v8.5.0 (एक वर्ष से अधिक समय पहले जारी किया गया है), node --experimemntal-modules index.mjsआपको बबैल के importबिना उपयोग करने देता है । पुराने तरीके के लिए पश्चगामी अनुकूलता के साथ, आप अपने ईपीएम पैकेज को मूल ESModule के रूप में भी प्रकाशित (और कर सकते हैं) कर सकते हैं require। कई ब्राउज़र मूल रूप से डायनेमिक आयात का भी समर्थन करते हैं ।

— डेन डैस्कलेस्कु

Answer 4

क्या कोई प्रदर्शन लाभ एक दूसरे पर उपयोग करने के लिए है?

वर्तमान उत्तर नहीं है, क्योंकि वर्तमान ब्राउज़र इंजन में से कोई भी लागू नहीं होता है import/export से कोई भी ES6 मानक से नहीं होता है।

कुछ तुलना चार्ट http://kangax.github.io/compat-table/es6/ इसे ध्यान में नहीं रखते हैं, इसलिए जब आप क्रोम के लिए लगभग सभी साग देखते हैं, तो बस सावधान रहें। importES6 के कीवर्ड को ध्यान में नहीं रखा गया है।

दूसरे शब्दों में, वी 8 सहित मौजूदा ब्राउज़र इंजन आयात नहीं कर सकते नई JavaScript फ़ाइल से मुख्य JavaScript फ़ाइल किसी भी जावास्क्रिप्ट के निर्देश के माध्यम से।

(हम अभी भी V8 लागू होने तक कुछ ही दूर या वर्ष दूर हो सकते हैं कि ES6 विनिर्देश के अनुसार।)

यह दस्तावेज़ वह है जिसकी हमें आवश्यकता है, और यह दस्तावेज़ वह है जिसका हमें पालन करना चाहिए।

और ES6 मानक ने कहा कि मॉड्यूल निर्भरताएं होनी चाहिए इससे पहले कि हम प्रोग्रामिंग भाषा सी में मॉड्यूल पढ़ें, जहां हमने (हेडर) किया था .h फाइलें ।

यह एक अच्छी और अच्छी तरह से जांच की गई संरचना है, और मुझे यकीन है कि ES6 मानक बनाने वाले विशेषज्ञों के दिमाग में था।

यह वही है जो कुछ विशेष मामलों में बंडल को अनुकूलित करने के लिए वेबपैक या अन्य पैकेज बंडलर्स को सक्षम करता है , और बंडल से कुछ निर्भरता को कम करता है जिनकी आवश्यकता नहीं है। लेकिन जिन मामलों में हमारी पूर्ण निर्भरता है, ऐसा कभी नहीं होगा।

यह कुछ समय की आवश्यकता होगी जब तक import/exportदेशी समर्थन लाइव हो जाता है, औरrequire नहीं हो कीवर्ड लंबे समय तक कहीं भी नहीं जाएगा।

क्या है require ?

यह node.jsमॉड्यूल लोड करने का तरीका है। ( https://github.com/nodejs/node )

नोड्स फ़ाइलों को पढ़ने के लिए सिस्टम-स्तरीय विधियों का उपयोग करता है। आप मूल रूप से उपयोग करते समय उस पर भरोसा करते हैं require। जावास्क्रिप्ट फ़ाइल / मॉड्यूल को लोड करने के लिए requireकुछ सिस्टम कॉल uv_fs_open( जैसे एंड सिस्टम, लिनक्स, मैक, विंडोज पर निर्भर करता है) में समाप्त हो जाएगा।

यह जाँचने के लिए कि यह सत्य है, Babel.js का उपयोग करने का प्रयास करें, और आप देखेंगे कि importखोजशब्द को रूपांतरित किया जाएगा require।

Comments

दरअसल, एक ऐसा क्षेत्र है जहां प्रदर्शन में सुधार किया जा सकता है - बंडल आकार। का उपयोग करते हुए importएक Webpack 2 / रोलअप निर्माण प्रक्रिया में संभावित द्वारा परिणामी फ़ाइल आकार, 'पेड़ मिलाते हुए' अप्रयुक्त मॉड्यूल / कोड है कि अन्यथा अंतिम बंडल में हवा हो सकता है कम कर सकते हैं। छोटे फ़ाइल का आकार = डाउनलोड करने के लिए तेज़ = क्लाइंट पर init / निष्पादित करने के लिए तेज़।

— ली बेन्सन

तर्क पृथ्वी ग्रह पर कोई वर्तमान ब्राउज़र नहीं था, जो import कीवर्ड को मूल रूप से अनुमति देता है । या इसका मतलब है कि आप एक जावास्क्रिप्ट फाइल से दूसरी जावास्क्रिप्ट फाइल आयात नहीं कर सकते। यही कारण है कि आप इन दोनों के प्रदर्शन लाभ की तुलना नहीं कर सकते हैं। लेकिन निश्चित रूप से, Webpack1 / 2 या Browserify जैसे उपकरण संपीड़न से निपट सकते हैं। वे गर्दन से गर्दन तक हैं: gist.github.com/substack/68f8d502be42d5cd4942

— prosti

आप 'पेड़ हिल' की अनदेखी कर रहे हैं। कहीं न कहीं आपके जिस्ट लिंक में पेड़ हिलाने की चर्चा है। ईएस 6 मॉड्यूल का उपयोग करना इसे सक्षम बनाता है, क्योंकि importऔर exportस्थिर घोषणाएं हैं जो एक विशिष्ट कोड पथ को आयात करते हैं, जबकि requireगतिशील हो सकते हैं और इस प्रकार उपयोग किए गए कोड में बंडल कर सकते हैं। प्रदर्शन लाभ अप्रत्यक्ष है - वेबपैक 2 और / या रोलअप संभावित रूप से छोटे बंडल आकार में परिणाम कर सकते हैं जो डाउनलोड करने के लिए तेज़ हैं, और इसलिए अंतिम उपयोगकर्ता (एक ब्राउज़र का) के लिए स्नैपर दिखाई देते हैं। यह केवल तभी काम करता है जब ईएस 6 मॉड्यूल में सभी कोड लिखे जाते हैं और इसलिए आयात का सांख्यिकीय विश्लेषण किया जा सकता है।

— ली बेन्सन

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

— प्रोस्टी

आपका उत्तर पूरी तरह से मान्य है, लेकिन मुझे लगता है कि हम दो अलग-अलग विशेषताओं की तुलना कर रहे हैं। सभी import/export को परिवर्तित कर दिया गया है require, दी गई है। लेकिन इस कदम से पहले जो होता है उसे "प्रदर्शन" बढ़ाने वाला माना जा सकता है। उदाहरण: यदि lodashईएस 6 और आप में लिखा गया है import { omit } from lodash, तो परम बंडल में केवल 'ओटिट' require('lodash')होगा , न कि अन्य उपयोगिताओं, जबकि एक साधारण सब कुछ आयात करेगा। इससे बंडल का आकार बढ़ जाएगा, डाउनलोड करने में अधिक समय लगेगा, और इसलिए प्रदर्शन में कमी आएगी। यह केवल एक ब्राउज़र संदर्भ में मान्य है, ज़ाहिर है।

— ली बेन्सन

Answer 5

ईएस 6 मॉड्यूल का उपयोग करना 'ट्री शेकिंग' के लिए उपयोगी हो सकता है; यानी वेबपैक 2, रोलअप (या अन्य बंडलर) को सक्षम करने के लिए कोड रास्तों की पहचान की जाती है जिनका उपयोग / आयात नहीं किया जाता है, और इसलिए इसे परिणामी बंडल में नहीं बनाते हैं। यह कोड की आवश्यकता को समाप्त करके इसके फ़ाइल आकार को महत्वपूर्ण रूप से कम कर सकता है, लेकिन कॉमनजस के साथ डिफ़ॉल्ट रूप से बंडल किया जाता है क्योंकि वेबपैक एट अल को यह जानने का कोई तरीका नहीं है कि क्या इसकी आवश्यकता है।

यह कोड पथ के स्थैतिक विश्लेषण का उपयोग करके किया जाता है।

उदाहरण के लिए, उपयोग करना:

import { somePart } 'of/a/package';

... बंडल को एक संकेत देता है जो package.anotherPartआवश्यक नहीं है (यदि यह आयात नहीं किया गया है, तो इसका उपयोग नहीं किया जा सकता है- ठीक है?), इसलिए यह बंडल को परेशान नहीं करेगा।

वेबपैक 2 के लिए इसे सक्षम करने के लिए, आपको यह सुनिश्चित करने की आवश्यकता है कि आपका ट्रांसपिलर कॉमनजस मॉड्यूल को बाहर नहीं कर रहा है। यदि आप es2015बैबिल के साथ प्लग-इन का उपयोग कर रहे हैं , तो आप इसे अपनी .babelrcपसंद से अक्षम कर सकते हैं :

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

यदि आप रुचि रखते हैं तो रोलअप और अन्य अलग तरीके से काम कर सकते हैं - डॉक्स देखें।

Comments

पेड़ को हिलाने के लिए भी बढ़िया है 2ality.com/2015/12/webpack-tree-shaking.html

— prosti

Answer 6

जब यह async या शायद आलसी लोडिंग की बात आती है, तो import ()यह अधिक शक्तिशाली है। देखें कि जब हमें एसिंक्रोनस तरीके से कंपोनेंट की आवश्यकता होती है, तब हम importइसे कुछ एसिंक्स तरीके से constवेरिएबल का उपयोग करते हैं await।

const module = await import('./module.js');

या यदि आप उपयोग करना चाहते हैं require()तो,

const converter = require('./converter');

बात import()वास्तव में प्रकृति में async है। जैसा कि ReactConf में नेहरु वेणुगोपाल ने उल्लेख किया है , आप इसका उपयोग क्लाइंट साइड आर्किटेक्चर के लिए गतिशील रूप से प्रतिक्रिया घटकों को लोड करने के लिए कर सकते हैं।

जब यह रूटिंग की बात आती है तो यह बेहतर होता है। यह एक विशेष बात है जो उपयोगकर्ता को एक विशिष्ट भाग को डाउनलोड करने के लिए नेटवर्क लॉग बनाता है जब उपयोगकर्ता विशिष्ट वेबसाइट से अपने विशिष्ट घटक से जुड़ता है। डैशबोर्ड के सभी घटकों को डाउनलोड न करने से पहले लॉगिन पृष्ठ को डैशबोर्ड पर डाउनलोड करें। क्योंकि वर्तमान यानी लॉगिन कंपोनेंट की क्या जरूरत है, वह केवल डाउनलोड किया जाएगा।

उसी के लिए जाता है export: ईएस 6 कॉमनज के समान exportहैं module.exports।

नोट - यदि आप एक नोड.जेएस परियोजना विकसित कर रहे हैं, तो आपको कड़ाई से उपयोग करना require()होगा क्योंकि नोड अपवाद त्रुटि को फेंक देगा जैसे invalid token 'import'कि आप उपयोग करेंगे import। इसलिए नोड आयात विवरणों का समर्थन नहीं करता है।

अद्यतन - जैसा कि दान डैस्कलेस्कु द्वारा सुझाया गया है : चूंकि v8.5.0 (जारी सिपाही 2017), node --experimental-modules index.mjsआपको बबेल के importबिना उपयोग करने देता है । पुराने तरीके के लिए पश्चगामी अनुकूलता के साथ, आप अपने ईपीएम पैकेज को मूल ESModule के रूप में भी प्रकाशित (और कर सकते हैं) कर सकते हैं require।

अधिक निकासी के लिए जहां async आयात का उपयोग करने के लिए इसे देखें - https://www.youtube.com/watch?v=bb6RCrDaxhw

Comments

तो क्या सिंक और प्रतीक्षा की आवश्यकता होगी?

— बकलज़ान

तथ्यात्मक रूप से कह सकते हैं!

— ज़वेरी

Answer 7

सबसे महत्वपूर्ण बात यह है कि ES6 मॉड्यूल वास्तव में एक आधिकारिक मानक हैं, जबकि CommonJS (Node.js) मॉड्यूल नहीं हैं।

2019 में, ES6 मॉड्यूल 84% ब्राउज़रों द्वारा समर्थित हैं। जबकि Node.js उन्हें एक --experimental-मॉड्यूल के पीछे रखता है झंडा, वहाँ भी एक सुविधाजनक नोड पैकेज कहा जाता है ईएसएम , जो एकीकरण चिकनी बनाता है।

एक अन्य समस्या है कि आप इन मॉड्यूल सिस्टम के बीच चलने की संभावना कोड स्थान है। Node.js मानता है कि स्रोत को एक node_modulesनिर्देशिका में रखा गया है , जबकि अधिकांश ES6 मॉड्यूल एक फ्लैट निर्देशिका संरचना में तैनात हैं। ये सामंजस्य करना आसान नहीं है, लेकिन यह आपकी package.jsonफ़ाइल को प्री और पोस्ट इंस्टॉलेशन स्क्रिप्ट के साथ हैक करके किया जा सकता है । यहां एक उदाहरण आइसोमॉर्फिक मॉड्यूल और एक लेख बताया गया है कि यह कैसे काम करता है।

Answer 8

मैं व्यक्तिगत रूप से आयात का उपयोग करता हूं क्योंकि, हम आवश्यक विधियों, सदस्यों को आयात का उपयोग करके आयात कर सकते हैं।

import {foo, bar} from "dep";

FileName: dep.js

export foo function(){};
export const bar = 22

इसका श्रेय पॉल शान को जाता है। अधिक जानकारी ।

Comments

बहुत बढ़िया पसंद! क्या आप अपने npm संकुल को पुराने requireतरीके के लिए पश्चगामी संगतता के साथ देशी ESModule के रूप में प्रकाशित कर रहे हैं ?

— डेन डैस्कलेस्क्यू

आप आवश्यकता के साथ भी ऐसा कर सकते हैं!

— सुइस

const {a,b} = require('module.js'); के रूप में अच्छी तरह से काम करता है ... अगर आप निर्यात करते हैं aऔरb

— 5

module.exports = { a: ()={}, b: 22 }- @BananaAcid के दूसरे भाग का जवाब

— सेठ मैकक्लीन

Answer 9

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

ES6 → import, export default, export

कॉमनजेएस → require, module.exports, exports.foo

नीचे उन का सामान्य उपयोग है।

ES6 निर्यात डिफ़ॉल्ट

// hello.js
function hello() {
  return 'hello'
}
export default hello

// app.js
import hello from './hello'
hello() // returns hello

---

ES6 कई निर्यात करते हैं और कई आयात करते हैं

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
export { hello1, hello2 }

// app.js
import { hello1, hello2 } from './hello'
hello1()  // returns hello1
hello2()  // returns hello2

---

CommonJS मॉड्यूल.exports

// hello.js
function hello() {
  return 'hello'
}
module.exports = hello

// app.js
const hello = require('./hello')
hello()   // returns hello

---

CommonJS मॉड्यूल.exports एकाधिक

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
module.exports = {
  hello1,
  hello2
}

// app.js
const hello = require('./hello')
hello.hello1()   // returns hello1
hello.hello2()   // returns hello2

Answer 10

सुनिश्चित नहीं हैं कि क्यों (शायद अनुकूलन - आलसी लोडिंग?) यह उसी तरह काम कर रहा है, लेकिन मैंने देखा है कि importकोड को पार्स नहीं किया जा सकता है यदि आयातित मॉड्यूल का उपयोग नहीं किया जाता है।
जो कुछ मामलों में अपेक्षित व्यवहार नहीं हो सकता है।

हमारे नमूना निर्भरता के रूप में नफरत फू कक्षा ले लो।

foo.ts

export default class Foo {}
console.log('Foo loaded');

उदाहरण के लिए:

index.ts

import Foo from './foo'
// prints nothing

index.ts

const Foo = require('./foo').default;
// prints "Foo loaded"

index.ts

(async () => {
    const FooPack = await import('./foo');
    // prints "Foo loaded"
})();

दूसरी ओर:

index.ts

import Foo from './foo'
typeof Foo; // any use case
// prints "Foo loaded"