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

Question 1

सशर्त

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

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 में बड़ी संख्या में आयात को संभालने का एक बेहतर तरीका है?

Question 2

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

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

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

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

Question 3

importsस्थैतिक विश्लेषण के लिए , आप गतिशील रूप से अपनी निर्भरता को हल नहीं कर सकते । हालाँकि, आप शायद requireयहाँ कुछ का उपयोग कर सकते हैं, जैसे कुछ:

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

Question 4

चूंकि यह प्रश्न Google द्वारा अत्यधिक रैंक किया गया है, इसलिए यह इंगित करने योग्य है कि पुराने उत्तर पोस्ट किए जाने के बाद से चीजें बदल गई हैं।

एमडीएन में डायनामिक आयात के तहत यह प्रविष्टि है :

आयात कीवर्ड को गतिशील रूप से मॉड्यूल आयात करने के लिए एक फ़ंक्शन के रूप में कहा जा सकता है। जब इस तरह से उपयोग किया जाता है, तो यह एक वादा वापस करता है।
import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

// This form also supports the await keyword.
let module = await import('/modules/my-module.js');

विषय पर एक उपयोगी लेख मध्यम पर पाया जा सकता है ।

Question 5

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

आपके लिए आवश्यक मॉड्यूल के लिए पूछना
मॉड्यूल को वापस करने के वादे की प्रतीक्षा कर रहा है

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

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

Question 6

2016 के बाद से जावास्क्रिप्ट दुनिया में बहुत कुछ बीत चुका है, इसलिए मेरा मानना है कि इस विषय पर सबसे अद्यतन जानकारी देने का समय है। वर्तमान में डायनेमिक आयात नोड और ब्राउज़र दोनों पर एक वास्तविकता है (मूल रूप से यदि आप IE के बारे में परवाह नहीं करते हैं, या @ बेबल / प्लगइन-सिंटैक्स-डायनेमिक-आयात के साथ यदि आप परवाह करते हैं)।

इसलिए, something.jsदो नामित निर्यात और एक डिफ़ॉल्ट निर्यात के साथ एक नमूना मॉड्यूल पर विचार करें :

export const hi = (name) => console.log(`Hi, ${name}!`)
export const bye = (name) => console.log(`Bye, ${name}!`)
export default () => console.log('Hello World!')

हम import()सिंटैक्स का उपयोग आसानी से और सफाई से सशर्त रूप से लोड करने के लिए कर सकते हैं:

if (somethingIsTrue) {
  import('./something.js').then((module) => {
    // Use the module the way you want, as:
    module.hi('Erick') // Named export
    module.bye('Erick') // Named export
    module.default() // Default export
  })
}

लेकिन जब से वापसी एक है Promise, async/ / awaitसिंथेटिक चीनी भी संभव है:

async imAsyncFunction () {
  if (somethingIsTrue) {
    const module = await import('./something.js')
    module.hi('Erick')
  }
}

अब ऑब्जेक्ट विनाशकारी असाइनमेंट के साथ संभावनाओं के बारे में सोचें ! उदाहरण के लिए, हम बाद में उपयोग के लिए स्मृति में निर्यात नाम के केवल एक को आसानी से रख सकते हैं:

const { bye } = await import('./something.js')
bye('Erick')

या शायद उन नामित निर्यातों में से एक को हड़प लें और इसका नाम बदलकर हम चाहते हैं कि कुछ भी हो:

const { hi: hello } = await import('./something.js')
hello('Erick')

या यहां तक कि डिफॉल्ट एक्सपोर्ट किए गए फंक्शन को कुछ इस तरह से नाम दें कि अधिक समझ में आए:

const { default: helloWorld } = await import('./something.js')
helloWorld()

बस एक अंतिम (लेकिन कम से कम) नोट: import() एक फ़ंक्शन कॉल की तरह लग सकता है, लेकिन यह नहीं है Function। यह एक विशेष वाक्यविन्यास है जो सिर्फ कोष्ठक का उपयोग करने के लिए होता है (जैसा होता है वैसा ही होता है super())। इसलिए importकिसी चर को निर्दिष्ट करना या Functionप्रोटोटाइप की चीजों का उपयोग करना संभव नहीं है , जैसे call/ apply।