बेबेल और वेबपैक

Question

के साथ पारदर्शी कोड हेल्पर्स को कम करें मेरी प्रोजेक्ट में, मैं babel का उपयोग ES5 पर ट्रांसफ़ाइल करने के लिए कर रहा हूं। मैं सब कुछ एक साथ बंडल करने के लिए webpack का उपयोग कर रहा हूं। ऐसी कई जगहें हैं जहां किसी भी फ़ाइल का समर्थन करने के लिए किसी भी फ़ाइल के शीर्ष पर बैबेल एक फ़ंक्शन जोड़ता है (जैसे बाकी पैराम here या import कथन here)।

उदाहरण के लिए, काफी हर फ़ाइल शीर्ष पर इस है:

var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; 

और कई फ़ाइलें इस है:

var _toConsumableArray = function (arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }; 

मेरी smaller project में यह एक बहुत बड़ा सौदा नहीं है, लेकिन में काम पर मेरी परियोजना, मैं वही काम कर रहा हूं और मुझे यकीन है कि मैं इन सभी पॉलीफिलों को एक ही स्थान पर रखने के लिए एक रास्ता तय करके कुछ बाइट्स से अधिक दाढ़ी दे सकता हूं और उनको लेबल/वेबपैक संदर्भित कर सकता हूं। import (जो लगभग हर फ़ाइल है) का उपयोग कर रहे प्रत्येक फ़ाइल में होने के बजाय, इसे एक ही स्थान पर रखें और संदर्भित किया जाए।

क्या ऐसा करने का कोई तरीका है?

Answer 1

'कोलाहल वैकल्पिक = क्रम?' मुझे यकीन नहीं है कि लाइब्रेरी या छोटी परियोजना के बारे में क्या करना है। मैं सोच रहा हूं कि बाहरी मददगारों का उपयोग करने से आपको वास्तव में कोई फायदा नहीं होगा। हालांकि, मेरे आवेदन के लिए, मैंने पाया कि gzipping के बाद, यह वास्तव में छोटे है अगर मैं मददगार शामिल हैं।

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

(जोर जोड़ा)

तो यह है कि मेरे समाधान है और मैं उस के साथ खुश हूँ। (मूल रूप से, इसके बारे में चिंता मत करो)।

Answer 2

मैं कुछ समय पहले ही प्रश्न था, और वहाँ दस्तावेज में स्पष्ट जवाब है:

https://babeljs.io/docs/usage/runtime/

webpack config में आप बस के रूप में यह कर सकते हैं

Answer 3

उपयोग Babel Runtime,

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

कोलाहल-प्लगइन-परिणत-क्रम और कोलाहल-क्रम स्थापित करके प्रारंभ:

$ npm install --save-dev babel-plugin-transform-runtime 
$ npm install --save babel-runtime