No tienes acceso a esta clase

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

ES6: module

13/35
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 31

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 Chic@s
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 caso de que est茅s trabajando en un proyecto muy b谩sico sin dependencias y no tienes un archivo JSON, puedes agregar el atributo type=鈥渕odule鈥 al script en tu html.

<script src="./index.js" type="module"></script>

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

Hola! Para los que tengan alg煤n error intentando ejecutar los m贸dulos les recomiendo actualizar la versi贸n de NodeJs que est茅n usando. Para ello les recomiendo revisar y visitar la p谩gina de
github donde est谩 como actualizar Node. O a la fecha (11/04/2023) pueden copiar y pegar este c贸digo que a mi me funcion贸 (solo para Ubuntu):

curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

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();

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

Los m贸dulos en Javascript son bloques de c贸digo reutilizables que pueden importar y exportar funcionalidades entre diferentes archivos.

Una analog铆a podr铆a ser un libro que se divide en cap铆tulos. Cada cap铆tulo es un m贸dulo que tiene su propio contenido y puede referirse a otros cap铆tulos. Los m贸dulos permiten organizar el c贸digo de forma m谩s clara y modular.

Existen diferentes sistemas de m贸dulos para Javascript, como CommonJS, AMD y UMD, pero el m谩s moderno y nativo es el sistema de M贸dulos ES (ESM), que se introdujo en ECMAScript 2015. Este sistema usa las palabras clave export e import para declarar qu茅 variables o funciones se pueden compartir entre los m贸dulos.

Mi resumen:

pero ese packaje.json ya estaba en la carpeta , pero como es que hizo ese archivo json

mi node no corre vanilla js entonces tuve que ejecutar esto en la terminar para probar el console.log

node --experimental-modules src/es6/08-modules.js

:

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';

Un m贸dulo es solo un archivo. Un script es un m贸dulo. Tan sencillo como eso.

Los m贸dulos pueden cargarse entre s铆 y usar directivas especiales聽export聽e聽import聽para intercambiar funcionalidad, llamar a funciones de un m贸dulo de otro:

  • La palabra clave聽export聽etiqueta las variables y funciones que deber铆an ser accesibles desde fuera del m贸dulo actual.
  • import聽permite importar funcionalidades desde otros m贸dulos.

Por ejemplo, si tenemos un archivo聽sayHi.js聽que exporta una funci贸n:

// 馃搧 sayHi.js
export function sayHi(user) {
	alert(`Hello, ${user}!`);
}

鈥uego, otro archivo puede importarlo y usarlo:

// 馃搧 main.js
import {sayHi} from './sayHi.js';
alert(sayHi); // function...sayHi('John'); 
// Hello, John!

La directiva聽import聽carga el m贸dulo por la ruta聽./sayHi.js聽relativo con el archivo actual, y asigna la funci贸n exportada聽sayHi聽a la variable correspondiente.

Ejecutemos el ejemplo en el navegador.

Como los m贸dulos admiten palabras clave y caracter铆sticas especiales, debemos decirle al navegador que un script debe tratarse como un m贸dulo, utilizando el atributo聽<script type =" module ">.

As铆:

<!-- 馃搧 index.html -->

<!doctype html>
<script type="module">
	import {sayHi} from './say.js';
	document.body.innerHTML = sayHi('John');
</script>

El navegador busca y eval煤a autom谩ticamente el m贸dulo importado (y sus importaciones si es necesario), y luego ejecuta el script.

鈿狅笍 Los m贸dulos funcionan solo a trav茅s de HTTP(s), no localmente

Si intenta abrir una p谩gina web localmente a trav茅s del protocolo聽file://, encontrar谩 que las directivas聽import y export聽no funcionan. Use un servidor web local, como聽static-server聽o use la capacidad de 鈥渟ervidor en vivo鈥 de su editor, como VS Code聽Live Server Extension聽para probar los m贸dulos.

