Los sistemas de módulos para Javascript surgen por la necesidad de encapsular distintas funcionalidades en "bloques de código" reutilizables. Estos bloques se llaman modulos y fueron introducidos en ECMAScript 6 . En este articulo veremos su sintaxis.

TIPOS DE EXPORT/IMPORT

Esta forma de encapsular codigo permite que exportemos e importemos archivos js de una manera mas clara. Hay dos tipos diferentes de exports , 'named' y 'default'. Podemos tener muchos named pero solo un default. Podemos exportar/importar clases, funciones, variables, expresiones, etc.

Vamos a ver la sintaxis para cada uno de los tipos a través de ejemplos en donde el archivo que exporta se llamará './archivoQueExporta.js'

DEFAULT EXPORT

Al utilizar export default podemos exportar algo sin necesidad de que tenga un nombre como por ejemplo una funcion anonima, una expresion, etc.

Utilizando export default podemos exportar algo sin necesidad de importarlo con el mismo nombre con el que se exporto. Utilizamos la palabra export default seguida de lo que queremos exportar. Por ejemplo esta funcion anonima

export default function() {
	console.log('Hola');
}

O podemos usar export default con algo que tenga nombre pero aun asi podremos importarlo con cualquier otro nombre.

export default function hola() {
	console.log('HOla');
}

Si algo fue importado como default, puedo darle el nombre que yo quiera, si quisiera importar de cualquiera de los dos ejemplos de arriba haria esto:

import hola from './archivoQueExporta.js';

hola();

Otra manera de exportar default es declarar lo que queremos exportar y luego exportarlo entre llaves { } seguido de as default {loQueQuieroExportar as default} :

const PI = 3.14;

export {PI as default};

Y lo importamos de la misma manera que el ejemplo de arriba :

import numeroPi from './archivoQueExporta.js';

console.log(numeroPi);

NAMED EXPORTS

Cuando exportamos algo con la sintaxis de named exports, debemos importarlo con el nombre que se le asigno al exportarlo y entre llaves { }.

En el export:

export const PI = 3.14

En el import usamos si o si { } y dentro los named export :

const PI = 3.14

import {PI} from './archivoQueExporta.js';

De la misma manera que los defualt exports, estos se pueden exportar declarando lo que queremos exportar en otra linea y utilizando { } :

const PI = 3.14;

export {PI};    

Tambien puedo exportar mas de un solo bloque de codigo, vamos a probar exportando una clase, una funcion y una constante.

function foo() {

}
    
class Perro {
    
}
    
var nombre = 'Flipper';
    
export {foo, Perro, nombre};    

o tambien podria haberlo hecho asi :

export function foo() {

}

export class Perro {

}

export var nombre = 'Flipper';    

En ambos casos en el import entre { } escribimos lo que queremos de ese archivo:

import {foo, Perro} from './archivoQueExporta.js';

Tambien puedo exportar algo con diferente nombre al declarado :

export {foo as functionFoo, bar, persona as perro};

Y en el import lo tenemos que importar con el nombre exportado

import {foo, bar} from './archivoQueExporta.js';

*Cabe aclarar que si lo hubiesemos importado a foo como foo no funcionaria ya que le dimos un nombre diferente, en este caso fooFunction.

Si quisieramos exportar named y defaults podriamos hacerlo asi, todo junto en un mismo export pero el default nombrandolo como as default:

const  PI = 3.14;

function foo() {

}

class Persona {

}

o tambien asi todo por separado:

export default const  PI = 3.14;

export function foo() {

}

export class Persona {

}

export {foo as fooFunction, Persona, PI as default};

Importamos el default primero fuera de las llaves { }, y luego dentro de las llaves { } todo lo exportado con named:

import defaultExport, {fooFunction, Persona} from './archivoQueExporta.js';