Módulos JavaScript

Esta guía te brinda todo lo que necesitas para comenzar con la sintaxis de los módulos JavaScript.

Un antecedente sobre módulos

Los programas JavaScript comenzaron siendo bastante pequeños — la mayor parte de su uso en los primeros días era para realizar tareas de scripting aisladas, proporcionando un poco de interactividad a tus páginas web donde fuera necesario, por lo que generalmente no se necesitaban grandes scripts. Avancemos unos años y ahora tenemos aplicaciones completas que se ejecutan en navegadores con mucho JavaScript, JavaScript ahora se usa en otros contextos (Node.js, por ejemplo).

Por lo tanto, en los últimos años se ha comenzado a pensar en proporcionar mecanismos para dividir programas JavaScript en módulos separados que se puedan importar cuando sea necesario. Node.js ha tenido esta capacidad durante mucho tiempo, y hay una serie de bibliotecas y marcos de JavaScript que permiten el uso de módulos (por ejemplo, CommonJS y AMD otros basados en sistemas de módulos como RequireJS, y recientemente Webpack y Babel).

La buena noticia es que los navegadores modernos han comenzado a admitir la funcionalidad de los módulos de forma nativa, y de esto se trata este artículo. Esto solo puede ser algo bueno — los navegadores pueden optimizar la carga de módulos, haciéndolo más eficiente que tener que usar una biblioteca y hacer todo ese procesamiento adicional de lado del cliente, ahorrando viajes de ida y vuelta adicionales.

Soporte del navegador

El uso de módulos JavaScript nativos depende de las declaraciones import y export; estas son compatibles con los navegadores de la siguiente manera:

import

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung InternetNode.js
importChrome Soporte completo 61Edge Soporte completo 16
Soporte completo 16
Soporte completo 15
Deshabilitado
Deshabilitado From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 48Safari Soporte completo 10.1WebView Android Soporte completo 61Chrome Android Soporte completo 61Firefox Android Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 45Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 8.0nodejs Soporte completo 13.2.0
Notas
Soporte completo 13.2.0
Notas
Notas Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Soporte completo 12.0.0
Notas Deshabilitado
Notas Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Deshabilitado From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Soporte completo 8.5.0
Notas Deshabilitado
Notas Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Deshabilitado From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Soporte completo 63Edge Soporte completo 79Firefox Soporte completo 67
Soporte completo 67
Sin soporte 66 — 67
Deshabilitado
Deshabilitado From version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 50Safari Soporte completo 11.1WebView Android Soporte completo 63Chrome Android Soporte completo 63Firefox Android Soporte completo 67
Soporte completo 67
Sin soporte 66 — 67
Deshabilitado
Deshabilitado From version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 46Safari iOS Soporte completo 11.3Samsung Internet Android Soporte completo 8.0nodejs Soporte completo 13.2.0
Notas
Soporte completo 13.2.0
Notas
Notas Dynamic import can be used in either CommonJS or ES module files, to import either CommonJS or ES module files. See Node's ECMAScript Modules documentation for more details.
Soporte completo 12.0.0
Notas Deshabilitado
Notas Dynamic import can be used in either CommonJS or ES module files, to import either CommonJS or ES module files. See Node's ECMAScript Modules documentation for more details.
Deshabilitado From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Available in workersChrome Soporte completo 80
Soporte completo 80
Soporte completo 67
Deshabilitado
Deshabilitado From version 67: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 80
Soporte completo 80
Soporte completo 79
Deshabilitado
Deshabilitado From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Soporte completo 80Chrome Android Soporte completo 80
Soporte completo 80
Soporte completo 67
Deshabilitado
Deshabilitado From version 67: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte Nonodejs Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

