Kürzlich wurde in Node.js die Unterstützung für ECMAScript-Module angekündigt , und in ES2020 wurde die Unterstützung für dynamische Importe eingeführt. In diesem Artikel werde ich über die Implementierung des offensichtlichen Falls der Verwendung dynamischer Importe sprechen - mit unbekannten Verzeichnisnamen im Voraus.

Ausgabe

Oft beobachte ich in Projekten ungefähr folgende Verzeichnisstruktur:

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

und den Inhalt von 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 }; 

Und dann irgendwo auf der obersten Ebene gibt es einen anderen index.ts, der diesen index.ts importiert, der importiert ...

Ich würde gerne so etwas wie top-level index.ts

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

aber aus der Box heraus wird dies nicht unterstützt, was in mir einen unbändigen Wunsch weckte, meine zu verarschen Krücke, Fahrrad, Rahmen Zweifellos eine nützliche, originelle und sehr notwendige Lösung für dieses Problem.

Dynamische Importe

Der Hauptvorteil des Importierens von Dynamik gegenüber Statik ist die funktionale Form, die das Laden von Modulen nach Bedingung ermöglicht. Es funktioniert so:

 // 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 diesem Design ein wenig fs hinzufügen, können Sie mit dynamischen Importen alle Dateien aus Unterverzeichnissen auf jeder Ebene abrufen.

PHP inspiriert

Die Idee des Autoloads ist nicht neu und wird in PHP aus architektonischen und historischen Gründen aktiv verwendet, aber nichts hindert mich daran, meine eigenen Schwierigkeiten zu schaffen und sie heldenhaft zu überwinden. Daher habe ich versucht, einen Autoload-Abschnitt in package.json zu erstellen und ein Tool zu erstellen, das den Modulnamen anhand des Schlüssels und den Dateipfad anhand des folgenden Werts liest:

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

Bei der Verwendung von typescipt ist es ärgerlich, dass sich die Erweiterungen nach dem Erstellen der Anwendung ändern und es mehr als zwei davon gibt: ts|js|mjs|tsx Sie können dies also sofort berücksichtigen, indem Sie alle verfügbaren Optionen auflisten und nur die benötigten herunterladen:

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

Implementierung

Die folgenden Fälle werden erhalten:

1. f(projectRoot, ['modules', '*', 'index.js|ts'], moduleName = 'default') // f(projectRoot, ['modules', '*', 'index.js|ts'], moduleName = 'default') die Module auf den vom Benutzer angegebenen Pfad
2. f(projectRoot) // Laden von Modulen aus package.json, Modulnamen (Schlüssel im Autoload-Bereich) werden in diesem Fall vom dritten Argument bereits "under the hood" übergeben.

Das Erstellen von Pfaden ist eine triviale Aufgabe. Wir gehen einfach das Array durch und wählen alle Unterverzeichnisse für die Sterne aus. Wenn das Array endet, geben Sie es zurück und laden die Module in das Array. Infolgedessen habe ich einige Abende lang diese Lösung für mich entworfen:

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

Warum ist das alles?

Es schien mir, dass das Thema dynamischer Importe zu Unrecht sehr schlecht behandelt wurde und alle diese Bibliotheken in npm nicht leicht aktualisiert wurden (oder sah ich schlecht aus?). Und die Technologie ermöglicht es Ihnen, ohne Registrierung und SMS auszukommen. Ich hoffe, dass der Quellcode des Projekts und meine Verwendungsfälle Sie für die Verwendung in Ihren Projekten interessieren und die Codevervielfältigung durch Verschrauben leicht reduzieren Krücke, Fahrrad, Rahmen zweifellos ein nützlicher Helfer.

Links, Beweise, Übersetzungen:

• ECMAScript-Module
  
  • original: https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663
  • Übersetzung: https://habr.com/de/post/477168/
• Dynamische Importe:
  
  • original: https://v8.dev/features/dynamic-import
  • kostenlose Übersetzung: https://habr.com/de/post/455200/

Der Quellcode für diesen fehlerlosen Code ist hier:
https://github.com/Melodyn/npm-dynamicimport/blob/master/lib/index.js#L93-L120
Erhalten Sie hier eine unschätzbare Benutzererfahrung:
https://www.npmjs.com/package/@melodyn/dynamicimport
Die Katze ist hier:
(^ ≗ω≗ ^)