Importación y exportación de módulos JavaScript

☝️ Esta lección es para usuarios de WebPack y módulos ECMAScript (ESM).; hay otra forma de trabajar con módulos usando la [sintaxis de CommonJS] (https://requirejs.org/docs/commonjs.html) que no cubriremos.

Todo nuestro código JS no puede estar en el mismo archivo; eso hará que sea difícil de leer y casi imposible de mantener.

Gracias a Webpack, podemos dividir nuestro código en archivos pequeños como queramos y luego podemos hacer referencia a otros archivos de nuestro archivo actual.

De hecho, ya lo hemos estado haciendo cuando importamos nuestros estilos, bootstrap o jQuery desde index.js.

Así es como funciona "importar" y "exportar":

• Utiliza la palabra importar para traer variables, clases o funciones de otros archivos.
• Usted usa la palabra exportar para exponer variables, clases o funciones que serán utilizadas por otros archivos.

Por ejemplo, aquí estamos importando una función de otro archivo:

Exportación por defecto

Hay una pequeña variación que puede encontrar en Internet que se llama "exportación predeterminada": esta es solo una forma de exportar una cosa por defecto a su archivo.

Solo puede exportar la variable ONE de forma predeterminada, y no tiene que usar los corchetes mientras se importa.

Importando por defecto

1//contenido en index.js 
2
3import multiplyFunction from './my_file.js';
4
5let total = multiplyFunction(3,6)
6console.log(total);

Exportando por defecto

1//contenido en my_file.js 
2
3let multiplyFunction = function(a,b){
4    return a*b;
5};
6export default multiplyFunction;

Ejemplo final:

Aquí hay una pequeña demostración de todos los tipos de importación / exportación que trabajan en el mismo proyecto.