Recientemente , el soporte para los módulos ECMAScript se anunció en Node.js, y el soporte para las importaciones dinámicas apareció en el ES2020. En el marco de este artículo, hablaré sobre la implementación del caso obvio de usar importaciones dinámicas, con nombres de directorio desconocidos de antemano.

Problema

A menudo observo aproximadamente la siguiente estructura de directorios en los proyectos:

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

y el contenido de 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 }; 

Y luego, en algún lugar del nivel superior, hay otro index.ts que importa este index.ts que importa ...

Me gustaría escribir algo como index.ts nivel index.ts

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

pero fuera de la caja, esto no es compatible, lo que despertó en mí un deseo incontenible de atornillar mi muleta, bicicleta, marco Sin duda una solución útil, original y muy necesaria para este problema.

Importaciones dinámicas

La principal ventaja de importar dinámico sobre estático es la forma funcional, que permite cargar módulos por condición. Funciona de esta manera:

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

En consecuencia, al agregar un poco de fs a este diseño, las importaciones dinámicas le permitirán obtener todos los archivos de subdirectorios de cualquier nivel.

PHP inspirado

La idea de la carga automática no es nueva y se usa activamente en PHP, sin embargo, por razones arquitectónicas e históricas, pero nada me impide crear mis propias dificultades y superarlas heroicamente. Por lo tanto, intenté hacer una sección de carga automática en package.json y crear una herramienta que lea el nombre del módulo por clave y la ruta del archivo desde el valor:

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

En el caso de usar typescipt, hay un momento molesto con el hecho de que las extensiones cambian después de que se construye la aplicación y hay más de dos: ts|js|mjs|tsx para que pueda tener esto en cuenta de inmediato al enumerar todas las opciones disponibles y descargar solo las que necesita:

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

Implementación

Se obtienen los siguientes casos:

1. f(projectRoot, ['modules', '*', 'index.js|ts'], moduleName = 'default') // carga los módulos en la ruta especificada por el usuario
2. f(projectRoot) // cargando módulos desde package.json, los nombres de módulos (claves en la sección de carga automática) en este caso se pasan por el tercer argumento que ya está "bajo el capó".

Construir rutas es una tarea trivial, simplemente revisamos la matriz y seleccionamos todos los subdirectorios para las estrellas, cuando la matriz termina, la devuelve y carga los módulos en la matriz. Como resultado, durante un par de noches, esbocé esta solución para mí de esta manera:

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

¿Por qué es todo esto?

Me pareció que el problema de las importaciones dinámicas estaba injustamente muy mal cubierto y que todas estas bibliotecas en npm no están ligeramente actualizadas (¿o estaba buscando mal?), Y la tecnología le permite hacerlo bien sin registro y SMS. Espero que el código fuente del proyecto y mis casos de uso le interesen para usar en sus proyectos, reduciendo ligeramente la duplicación de código al atornillar uno nuevo muleta, bicicleta, marco Sin duda un útil ayudante.

Enlaces, pruebas, traducciones:

• Módulos ECMAScript
  
  • original: https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663
  • traducción: https://habr.com/en/post/477168/
• Importaciones dinámicas:
  
  • original: https://v8.dev/features/dynamic-import
  • traducción gratuita: https://habr.com/en/post/455200/

El código fuente de este código perfecto está aquí:
https://github.com/Melodyn/npm-dynamicimport/blob/master/lib/index.js#L93-L120
Obtenga una experiencia de usuario invaluable aquí:
https://www.npmjs.com/package/@melodyn/dynamicimport
El gato está aquí:
(^ ≗ω≗ ^)