2016-10-07 19 views
9

त्वरित प्रश्न। मैं ES2015 (ES6) के बारे में थोड़ा उलझन में हूँ।बेबेल और ब्राउज़र/वेबपैक भ्रम

मान लें कि मैं बेबेल का उपयोग वर्तमान ब्राउज़र के लिए ES5 जावास्क्रिप्ट को अनुपालन करने के लिए ES6 जावास्क्रिप्ट को संकलित करने के लिए करता हूं।

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

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

मैं यहां पूरी तरह गलत हो सकता हूं और शायद 2016 के जावास्क्रिप्ट जंगल में खो गया हो, इसलिए मुझे उम्मीद है कि कोई मेरे लिए यह स्पष्ट कर सकता है।

संपादित

मैं सही ग्रहण करने के लिए कर रहा हूँ कि देशी ES6 आयात/निर्यात कार्यक्षमता बस नहीं है बंडल फ़ाइलें? जो मैंने अभी तक पढ़ा है, उससे मुझे लगता है कि आपको अभी भी सभी अलग जावास्क्रिप्ट फाइलों को शामिल करने की आवश्यकता है, लेकिन आप मूल आयात कार्यक्षमता का उपयोग करके प्रत्येक-दूसरे नामस्थान में मॉड्यूल आयात करते हैं?

+1

यह सेब और संतरे है: बेबेल ट्रांसमिशन करता है। वेबपैक * ड्राइव * उस ट्रांसमिशन को ड्राइव कर सकता है, लेकिन यह ... के लिए पैकिंग है, ठीक है। इसके कारण नाम। –

उत्तर

1

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

आयात/निर्यात कार्यों

नहीं काम करता है, घोषणाओं।

अगर मैं बस सिर्फ मेरी मॉड्यूल बंडल करने के लिए इन का उपयोग करने के लिए गए थे, जब ES6 मेरे लिए यह कर सकता है?

मुझे आश्चर्य है कि ES6 वाक्यविन्यास का उपयोग कर फ़ाइलों को बंडल करना भी संभव है।

क्या मुझे लगता है कि मूल ES6 आयात/निर्यात कार्यक्षमता बस फ़ाइलों को बंडल नहीं करती है?

हां। ईएस 6 मॉड्यूल को बंडल करने का कोई मूल तरीका नहीं है। आप नोड मॉड्यूल जैसे कुछ के लिए ES6 मॉड्यूल सिंटैक्स को ट्रांसफ़ाइल कर सकते हैं और उनको बंडल कर सकते हैं।

जो मैंने अभी तक पढ़ा है, मुझे लगता है कि आपको अभी भी सभी अलग जावास्क्रिप्ट फ़ाइलों को शामिल करने की आवश्यकता है, लेकिन आप मूल आयात कार्यक्षमता का उपयोग करके प्रत्येक-दूसरे नामस्थान में मॉड्यूल आयात करते हैं?

यह महसूस करना महत्वपूर्ण है कि वाक्यविन्यास मानकीकृत होने पर, बहुत से व्यवहार नहीं हैं। विकास के तहत एक लोडर स्पेक है यह निर्दिष्ट करने के लिए कि मॉड्यूल वास्तव में कैसे स्थित होंगे और लोड हो जाएंगे।

https://stackoverflow.com/a/33044085/1034448 भी देखें।

5

हां, ईएस 5 में आपके ईएस 6 आयात को पार करने के लिए बेबेल का उपयोग करना काम करेगा।

हालांकि, वेबपैक का उपयोग करने का एक फायदा यह है कि आपके उत्पादन वातावरण में एक स्थिर फ़ाइल की सेवा की जाती है।

+0

तो मूल ES6 आयात निर्यात कार्यक्षमता कैसे काम करती है? मेरी समझ के लिए यह एक बंडलर जैसा कुछ करता है जहां यह एक जावास्क्रिप्ट फ़ाइल में मॉड्यूल आयात करता है जिससे मुझे निर्यात किए गए मानों तक पहुंच मिलती है। दूसरे उत्तर को हटाए जाने के साथ अब मैं पूरी तरह उलझन में हूं। –

+1

कई वेबपैक बिल्ड * * एक स्थिर फ़ाइल "से अधिक उत्पन्न करते हैं * – naomik

संबंधित मुद्दे