Módulos de JavaScript

Módulos (Modules)

Los módulos JavaScript le permiten descomponer el código en archivos separados.

lo que facilita la mantenimiento de la biblioteca de código.

Los módulos se utilizan import importada desde archivos externos mediante el etiqueta <script>.

Los módulos también dependen de la declaración type="module".

Ejemplo

<script type="module">
import message from "./message.js";
</script>

Prueba personalmente

Exportar

conFuncionesoVariablesLos módulos pueden almacenarse en cualquier archivo externo.

Hay dos tipos de exportaciones:Exportación nombradayExportación por defecto.

Exportación nombrada (Named Exports)

Vamos a crear un archivo llamado person.js y llenarlo con el contenido que queremos exportar.

Puede crear exportaciones nombradas de dos formas: creándolas de manera individual inline o creándolas todas de manera única en la parte inferior del archivo.

Crear de manera individual inline:

person.js

export const name = "Bill";
export const age = 19;

Crear de manera única en la parte inferior del archivo:

person.js

const name = "Bill";
const age = 19;
export {name, age};

Exportación por defecto (Default Exports)

Vamos a crear otro archivo llamado message.js y usarlo para demostrar la exportación por defecto.

Solo se puede tener un exportación por defecto en un archivo.

Ejemplo

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' es ' + age + 'años viejo.';
};
export default message;

Importación

Puedes importar módulos a un archivo de dos formas, dependiendo de si son exportaciones nombradas o por defecto.

La exportación nombrada se construye usando corchetes. La exportación por defecto no es así.

Importación desde la exportación nombrada

Importación desde el archivo person.js de la exportación nombrada:

import { name, age } from "./person.js";

Prueba personalmente

Importación desde la exportación por defecto

Importación desde el archivo message.js de la exportación por defecto:

import message from "./message.js";

Prueba personalmente

Atención

Los módulos solo son aplicables al protocolo HTTP(s).

Las páginas web abiertas mediante el protocolo file:// no pueden usar importación/exportación.