Baru-baru ini , dukungan untuk modul ECMAScript diumumkan di Node.js, dan dukungan untuk impor dinamis muncul di ES2020. Dalam kerangka artikel ini saya akan berbicara tentang implementasi kasus nyata menggunakan impor dinamis - dengan nama direktori yang tidak diketahui sebelumnya.

Masalah

Seringkali saya mengamati sekitar struktur direktori berikut dalam proyek:

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

dan isi dari 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 }; 

Dan kemudian di suatu tempat di tingkat atas ada index.ts lain yang mengimpor index.ts ini yang mengimpor ...

Saya ingin menulis sesuatu seperti index.ts tingkat index.ts

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

tetapi di luar kotak, ini tidak didukung, yang membangkitkan dalam diri saya keinginan tak tertahankan untuk mengacaukan saya kruk, sepeda, rangka Tidak diragukan lagi solusi yang berguna, asli dan sangat diperlukan untuk masalah ini.

Impor dinamis

Keuntungan utama mengimpor dinamis daripada statis adalah bentuk fungsional, yang memungkinkan memuat modul berdasarkan kondisi. Cara kerjanya seperti ini:

 // 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' 

Dengan demikian, menambahkan sedikit fs ke desain ini, impor dinamis akan memungkinkan Anda untuk mendapatkan semua file dari subdirektori dari tingkat mana pun.

Terinspirasi PHP

Gagasan autoload bukanlah hal baru dan aktif digunakan dalam PHP, karena alasan arsitektur dan historis, tetapi tidak ada yang menghalangi saya untuk membuat kesulitan saya sendiri dan mengatasinya dengan heroik. Oleh karena itu, saya mencoba membuat bagian autoload di package.json dan membuat alat yang membaca nama modul dengan kunci, dan path file dari nilai:

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

Dalam hal menggunakan typescipt, ada momen yang mengganggu dengan fakta bahwa ekstensi berubah setelah aplikasi dibangun dan ada lebih dari dua di antaranya: ts|js|mjs|tsx sehingga Anda dapat segera mempertimbangkannya dengan mendaftar semua opsi yang tersedia, dan unduh hanya yang Anda perlukan:

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

Implementasi

Kasus-kasus berikut diperoleh:

1. f(projectRoot, ['modules', '*', 'index.js|ts'], moduleName = 'default') // muat modul di jalur yang ditentukan oleh pengguna
2. f(projectRoot) // memuat modul dari package.json, nama modul (kunci di bagian autoload) dalam hal ini diteruskan oleh argumen ketiga yang sudah "di bawah tenda".

Membangun jalur adalah tugas yang sepele, kita hanya pergi melalui array dan memilih semua subdirektori untuk bintang-bintang ketika array berakhir, mengembalikannya dan memuat modul ke dalam array. Akibatnya, untuk beberapa malam, saya membuat sketsa untuk diri saya sendiri solusi ini dengan cara ini:

 //   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); 

Kenapa ini semua?

Tampak bagi saya bahwa masalah impor dinamis tidak tercakup dengan sangat buruk dan semua perpustakaan seperti itu di npm tidak sedikit diperbarui (atau apakah saya terlihat buruk?), Dan teknologi ini memungkinkan Anda melakukannya dengan baik tanpa registrasi dan SMS. Saya harap kode sumber proyek dan kasus penggunaannya akan menarik minat Anda untuk digunakan dalam proyek Anda, sedikit mengurangi duplikasi kode dengan mengacaukan yang baru kruk, sepeda, rangka niscaya pembantu yang berguna.

Tautan, bukti, terjemahan:

• Modul ECMAScript
  
  • asli: https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663
  • terjemahan: https://habr.com/en/post/477168/
• Impor Dinamis:
  
  • asli: https://v8.dev/features/dynamic-import
  • terjemahan gratis: https://habr.com/en/post/455200/

Kode sumber untuk kode tanpa cacat ini ada di sini:
https://github.com/Melodyn/npm-dynamicimport/blob/master/lib/index.js#L93-L120
Dapatkan pengalaman pengguna yang tak ternilai di sini:
https://www.npmjs.com/package/@melodyn/dynamicimport
Kucing ada di sini:
(^ ≗ω≗ ^)