export

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung InternetNode.js
exportChrome Soporte completo 61Edge Soporte completo 16
Soporte completo 16
Soporte completo 15
Deshabilitado
Deshabilitado From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 48Safari Soporte completo 10.1WebView Android Sin soporte NoChrome Android Soporte completo 61Firefox Android Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 45Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 8.0nodejs Soporte completo 13.2.0
Notas
Soporte completo 13.2.0
Notas
Notas Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Soporte completo 12.0.0
Notas Deshabilitado
Notas Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Deshabilitado From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Soporte completo 8.5.0
Notas Deshabilitado
Notas Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Deshabilitado From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
default keyword with exportChrome Soporte completo 61Edge Soporte completo 16
Soporte completo 16
Soporte completo 15
Deshabilitado
Deshabilitado From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 48Safari Soporte completo 10.1WebView Android Sin soporte NoChrome Android Soporte completo 61Firefox Android Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 45Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 8.0nodejs Soporte completo 13.2.0
Notas
Soporte completo 13.2.0
Notas
Notas Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Soporte completo 12.0.0
Notas Deshabilitado
Notas Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Deshabilitado From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Soporte completo 8.5.0
Notas Deshabilitado
Notas Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Deshabilitado From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
export * as namespaceChrome Soporte completo 72Edge Soporte completo 79Firefox Soporte completo 80IE Sin soporte NoOpera Soporte completo 60Safari Sin soporte NoWebView Android Sin soporte NoChrome Android Soporte completo 72Firefox Android Sin soporte NoOpera Android Soporte completo 51Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 11.0nodejs Soporte completo 12.0.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Introducción — un ejemplo

Para demostrar el uso de módulos, hemos creado un sencillo conjunto de ejemplos que puedes encontrar en GitHub. Estos ejemplos demuestran un sencillo conjunto de módulos que crean un elemento <canvas> en una página web, y luego dibujan (y reportan información sobre) diferentes formas en el lienzo.

Estos son bastante triviales, pero se han mantenido deliberadamente simples para demostrar los módulos con claridad.

Nota: Si deseas descargar los ejemplos y ejecutarlos localmente, deberás ejecutarlos a través de un servidor web local.

Estructura básica de los ejemplos

En nuestro primer ejemplo (ve basic-modules) tenemos la siguiente estructura de archivos:

index.html
main.js
modules/
    canvas.js
    square.js

Nota: Todos los ejemplos de esta guía básicamente tienen la misma estructura; lo anterior debería empezar a resultarte bastante familiar.

Los dos módulos del directorio modules se describen a continuación:

  • canvas.js — contiene funciones relacionadas con la configuración del lienzo (canvas):
    • create() — crea un lienzo (canvas) con un width y height especificados dentro de un contenedor <div> con un ID especificado, que a su vez se añade dentro de un elemento padre especificado. Devuelve un objeto que contiene el contexto 2D del lienzo y el ID del contenedor.
    • createReportList() — crea una lista desordenada adjunta dentro de un elemento contenedor específico, que se puede usar para generar datos de informes. Devuelve el ID de la lista.
  • square.js — contiene:
    • name — una constante que contiene la cadena 'square'.
    • draw() — dibuja una figura cuadrada en un lienzo específico, con un tamaño, posición y color específicos. Devuelve un objeto que contiene el tamaño, la posición y el color del cuadrado.
    • reportArea() — escribe el área de un cuadrado en una lista de informes específica, dada su longitud.
    • reportPerimeter() — escribe el perímetro de un cuadrado en una lista de informes específica, dada su longitud.

Reflexión — .mjs versus .js

A través de este artículo, usaremos extensiones .js para nuestros archivos de módulo, pero en otros recursos, puedes ver que en su lugar se usa la extensión .mjs. La documentación de V8 recomienda esto, por ejemplo. Las razones dadas son:

  • Es bueno por claridad, es decir, deja claro qué archivos son módulos y cuáles JavaScript.
  • Asegura que tus archivos de módulo sean analizados como un módulo por los entornos de ejecución como Node.js y herramientas de compilación como Babel.

Sin embargo, decidimos seguir usando .js, al menos por el momento. Para que los módulos funcionen correctamente en un navegador, debes asegurarte de que tu servidor los esté sirviendo con un encabezado Content-Type que contenga un tipo MIME de JavaScript como text/javascript. Si no lo haces, obtendrás un estricto error de verificación de tipo MIME como "El servidor respondió con un tipo MIME que no es JavaScript" y el navegador no ejecutará tu JavaScript. La mayoría de los servidores ya configuran el tipo correcto para archivos .js, pero todavía no para archivos .mjs. Los servidores que ya sirven archivos .mjs incluyen GitHub Pages y http-server para Node.js.

Esto está bien si ya estás utilizando un entorno de este tipo, o si no, pero sabes lo que estás haciendo y tiene acceso (es decir, puedes configurar tu servidor para establecer el Content-Type para archivos .mjs). Sin embargo, podría causar confusión si no controlas el servidor desde el que estás sirviendo archivos, o si estás publicando archivos para uso público, como lo hacemos aquí.

