🙋 🙏🏽 🤹🏻 Espacios de nombres en JavaScript 🤰🏼 🚚 🔏

Estoy muy impresionado con los espacios de nombres en lenguajes de programación como Java y PHP. Tanto es así que incluso de alguna manera escribí un artículo sobre ellos en Habré. Han pasado casi dos años desde entonces, pero los espacios de nombres no han aparecido en JavaScript durante este tiempo. " Y si hiciera espacios de nombres en JS para mí, ¿cuáles serían? " - pensé. Debajo del corte: mis pensamientos, qué espacios de nombres necesito en JavaScript.

Introductorio

Todo mi razonamiento a continuación se aplica a los módulos ES6 y no toca otros formatos (AMD, UMD, CommonJS) simplemente porque estoy interesado en ver hacia dónde va JavaScript, no hacia dónde estaba . Además, en mi práctica, de alguna manera me encontré con GWT bastante de cerca, después de lo cual desarrollé un rechazo persistente de varios transpiladores (así como, a un montón, minificadores y ofuscadores). Por lo tanto vainilla JS y no TS. Bueno, tengo esos artículos.

Módulos ES6

Un módulo ES es un archivo fuente independiente que define explícitamente los elementos disponibles fuera del módulo:

export function fn() {/*...*/}

Por lo tanto, para empezar, debe abordar de alguna manera módulos ES individuales dentro de toda la aplicación.

Paquetes

, . . (vendor) , . (, ./src).

node_modules. , nodejs-, , :

* node_modules
    * @vendor
        * package1
            * src
                * module1.js
                * ...
                * moduleN.js
        * ...
        * packageN
            * src
                * module1.mjs
                * ...
                * moduleN.mjs

ES- :

./node_modules/@vendor/package1/src/module1.js
...
./node_modules/@vendor/packageN/src/moduleN.mjs

nodejs- ./node_modules/ :

import SomeThing from '@vendor/package1/src/module1.js';

, , :

import SomeThing from './module1.js';

web- , web- node_modules, web- ES-, , nodejs:

<script type="module">
    import {fn} from './@vendor/package1/src/module1.js'
    fn();
</script>

<script>
    import('./@vendor/package1/src/module1.js').then((mod) => {
        mod.fn();
    });
</script>

, web' ./ . :

import {fn} from '@vendor/package1/src/module1.js'

Uncaught TypeError: Failed to resolve module specifier "@vendor/package1/src/module1.js". Relative references must start with either "/", "./", or "../".

, ES-:

( ): ./module1.js
(nodejs): @vendor/package1/src/module1.js
(web): ./@vendor/package1/src/module1.js

./ nodejs-, ./ .

, JS- , , ( - ) , ( ).

" " ( , namespace'), ES- ( ), ES- , , nodejs, .

, ./, , ( , ):

@vendor/package1/src/module1

- : ./src/, ./lib/, ./dist/. - , , :

@vendor/package1/module1

, , .

Namespace mapping

, , . - web-, node_modules web- ( - ./packages/):

const node = {
    '@vendor/package1': {path: '/.../node_modules/@vendor/package1/src', ext: 'js'},
    '@vendor/packageN': {path: '/.../node_modules/@vendor/packageN/src', ext: 'mjs'},
};
const browser = {
    '@vendor/package1': {path: 'https://.../packages/@vendor/package1/src', ext: 'js'},
    '@vendor/packageN': {path: 'https://.../packages/@vendor/packageN/src', ext: 'mjs'},
};

Module loader

, '' ( @vendor/package1/module1) ( - ) (node ):

@vendor/package1/module1 => /.../node_modules/@vendor/package1/src/module1.js       // node
@vendor/packageN/moduleN => https://.../packages/@vendor/packageN/src/moduleN.mjs   // browser

y utilícelo para importar módulos dinámicamente. Por supuesto, no es necesario mapear todos los módulos del paquete, solo necesita mapear la raíz del paquete. La salida es algo como esto:

const loader = new ModuleLoader();
loader.addNamespace('@vendor/package1', {path: '/.../node_modules/@vendor/package1/src', ext: 'js'});
// ...
loader.addNamespace('@vendor/packageN', {path: '/.../node_modules/@vendor/packageN/src', ext: 'js'});
const module1 = await loader.import('@vendor/package1/module1');

La importación de módulos debe ser asincrónica, ya que se utilizará una función asincrónica en el interior import().

Resumen

De una manera tan elegante, sería posible cambiar del direccionamiento físico de los módulos ES durante la importación a su direccionamiento lógico (espacios de nombres) y usar los mismos módulos tanto para las aplicaciones nodejs como en el navegador. Aquí no se ha inventado nada nuevo ( ya se ha hecho algo similar en PHP, de donde se roba esta idea).

Espacios de nombres en JavaScript