हाल ही में , Node.js में ECMAScript मॉड्यूल के लिए समर्थन की घोषणा की गई थी, और ES2020 में गतिशील आयात के लिए समर्थन दिखाई दिया था। इस लेख के ढांचे में मैं गतिशील आयात का उपयोग करने के स्पष्ट मामले के कार्यान्वयन के बारे में बात करूंगा - अग्रिम में अज्ञात निर्देशिका नामों के साथ।

समस्याओं

अक्सर मैं परियोजनाओं में निम्नलिखित निर्देशिका संरचना का निरीक्षण करता हूं:

$ tree . ├── modules │ ├── a │ │ └── index.ts │ ├── b │ │ └── index.ts │ └── c │ └── bobule.ts ├── index.ts └── package.json 

और index.ts की सामग्री:

 import a from './modules/a'; import b from './modules/b'; import c from './modules/c/bobule.ts'; export default { module: a, dopule: b, bobule: c }; 

और फिर कहीं शीर्ष स्तर पर एक और index.ts है जो इस index.ts को आयात करता है जो आयात करता है ...

मैं शीर्ष-स्तरीय index.ts जैसा कुछ लिखना index.ts

 import modules from './modules/*/*' 

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

गतिशील आयात

स्थैतिक पर गतिशील आयात करने का मुख्य लाभ कार्यात्मक रूप है, जो स्थिति से लोडिंग मॉड्यूल की अनुमति देता है। यह इस तरह से काम करता है:

 // module.ts export const a = 'i love hexlet' const b = { referral: 'hexlet.io/?ref=162475' } export default b // index.ts const module = await import('./module.ts') module.default // { referral: 'hexlet.io/?ref=162475' } module.a // 'i love hexlet' 

तदनुसार, इस डिजाइन में थोड़ी सी fs जोड़कर, गतिशील आयात आपको किसी भी स्तर से उपनिर्देशिकाओं की सभी फाइलों को प्राप्त करने की अनुमति देगा।

PHP ने प्रेरित किया

ऑटोलैड का विचार नया नहीं है और इसका उपयोग PHP में सक्रिय रूप से किया जाता है, हालांकि वास्तु और ऐतिहासिक कारणों से, लेकिन कुछ भी मुझे अपनी कठिनाइयों को बनाने और उन्हें वीरता से पार करने से रोकता है। इसलिए, मैंने package.json में एक ऑटोलॉड अनुभाग बनाने और एक उपकरण बनाने की कोशिश की, जो कुंजी द्वारा मॉड्यूल नाम पढ़ता है, और मान से फ़ाइल पथ:

 //  package.json { "autoload": { "modules": ["modules", "*", "index.ts"] "bobules": ["*", "*", "bobule.ts"], } } 

टंकण का उपयोग करने के मामले में, इस तथ्य से एक कष्टप्रद क्षण होता है कि आवेदन के बनने के बाद एक्सटेंशन बदल जाते हैं और उनमें से दो से अधिक होते हैं: ts|js|mjs|tsx ताकि आप तुरंत सभी उपलब्ध विकल्पों को सूचीबद्ध करने के लिए इसे ले सकें, और केवल उन्हीं को डाउनलोड करें जिनकी आपको आवश्यकता है:

 //  package.json { "autoload": { "modules": ["modules", "*", "index.ts|js"] "bobules": ["*", "*", "bobule.ts|js"], } } 

कार्यान्वयन

निम्नलिखित मामले प्राप्त होते हैं:

1. f(projectRoot, ['modules', '*', 'index.js|ts'], moduleName = 'default') // उपयोगकर्ता द्वारा निर्दिष्ट पथ पर मॉड्यूल लोड करें
2. f(projectRoot) // package.json से लोडिंग मॉड्यूल, इस मामले में मॉड्यूल नाम f(projectRoot) सेक्शन में कीज़) तीसरे तर्क द्वारा पहले से ही "हूड के तहत" पास किए जाते हैं।

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

 //   package.json /   const modulesRawPathsParts = await getModulesRawPaths( projectRoot, modulePath, moduleGroupName ); //         const modulesFilesPathsParts = entries(modulesRawPathsParts).reduce( (acc, [moduleName, moduleRawPath]) => { const rawFilename = moduleRawPath.pop(); const processedFilenames = processFileExtensions(rawFilename); const pathsWithFilenames = processedFilenames.map( filename => moduleRawPath.concat(filename) ); return { ...acc, [moduleName]: pathsWithFilenames }; }, {} ); //       const modulesFilesPaths = await Promise.all( entries(modulesFilesPathsParts).map(([moduleName, modulePathParts]) => Promise.all( modulePathParts.map(modulePathPart => buildPaths(projectRoot, modulePathPart)) ) .then(paths => paths.flat().filter(processedPath => processedPath)) .then(existingPaths => ({ [moduleName]: existingPaths })), ), ); const processedModulesFilesPaths = arrayToObject(modulesFilesPaths); //    ,       const availableModules = entries(processedModulesFilesPaths).reduce( (acc, [moduleName, modulePaths]) => (modulePaths.length === 0 ? acc : { ...acc, [moduleName]: modulePaths }), {}, ); //   return Promise.all( entries(availableModules).map(([moduleName, modulePaths]) => Promise.all(modulePaths.map(moduleLoadPath => //     : import(moduleLoadPath) )).then(loadedModule => ({ [moduleName]: loadedModule, })), ), ).then(arrayToObject); 

यह सब क्यों है?

यह मुझे प्रतीत हुआ कि गतिशील आयात का मुद्दा बहुत खराब तरीके से कवर किया गया था और एनपीएम में ऐसी सभी लाइब्रेरी थोड़ी अद्यतन नहीं हैं (या मैं बुरी तरह से देख रहा था?), और तकनीक आपको पंजीकरण और एसएमएस के बिना अच्छा करने की अनुमति देती है। मुझे उम्मीद है कि परियोजना का स्रोत कोड और इसके उपयोग के मामले आपको अपनी परियोजनाओं में उपयोग के लिए दिलचस्पी लेंगे, एक नया पेंच करके कोड के दोहराव को कम करना बैसाखी, साइकिल, ढांचा निस्संदेह एक उपयोगी सहायक है।

लिंक, सबूत, अनुवाद:

• ECMAScript मॉड्यूल
  
  • मूल: https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663
  • अनुवाद: https://habr.com/en/post/477168/
• गतिशील आयात:
  
  • मूल: https://v8.dev/features/dynamic-import
  • मुफ्त अनुवाद: https://habr.com/en/post/455200/

इस निर्दोष कोड का स्रोत कोड यहाँ है:
https://github.com/Melodyn/npm-dynamicimport/blob/master/lib/index.js#L93-L120
यहां अमूल्य उपयोगकर्ता अनुभव प्राप्त करें:
https://www.npmjs.com/package/@melodyn/dynamicimport
बिल्ली यहाँ है:
(^ ≗ω≗ ^)