Por motivos de aprendizaje y portabilidad, decidimos mantenernos en .js.

Si realmente valoras la claridad de usar .mjs para módulos en lugar de usar .js para archivos JavaScript "normales", pero no quieres encontrarte con el problema descrito anteriormente, siempre puedes usar .mjs durante el desarrollo y convertirlos a .js durante tu paso de compilación.

También vale la pena señalar que:

  • Es posible que algunas herramientas nunca admitan .mjs, tal como TypeScript.
  • El atributo <script type="module"> se usa para indicar cuándo se está apuntando a un módulo, como verás a continuación.

Exportar características del módulo

Lo primero que debes hacer para acceder a las funciones del módulo es exportarlas. Esto se hace usando la declaración export.

La forma más sencilla de utilizarla es colocarla delante de cualquier elemento que desees exportar fuera del módulo, por ejemplo:

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return {
    length: length,
    x: x,
    y: y,
    color: color
  };
}

Puedes exportar funciones, var, let, const y, como veremos más adelante — clases. Deben ser elementos de nivel superior; no puedes usar export dentro de una función, por ejemplo.

Una forma más conveniente de exportar todos los elementos que deseas exportar es usar una sola declaración de exportación al final de tu archivo de módulo, seguida de una lista separada por comas de las características que deseas exportar entre llaves. Por ejemplo:

export { name, draw, reportArea, reportPerimeter };

Importación de características en tu script

Una vez que hayas declarado las funciones y características que deseas exportar de tu módulo, debes importarlas en tu script para poder usarlas. La forma más sencilla de hacerlo es la siguiente:

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Utiliza la declaración import, seguida de una lista separada por comas de las características que deseas importar entre llaves, seguida de la palabra clave from, seguida de la ruta al archivo del módulo — una ruta relativa a la raíz del sitio, que para nuestro ejemplo de basic-modules sería /js-examples/modules/basic-modules.

Sin embargo, hemos escrito la ruta de manera un poco diferente — estamos usando la sintaxis de punto (.) para significar "la ubicación actual", seguida de la ruta más allá del archivo que estamos tratando de encontrar. Esto es mucho mejor que escribir la ruta relativa completa cada vez, ya que es más corta y hace que la URL sea portátil — el ejemplo seguirá funcionando si lo mueve a una ubicación diferente en la jerarquía del sitio.

Así por ejemplo:

/js-examples/modules/basic-modules/modules/square.js

se convierte en

./modules/square.js

Puedes ver estas líneas en acción en main.js.

Nota: En algunos sistemas de módulos, puedes omitir la extensión del archivo y el punto (por ejemplo, '/modules/square'). Esto no funciona en módulos de JavaScript nativos.

Una vez que hayas importado las funciones a tu script, las puedes usar tal como se definieron dentro del mismo archivo. Lo siguiente se encuentra en main.js, debajo de las líneas import:

let myCanvas = create('myCanvas', document.body, 480, 320);
let reportList = createReportList(myCanvas.id);

let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

Nota: Aunque las funciones importadas están disponibles en el archivo, son vistas de solo lectura de la función que se exportó. No puedes cambiar la variable que se importó, pero aún puedes modificar propiedades similares a const. Además, estas características se importan como enlaces activos, lo cual significa que pueden cambiar de valor incluso si no puedes modificar el enlace a diferencia de const.

Aplicar el módulo a tu HTML

Ahora solo necesitamos aplicar el módulo main.js a nuestra página HTML. Esto es muy similar a cómo aplicamos un script normal a una página, con algunas diferencias notables.

En primer lugar, debes incluir type="module" en el elemento <script>, para declarar este script como un módulo. Para importar el script main.js, usamos esto:

<script type="module" src="main.js"></script>

También puedes incrustar el script del módulo directamente en el archivo HTML colocando el código JavaScript dentro del cuerpo del elemento <script>:

<script type="module">
  /* El código del módulo JavaScript va aquí */
</script>

El script en el que importas las características del módulo básicamente actúa como el módulo de nivel superior. Si lo omite, Firefox, por ejemplo, te da un error de "SyntaxError: Las declaraciones import solo pueden aparecer en el nivel superior de un módulo".

Solo puede usar instrucciones import y export dentro de los módulos, no en scripts normales.