El m贸dulo en JavaScript es una funcionalidad que permite organizar y reutilizar el c贸digo de una manera modular. Los m贸dulos permiten dividir el c贸digo en piezas m谩s peque帽as y encapsuladas, lo que facilita el mantenimiento y la colaboraci贸n en proyectos grandes. Antes de los m贸dulos, el c贸digo JavaScript se organizaba principalmente en archivos separados y se utilizaban t茅cnicas como el patr贸n de dise帽o de m贸dulo revelador o IIFE (Immediately Invoked Function Expression) para evitar la contaminaci贸n del 谩mbito global. Con la introducci贸n de los m贸dulos en JavaScript, se puede exportar e importar c贸digo entre archivos y utilizarlo en otros m贸dulos. Esto mejora la reutilizaci贸n de c贸digo y permite una mejor organizaci贸n y estructura del proyecto. En JavaScript, hay dos tipos principales de m贸dulos: los m贸dulos de Node.js y los m贸dulos de ECMAScript (ES) o m贸dulos de JavaScript est谩ndar. **M贸dulos de Node.js**: Estos m贸dulos se utilizan en entornos de ejecuci贸n de Node.js y siguen el sistema de m贸dulos de CommonJS. Para exportar e importar c贸digo en los m贸dulos de Node.js, se utilizan las palabras clave `module.exports` y `require`, respectivamente. Por ejemplo: `// En el archivo 'moduloA.js'` `module.exports = {` ` saludar: function() {` ` console.log('Hola desde el m贸dulo A');` ` }` `};` `// En el archivo 'moduloB.js'` `const moduloA = require('./moduloA');` `moduloA.saludar(); // Salida: 'Hola desde el m贸dulo A'` M贸dulos de ECMAScript: Estos m贸dulos son una caracter铆stica del est谩ndar ECMAScript y se utilizan en entornos de ejecuci贸n que admiten esta funcionalidad, como los navegadores modernos. Para exportar e importar c贸digo en los m贸dulos de ECMAScript, se utilizan las palabras clave export e import, respectivamente. Por ejemplo: `// En el archivo 'moduloA.js'` `export function saludar() {` ` console.log('Hola desde el m贸dulo A');` `}` `// En el archivo 'moduloB.js'` `import { saludar } from './moduloA';` `saludar(); // Salida: 'Hola desde el m贸dulo A'` Es importante tener en cuenta que los m贸dulos de ECMAScript a煤n no son compatibles con todos los navegadores y entornos de ejecuci贸n. En algunos casos, es necesario utilizar herramientas de construcci贸n como Babel o webpack para convertir los m贸dulos de ECMAScript a un formato compatible en todos los navegadores. En resumen, los m贸dulos en JavaScript son una funcionalidad que permite organizar y reutilizar el c贸digo de una manera modular. Hay dos tipos principales de m贸dulos: los m贸dulos de Node.js (utilizando `module.exports` y `require`) y los m贸dulos de ECMAScript (utilizando `export` e `import`). Los m贸dulos de ECMAScript son una caracter铆stica m谩s moderna y est谩n siendo adoptados gradualmente por los navegadores y entornos de ejecuci贸n.

ES6: module

ES6 (ECMAScript 2015) introdujo el concepto de m贸dulos en JavaScript para mejorar la modularidad y organizaci贸n del c贸digo. Los m贸dulos permiten a los desarrolladores dividir su c贸digo en archivos separados, cada uno con su propio 谩mbito (scope) privado, y exportar e importar funcionalidad entre ellos. Esto es 煤til para mantener el c贸digo m谩s limpio, modular y f谩cil de mantener.

Aqu铆 hay una breve introducci贸n a c贸mo funcionan los m贸dulos en ES6:

  1. Exportar desde un m贸dulo:

    Puedes exportar variables, funciones y clases desde un m贸dulo utilizando la palabra clave export.
// math.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;
  1. Importar en otro m贸dulo:

    Puedes importar las funcionalidades exportadas en otro m贸dulo utilizando la palabra clave import.
// app.js
import { sum, multiply } from './math.js';

console.log(sum(2, 3)); // Output: 5
console.log(multiply(2, 3)); // Output: 6
  1. Alias y exportaci贸n predeterminada:

    Tambi茅n puedes usar alias para renombrar las importaciones y exportar una 煤nica funci贸n o valor por defecto desde un m贸dulo.
// math.js
export default function add(a, b) {
  return a + b;
}

// app.js
import customAdd from './math.js';
console.log(customAdd(2, 3)); // Output: 5
  1. Exportar e importar todo:

    Si deseas exportar e importar todas las funcionalidades de un m贸dulo, puedes usar * as.
