No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Reg谩late acceso ilimitado a todos los cursos por 1 a帽o a precio especial de Navidad 馃巹

Antes: $199

Currency
$149/a帽o
reg铆strate

termina en:

16D
16H
45M
30S

ES6: module

14/38
Recursos

Para que el c贸digo de JavaScript sea m谩s ordenado, legible y mantenible; ES6 introduce una forma de manejar c贸digo en archivos de manera modular. Esto involucra exportar funciones o variables de un archivo, e importarlas en otros archivos donde se necesite.

C贸mo utilizar los m贸dulos de ECMAScript

Para explicar c贸mo funciona las exportaciones e importaciones de c贸digo, debes tener m铆nimo dos archivos, uno para exportar las funcionalidades y otro que las importe para ejecutarlas.

Adem谩s, si iniciaste un proyecto con NPM (Node Package Manager) con Node.js, necesitas especificar que el c贸digo es modular en el archivo package.json de la siguiente manera:

// package.json
{   ...
    "type": "module"
}

Qu茅 son las exportaciones de c贸digo

Las exportaciones de c贸digo consisten en crear funciones o variables para utilizarlas en otros archivos mediante la palabra reservada export.

Existen dos formas de exportar, antes de declarar la funcionalidad, o entre llaves {}.

Por ejemplo, en el archivo math_function.js declaramos una funci贸n para sumar dos valores, el cual lo exportaremos.

//math_function.js
export const add = (x,y) => {
    return x + y
}
//math_function.js
const add = (x,y) => {
    return x + y
}

export { add, otherFunction, ... }

Qu茅 son las importaciones de c贸digo

Las importaciones de c贸digo consiste en usar funciones o variables de otros archivos mediante la palabra reservada import, que deber谩n estar siempre lo m谩s arriba del archivo y utilizando el mismo nombre que el archivo original.

Existen dos formas de exportar, antes de declarar la funcionalidad, o entre llaves {}.

Por ejemplo, importamos la funci贸n add del archivo math_function.js para utilizarla en un archivo main.js.

// main.js
import { add, otherFunction } from './math_functions.js'

add(2,2) //4

Si importamos el m贸dulo con un nombre diferente, existir谩 un error de sintaxis.

// Err贸neo
import { suma } from './math_functions.js'

suma(2,2) //SyntaxError: The requested module '/src/archivo1.js' does not provide an export named 'suma'

Para importar todas las funcionalidades de un archivo se utiliza un asterisco (*) y se puede cambiar el nombre para evitar la repetici贸n de variables o funciones a trav茅s de la palabra reservada as.

// main.js
import * as myMathModule from './math_functions.js';

myMathModule.add(2,2) //4
myMathModule.otherFunction()
...

Exportaciones por defecto

Si solo UN valor ser谩 exportado, entonces se puede utilizar export default. De esta manera no es necesario las llaves {} al exportar e importar.

//math_function.js
export default function add (x,y){
    return x + y;
}

Adicionalmente, no se puede usar export default antes de declaraciones const, let o var, pero puedes exportarlas al final.

// 鉂 Err贸neo
export default const add  = (x,y) => {
    return x + y;
}

// 鉁 Correcto
const add  = (x,y) => {
    return x + y;
}

export default add

Importaciones por defecto

Si 煤nicamente un valor ser谩 importado, entonces se puede utilizar cualquier nombre en la importaci贸n. De esta manera no es necesario las llaves {}.

//Las siguientes importaciones son v谩lidas
import  add  from './math_functions.js'
import  suma  from './math_functions.js'
import  cualquierNombre  from './math_functions.js'

Sin embargo, es recomendable utilizar siempre el nombre de la funci贸n, para evitar confusiones.

Combinar ambos tipos de exportaciones e importaciones

Teniendo las consideraciones de importaciones y exportaciones, nombradas y por defecto, entonces podemos combinarlas en un mismo archivo.

// module.js
export const myExport = "hola"
function myFunction() { ... }

export default myFunction

// main.js
import myFunction, { myExport } from "/module.js"

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 13

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

puedes evitar la configuraci贸n del JSON usando la extenci贸n .mjs, esta le indica a JavaScript que es un m贸dulo

Recuerden que existen dos tipos de exports/imports

export default myFunction;
export {myFunction};

import myFunction from "./myFunction"
import {myFunction} from "./myFunction"

Default se usa cuando solo devuelves un elemento y no quieres restringir el nombre.
Export const restringe el nombre y ademas te permite devolver multiples funciones o constantes

Hola [email protected]
ES6: Module

  • Primer archivo
const hello = () => {
    console.log("Hello!")
}
export default hello;
  • Segundo archivo
import hello from "./module.js";

hello();
  • **Importante Archivo de package.json a帽adir **
"type": "module"

驴En qu茅 momento vimos: 07-clases.js? Y se brinc贸 el 02 y repiti贸 el n煤mero 04鈥
馃槙

Clase 12: ES6: module

Nota

  • Solo funciona esto si tenemos node.js instalado del caso contrario podemos usar require()
  • Recuerden que existen dos tipos de exports/imports
  • Default se usa cuando solo devuelves un elemento y no quieres restringir el nombre.
  • Export const restringe el nombre y ademas te permite devolver multiples funciones o constantes
  • Recuerda poner las extensiones como buena practica

Importante Archivo de package.json a帽adir

"type": "module"

Ejemplo

archivoA.js
const hello = () => {
    console.log("Hello!")
}
export default hello;


------
archivoB.js
import hello from "./module.js";

hello();

La exportaci贸n por defecto siempre ha tenido un problema 馃檭, que no es una regla seguir el nombre de la funci贸n:

// utils.js
const sayHello = () => console.log('Hello');

export default sayHello;

// main.js
import miFuncion from './utils';

Este c贸digo de arriba no arrojar铆a ning煤n error, debido que a la exportaci贸n por defecto no nos obliga a llamar a la funci贸n importada de la misma forma 馃.


De la misma manera, se pueden combinar la exportaciones por defecto y nombradas en un mismo archivo 馃く.

// utils.js
const sayHello = () => console.log('Hello');
const sayBye = () => console.log('Bye!');

export { sayBye, sayHello as default };

// main.js
import sayHello,聽{ sayBye } from './utils';

Hasta este momento he visto como se puede optimizar el codigo que ya habia escrito con estas funcionalidades increibles. Gracias por los aportes!

Ac谩 les dejo una documentaci贸n que me gusto mucho sobre este tema: Export e Import

Se puede tambi茅n importar el modulo, sin necesidad de modificar el package:

const myfunction = require('./NombreArchivo.js');

// Normalmente se utiliza esto en el Back

// import funciona en el front sin necesidad de modificar el // archivo package

Flag para importar modulos en package.json