ES6: module

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=“module” al script en tu html.

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

Apunte de Notion

LINK: https://pogolo.notion.site/12-ES6-module-4a65488ee2c842e8a8363b4a7121d978

More info:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import

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

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.

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

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. 👨‍💻

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}!`);
}

…Luego, 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 “servidor en vivo” de su editor, como VS Code Live Server Extension para probar los módulos.

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 “export”. Se pueden exportar antes de declarar la funcionalidad o entre llaves { }. Por ejemplo el archivo “math_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 “import”. 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 “add” del archivo “math_function.js” en archivo “main.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 “type”… 😃

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