Otras diferencias entre módulos y scripts estándar

  • Debes prestar atención a las pruebas locales — si intentas cargar el archivo HTML localmente (es decir, con una URL file:///), te encontrarás con errores de CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor.
  • Además, ten en cuenta que puedes obtener un comportamiento diferente de las secciones del script definidas dentro de los módulos en comparación con los scripts estándar. Esto se debe a que los módulos automáticamente usan strict mode.
  • No es necesario utilizar el atributo defer (ve atributos de <script>) al cargar un script de módulo; los módulos se difieren automáticamente.
  • Los módulos solo se ejecutan una vez, incluso si se les ha hecho referencia en varias etiquetas <script>.
  • Por último, pero no menos importante, dejemos esto en claro — las características del módulo se importan al alcance de un solo script — no están disponibles en el alcance global. Por lo tanto, solo podrás acceder a las funciones importadas en el script en el que se importan y no podrás acceder a ellas desde la consola de JavaScript, por ejemplo. Seguirás recibiendo errores de sintaxis en DevTools, pero no podrás utilizar algunas de las técnicas de depuración que esperabas utilizar.

Exportaciones predeterminadas vs. exportaciones con nombre

La funcionalidad que hemos exportado hasta ahora se compone de exportaciones con nombre — cada elemento (ya sea una función, const, etc.) se ha denominado por su nombre en export, y ese nombre también se ha utilizado para referirse a él en import.

También hay un tipo de exportación llamado exportación predeterminada — está diseñado para facilitar que un módulo proporcione una función predeterminada, y también ayuda a los módulos JavaScript a interoperar con los sistemas de módulos CommonJS y AMD existentes (como se explica muy bien en ES6 en profundidad: módulos de Jason Orendorff; busca "Exportaciones predeterminadas").

Veamos un ejemplo mientras explicamos cómo funciona. En nuestros ↑basic-modules↓ square.js puedes encontrar una función llamada randomSquare() que crea un cuadrado con un color, tamaño y posición aleatorios. Lo queremos exportar como nuestro predeterminado, por lo que en la parte inferior del archivo escribimos esto:

export default randomSquare;

Ten en cuenta la falta de llaves.

En su lugar, podríamos anteponer export default a la función y definirla como una función anónima, así:

export default function(ctx) {
  ...
}

En nuestro archivo main.js, importamos la función predeterminada usando esta línea:

import randomSquare from './modules/square.js';

Una vez más, ten en cuenta la falta de llaves. Esto se debe a que solo se permite una exportación predeterminada por módulo, y sabemos que randomSquare lo es. La línea anterior es básicamente una abreviatura de:

import {default as randomSquare} from './modules/square.js';

Nota: La sintaxis as para cambiar el nombre de los elementos exportados se explica a continuación en la sección Renombrar importaciones y exportaciones.

Evitar conflictos de nombres

Hasta ahora, nuestros módulos de dibujo de formas en el lienzo parecen estar funcionando bien. Pero, ¿qué pasa si intentamos agregar un módulo que se ocupa de dibujar otra forma, como un círculo o un triángulo? Estas formas probablemente también tendrían funciones asociadas como draw(), reportArea(), etc.; si intentáramos importar diferentes funciones del mismo nombre en el mismo archivo de módulo de nivel superior, terminaríamos con conflictos y errores.

Afortunadamente, hay varias formas de evitar esto. Los veremos en las siguientes secciones.

Renombrar importaciones y exportaciones

Dentro de las llaves de tu instrucciones import y export, puedes usar la palabra clave as junto con un nuevo nombre de función, para cambiar el nombre de identificación que utilizará una función dentro del módulo de nivel superior.

Entonces, por ejemplo, ambos de los siguientes harían el mismo trabajo, aunque de una manera ligeramente diferente:

// dentro de module.js
export {
  function1 as newFunctionName,
  function2 as anotherNewFunctionName
};

// dentro de main.js
import {newFunctionName, anotherNewFunctionName} from './modules/module.js';
// dentro de module.js
export {function1, function2};

// dentro de main.js
import {function1 as newFunctionName,
         function2 as anotherNewFunctionName } from './modules/module.js';

Veamos un ejemplo real. En nuestro directorio renaming, verás el mismo sistema de módulos que en el ejemplo anterior, excepto que hemos agregado los módulos circle.js y triangle.js para dibujar e informar sobre círculos y triángulos.

Dentro de cada uno de estos módulos, tenemos características con los mismos nombres que se exportan y, por lo tanto, cada una tiene la misma instrucción export en la parte inferior:

export { name, draw, reportArea, reportPerimeter };

Al importarlos a main.js, si intentamos usar esto:

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';

El navegador arrojará un error como "SyntaxError: redeclaración de nombre import" (Firefox).

En su lugar, necesitamos cambiar el nombre de las importaciones para que sean únicas:

import { name as squareName,
         draw as drawSquare,
         reportArea as reportSquareArea,
         reportPerimeter as reportSquarePerimeter } from './modules/square.js';

import { name as circleName,
         draw as drawCircle,
         reportArea as reportCircleArea,
         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';

import { name as triangleName,
        draw as drawTriangle,
        reportArea as reportTriangleArea,
        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';

Ten en cuenta que podrías resolver el problema en los archivos del módulo, p. ej.

// en square.js
export {name as squareName,
         draw as drawSquare,
         reportArea as reportSquareArea,
         reportPerimeter as reportSquarePerimeter };
// en main.js
import {squareName, drawSquare, reportSquareArea, reportSquarePerimeter} from './modules/square.js';

Y funcionaría igual. El estilo que uses depende de ti, sin embargo, podría decirse que tiene más sentido dejar el código de tu módulo tal cual y realizar los cambios en las importaciones. Esto tiene sentido especialmente cuando estás importando desde módulos de terceros sobre los que no tienes ningún control.

Crear un objeto module

El método anterior funciona bien, pero es un poco complicado y largo. Una solución aún mejor es importar las características de cada módulo dentro de un objeto module. La siguiente forma de sintaxis hace eso:

import * as Module from './modules/module.js';

Esto toma todas las exportaciones disponibles dentro de module.js y las hace disponibles como miembros de un objeto Module, dándole efectivamente su propio espacio de nombres. Así por ejemplo:

Module.function1()
Module.function2()
etc.

De nuevo, veamos un ejemplo real. Si vas a nuestro directorio module-objects, verás el mismo ejemplo nuevamente, pero reescrito para aprovechar esta nueva sintaxis. En los módulos, las exportaciones están todas en la siguiente forma simple:

export { name, draw, reportArea, reportPerimeter };

Las importaciones, por otro lado, se ven así:

import * as Canvas from './modules/canvas.js';

import * as Square from './modules/square.js';
import * as Circle from './modules/circle.js';
import * as Triangle from './modules/triangle.js';

En cada caso, ahora puedes acceder a las importaciones del módulo debajo del nombre del objeto especificado, por ejemplo:

let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
Square.reportArea(square1.length, reportList);
Square.reportPerimeter(square1.length, reportList);

Por lo tanto, ahora puedes escribir el código de la misma manera que antes (siempre que incluyas los nombres de los objetos donde sea necesario), y las importaciones son mucho más ordenadas.

Módulos y clases

Como dijimos antes, también puedes exportar e importar clases; esta es otra opción para evitar conflictos en tu código, y especialmente es útil si ya tienes el código de tu módulo escrito en un estilo orientado a objetos.

Puedes ver un ejemplo de nuestro módulo de dibujo de formas reescrito con clases ES en nuestro directorio classes. Como ejemplo, el archivo square.js ahora contiene toda su funcionalidad en una sola clase:

class Square {
  constructor(ctx, listId, length, x, y, color) {
    ...
  }

  draw() {
    ...
  }

  ...
}

que luego exportamos:

export { Square };

En main.js, lo importamos así:

import { Square } from './modules/square.js';

Y luego usas la clase para dibujar nuestro cuadrado:

let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
square1.draw();
square1.reportArea();
square1.reportPerimeter();

Carga estática de módulos

Habrá ocasiones en las que querrás agregar módulos juntos. Es posible que tengas varios niveles de dependencias, donde desees simplificar las cosas, combinando varios submódulos en un módulo principal. Esto es posible utilizando la sintaxis de exportación de los siguientes formas en el módulo principal:

export * from 'x.js'
export { name } from 'x.js'

Para ver un ejemplo, ve nuestro directorio module-aggregation. En este ejemplo (basado en nuestro ejemplo de clases anterior) tenemos un módulo adicional llamado shapes.js, que reúne toda la funcionalidad de circle.js, square.js y triangle.js. También hemos movido nuestros submódulos dentro de un subdirectorio dentro del directorio modules llamado shapes. Entonces, la estructura del módulo en este ejemplo es:

modules/
  canvas.js
  shapes.js
  shapes/
    circle.js
    square.js
    triangle.js

En cada uno de los submódulos, la exportación es de la misma forma, p. ej.

export { Square };

Luego viene la parte de agregación. Dentro de shapes.js, incluimos las siguientes líneas:

export { Square } from './shapes/square.js';
export { Triangle } from './shapes/triangle.js';
export { Circle } from './shapes/circle.js';

Estas toman las exportaciones de los submódulos individuales y las ponen a disposición de manera efectiva desde el módulo shapes.js.

Nota: Las exportaciones a las que se hace referencia en shapes.js básicamente se redirigen a través del archivo y realmente no existen allí, por lo que no podrás escribir ningún código relacionado útil dentro del mismo archivo.

Entonces, ahora en el archivo main.js, podemos obtener acceso a las tres clases de módulos reemplazando

import { Square } from './modules/square.js';
import { Circle } from './modules/circle.js';
import { Triangle } from './modules/triangle.js';

con la siguiente única línea:

import { Square, Circle, Triangle } from './modules/shapes.js';

Carga dinámica de módulos

La parte más nueva de la funcionalidad de los módulos de JavaScript que estará disponible en los navegadores es la carga dinámica de módulos. Esto te permite cargar módulos dinámicamente solo cuando son necesarios, en lugar de tener que cargar todo por adelantado. Esto tiene algunas obvias ventajas de rendimiento; sigue leyendo y veamos cómo funciona.

Esta nueva funcionalidad te permite llamar a import() como una función, pasándole la ruta al módulo como parámetro. Devuelve una Promise, que se cumple con un objeto module (consulta Crear un objeto module) que te da acceso a las exportaciones de ese objeto, p. ej.

import('./modules/myModule.js')
  .then((module) => {
    // Haz algo con el módulo.
  });

Veamos un ejemplo. En el directorio dynamic-module-import tenemos otro ejemplo basado en nuestro ejemplo de clases. Esta vez, sin embargo, no dibujamos nada en el lienzo cuando se carga el ejemplo. En su lugar, incluimos tres botones — "Círculo", "Cuadrado" y "Triángulo" — que, cuando se presionan, cargan dinámicamente el módulo requerido y luego lo usan para dibujar la forma asociada.

En este ejemplo, solo hemos realizado cambios en nuestros archivos index.html y main.js — el módulo exports sigue siendo el mismo que antes.

En main.js hemos tomado una referencia a cada botón usando una llamada a Document.querySelector(), por ejemplo:

let squareBtn = document.querySelector('.square');

Luego adjuntamos un escucha de eventos a cada botón para que cuando se presione, el módulo relevante se cargue dinámicamente y se use para dibujar la forma:

squareBtn.addEventListener('click', () => {
  import('./modules/square.js').then((Module) => {
    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
    square1.draw();
    square1.reportArea();
    square1.reportPerimeter();
  })
});

Ten en cuenta que, debido a que el cumplimiento de la promesa devuelve un objeto module, la clase se convierte en una subfunción del objeto, por lo que ahora necesitamos acceder al constructor prefijado con Module., p. ej. Module.Square(...).

Solución de problemas

Aquí hay algunos consejos que te pueden ayudar si tienes problemas para hacer que tus módulos funcionen. ¡No dude en agregarlos a la lista si descubres más!

  • Mencionamos esto antes, pero para reiterar: los archivos .js se deben cargar con un tipo MIME de text/javascript (u otro tipo MIME compatible con JavaScript, pero se recomienda text/javascript), de lo contrario, obtendrás un error de comprobación de tipo MIME estricto como "El servidor respondió con un tipo MIME no JavaScript".
  • Si intentas cargar el archivo HTML localmente (es decir, con una URL file:///), encontrarás errores CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor. Las páginas de GitHub son ideales ya que también sirven archivos .js con el tipo MIME correcto.
  • Debido a que .mjs es una extensión de archivo no estándar, es posible que algunos sistemas operativos no la reconozcan o intenten reemplazarla por otra. Por ejemplo, descubrimos que macOS silenciosamente agregaba .js al final de los archivos .mjs y luego, automáticamente ocultaba la extensión del archivo. Entonces, todos nuestros archivos salían realmente como x.mjs.js. Una vez que desactivamos la acción de ocultar automáticamente las extensiones de archivo y lo entrenamos para aceptar .mjs, todo estuvo bien.

Ve también