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}`;
    }
}

উপরেরগুলি বাবেল থেকে সংকলন করার সময় একই ত্রুটি পেয়েছে।

এটি করা কি সম্ভব বা আমি এখানে কিছু মিস করছি?

যুক্তিযুক্ত

যে কারণে আমি এটি করার চেষ্টা করছি তা হ'ল আমার কাছে প্রচুর "পৃষ্ঠাগুলি" এর জন্য প্রচুর পরিমাণে আমদানি রয়েছে এবং তারা অনুরূপ প্যাটার্নটি অনুসরণ করে। আমি লুপের জন্য ডায়নামিক দিয়ে এই ফাইলগুলি আমদানি করে আমার কোড বেসটি পরিষ্কার করতে চাই।

যদি এটি সম্ভব না হয় তবে ES6 এ বিপুল সংখ্যক আমদানি পরিচালনা করার কি আরও ভাল উপায় হতে পারে?

Question 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

গুগল যেহেতু এই প্রশ্নটি সর্বোচ্চ অবস্থানে রয়েছে তাই এটি উল্লেখ করা উচিত যে পুরানো উত্তরগুলি পোস্ট হওয়ার পরে থেকে জিনিসগুলি পরিবর্তিত হয়েছে।

গতিশীল আমদানির আওতায় এমডিএন এর এন্ট্রি রয়েছে :

আমদানি কীওয়ার্ডটিকে গতিশীলভাবে একটি মডিউল আমদানি করার জন্য একটি ফাংশন হিসাবে ডাকা যেতে পারে। এইভাবে ব্যবহার করা হলে এটি প্রতিশ্রুতি দেয়।
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

২০১ 2016 সাল থেকে জাভাস্ক্রিপ্ট বিশ্বে প্রচুর উত্তীর্ণ হয়েছে, তাই আমি বিশ্বাস করি যে এই বিষয়টিতে সর্বাধিক আপডেট হওয়া তথ্য দেওয়ার সময় এসেছে। বর্তমানে ডায়নামিক আমদানির একটি বাস্তবতা আছে উভয় নোড উপর এবং ব্রাউজারে (স্থানীয়ভাবে যদি আপনি কি দেখেন না আইই সম্পর্কে, অথবা সঙ্গে Babel / প্লাগইন-সিনট্যাক্স-গতিশীল আমদানি @ যদি যত্ন না)।

সুতরাং, 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।

Question 6

প্রয়োজনীয়তা আপনার সমস্যার সমাধান করবে না কারণ এটি একটি সিঙ্ক্রোনাস কল। বেশ কয়েকটি বিকল্প রয়েছে এবং সেগুলি সমস্ত জড়িত

আপনার প্রয়োজনীয় মডিউলটির জন্য জিজ্ঞাসা করা হচ্ছে
মডিউলটি ফেরত দেওয়ার প্রতিশ্রুতির জন্য অপেক্ষা করছি

ইসিএমএ স্ক্রিপ্টে সিস্টেমজেএস ব্যবহার করে অলস লোডিং মডিউলগুলির জন্য সমর্থন রয়েছে। এটি অবশ্যই সমস্ত ব্রাউজারগুলিতে সমর্থিত নয়, তাই এর মধ্যে আপনি জেএসপিএম বা একটি সিস্টেমজেএস শিম ব্যবহার করতে পারেন।

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