ES6: सशर्त और गतिशील आयात विवरण

Question

सशर्त

क्या नीचे सशर्त आयात विवरण होना संभव है?

if (foo === bar) { 
    import Baz from './Baz'; 
} 

मैंने ऊपर की कोशिश की है लेकिन संकलन करते समय निम्न त्रुटि (बेबेल से) प्राप्त करें।

'import' and 'export' may only appear at the top level 

गतिशील

यह नीचे की तरह गतिशील आयात बयान करना संभव है?

for (let foo in bar) { 
    if (bar.hasOwnProperty(foo)) { 
     import Baz from `./${foo}`; 
    } 
} 

ऊपर दिए गए बाबेल से संकलन के दौरान एक ही त्रुटि प्राप्त होती है।

क्या यह संभव है या क्या मुझे कुछ याद आ रही है?

तर्क

कारण मैं यह करने के कोशिश कर रहा हूँ कि मैं "पृष्ठ" के एक नंबर के लिए आयात का एक बहुत कुछ है और वे एक समान पैटर्न का पालन है। मैं लूप के लिए गतिशील के साथ इन फ़ाइलों को आयात करके अपना कोड बेस साफ़ करना चाहता हूं।

यदि यह संभव नहीं है तो क्या ईएस 6 में बड़ी संख्या में आयात को संभालने का एक बेहतर तरीका है?

Answer 1

आप गतिशील रूप से अपनी निर्भरताओं को हल नहीं कर सकते हैं, क्योंकि imports स्थिर विश्लेषण के लिए हैं।

for (let foo in bar) { 
    if (bar.hasOwnProperty(foo)) { 
     const Baz = require(foo).Baz; 
    } 
} 

Answer 2

आवश्यकता होती है आपकी समस्या का समाधान नहीं होगा, क्योंकि यह एक तुल्यकालिक कॉल है: लेकिन, आप शायद कुछ require यहाँ की तरह कुछ का उपयोग कर सकते। वहाँ कई विकल्प हैं और वे सभी

1. मॉड्यूल के लिए पूछ आप
2. जरूरत है एक वादा के लिए प्रतीक्षा कर मॉड्यूल

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

https://github.com/ModuleLoader/es6-module-loader

Answer 3

हम ECMA साथ अब गतिशील आयात प्रस्ताव है। यह चरण 2 में है। यह babel-preset के रूप में भी उपलब्ध है।

आपके मामले के अनुसार सशर्त प्रतिपादन करने का तरीका निम्नलिखित है।

if (foo === bar) { 
    import('./Baz') 
    .then((Baz) => { 
     console.log(Baz.Baz); 
    }); 
} 

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