2 min read

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

Dividir y conquistar (nuevamente), esta vez te enseñamos cómo dividir tu código en varios archivos para evitar conflictos de GIT y también para estar más organizado. Al final de esta lección, podrás dominar la importación y exportación de 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:

javascript import

javascript import

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

//contenido en index.js 

import multiplyFunction from './my_file.js';

let total = multiplyFunction(3,6)
console.log(total);

Exportando por defecto

//contenido en my_file.js 

let multiplyFunction = function(a,b){
    return a*b;
};
export 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.