// math.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// app.js
import * as mathFunctions from './math.js';
console.log(mathFunctions.sum(2, 3)); // Output: 5
console.log(mathFunctions.multiply(2, 3)); // Output: 6


Es importante tener en cuenta que los m贸dulos ES6 generalmente funcionan en navegadores modernos y en entornos de Node.js que tienen soporte para ES6. En algunos casos, es posible que necesites configurar herramientas de construcci贸n (como webpack o Babel) para asegurarte de que los m贸dulos se manejen adecuadamente en todos los navegadores y entornos.


Est谩 informaci贸n es valida hasta septiembre de 2021, puede variar con nuevas implementaciones.



Espero les sea de utilidad. 馃懆鈥嶐煉

No s茅 si a alguien m谩s le pasa, pero en lo personal cuando vi un comentario que dec铆a module.mjs fui directo a Chat GPT para que me dijera que es y vi que hab铆an m谩s conceptos nuevos que voy a tener que aprender y eso en me emociona mucho xD

馃搨 Archivos del Proyecto 馃搨


Pasos 馃搶

  • 鈥 Dentro de la carpeta es6, crear el archivo llamado: module.js
      • 鈼 El c贸digo queda:
const hello = () => {
	console.log('Hello!');
}

export default hello;

  • 鈥 Abrimos el archivo package.json y despu茅s de license, agregar el tipo para que reconozca a module:
"license": "MIT",
"type": "module"

  • 鈥 Dentro de la carpeta es6, crear el archivo llamado: 08-module.js
      • 鈼 El c贸digo de los ejercicios queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
import hello from "./module.js";

hello();

/* output:
Hello!
*/

Es importante destacar que para que los m贸dulos funcionen en el navegador, necesitar谩s utilizar un sistema de construcci贸n (como Webpack o Babel) para compilar y empaquetar tus archivos JavaScript.

Los m贸dulos proporcionan una forma modular y organizada de estructurar y reutilizar el c贸digo en JavaScript, lo que facilita el mantenimiento y la colaboraci贸n en proyectos m谩s grandes.

Waos con la modularizacion

13/35 ES6: module

Los m贸dulos sirven para manejar el c贸digo en archivos de manera modular, lo que permite tener un codigo m谩s ordenado, legible y mantenible. Para hacer uso de los m贸dulos, se deben exportar funciones o variables en un archivo y luego importarlas en otros archivos donde se necesiten.

Para exportar una funci贸n o variable se utilza la palabra reservada 鈥渆xport鈥. Se pueden exportar antes de declarar la funcionalidad o entre llaves { }. Por ejemplo el archivo 鈥渕ath_function.js鈥, se declara una funci贸n para sumar dos valores y se exporta:

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

Para importar una funci贸n o variable de otro archivo se utiliza la palabra reservada 鈥渋mport鈥. Si se importa una funci贸n, se debe usar el mismo nombre que se declar贸 en el archivo original. Si se importa el m贸dulo con un nombre diferente, habr谩 un error de sintaxis. Por ejemplo, para importar la funci贸n 鈥渁dd鈥 del archivo 鈥渕ath_function.js鈥 en archivo 鈥渕ain.js鈥

Tambi茅n se puede usar module.exports en vez de export s贸lo, por si no quieres cambiar la extensi贸n al fichero a .mjs, o agregar el 鈥渢ype鈥濃 馃槂

https://www.youtube.com/watch?v=0t-Le4kdaMg este video tiene informaci贸n que no se ve en el v铆deo y es un muy buen complemento.

Cuando trataba de ejecutar el import y el export me arrojaba un problema que no se resolv铆a solo con agregar el

<code> "type": "module"

pero lo resolv铆 descargando nvm y haciendo un upgrade a node.
Dejo los links que me ayudaron
https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/
https://www.freecodecamp.org/news/how-to-update-node-and-npm-to-the-latest-version/

Estoy haciendo este curso mediante las nuevas rutas, y revisando la anterior escuela web me parece que los cursos pr谩cticos de seguro ayudan a que estos conceptos sean mas comprensibles, pero en las nuevas rutas se obvia eso.

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