JavaScript Modules

JavaScript Modules

Contenido original de W3Schools


Un módulo puede contener una clase o una biblioteca de funciones para un propósito específico.


Modulos

Los módulos de JavaScript le permiten dividir su código en archivos separados.

Esto facilita el mantenimiento de una base de código.

Los módulos se importan desde archivos externos con la declaración import.

Los módulos también dependen del type="module" en la etiqueta <script>.

Ejemplo:

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

Ver ejemplo


Export

Los módulos con funciones o variables se pueden almacenar en cualquier archivo externo.

Hay dos tipos de exports: exportaciones nombradas y exportaciones predeterminadas.


Export nombradas

Creemos un archivo llamado person.js y llenémoslo con las cosas que queremos exportar.

Puede crear exportaciones con nombre de dos maneras. En línea individualmente o todos a la vez en la parte inferior.

Individualmente en línea:

person.js

export const name = "Jesse";
export const age = 40;

Todo a la vez en la parte inferior:

person.js

const name = "Jesse";
const age = 40;

export {name, age};

Export predeterminadas

Creemos otro archivo, llamado message.js, y usémoslo para demostrar la exportación predeterminada.

Solo puedes tener una exportación predeterminada por archivo.

Ejemplo:

message.js

const message = () => {
const name = "Jesse";
const age = 40;
return name + ' tiene ' + age + 'años.';
};

export default message;

Import

Puedes importar módulos a un archivo de dos maneras, según si se denominan exportaciones o exportaciones predeterminadas.

Las exportaciones nombradas se construyen utilizando llaves. Las exportaciones predeterminadas no.

Importar desde exportaciones nombradas:

Importe exportaciones nombradas desde el archivo person.js:

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

Ver ejemplo

Importar desde exportaciones predeterminadas

Importe una exportación predeterminada desde el archivo message.js:

import message from "./message.js";

Ver ejemplo


Nota

Los módulos solo funcionan con el protocolo HTTP(s).

Una página web abierta a través del protocolo file:// no puede utilizar import/export.


W3Schools es el sitio de desarrolladores web más grande del mundo.

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!