Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:cursos:programacion_avanzada_javascript:modulos_javascript [2024/10/29 15:44] – [Utilizar módulos desde HTML] tempwin
+++ informatica:programacion:cursos:programacion_avanzada_javascript:modulos_javascript [2024/10/30 16:07] (actual) – [Recursos] tempwin
@@ Línea 611: / Línea 611: @@
 Lamentablemente cuando salió ES2015, el cargador de módulos no estaba definido, ni tampoco la API que debía usarse para configurarlo. Esto significaba que **no había en el mercado ningún motor de ECMAScript que soportase los módulos de ES2015 de forma nativa**. Ningún navegador, ni Node.js en ninguna de sus versiones. Afortunadamente **eso ha cambiado y en la actualidad tenemos una especificación completa** del sistema de módulos, y todas las versiones modernas de navegadores //evergreen// ya podemos usarlo, tal y [[https://caniuse.com/#feat=es6-module-dynamic-import|como nos indica caniuse]]:
-<WRAP center round todo 60%>
+{{ :informatica:programacion:cursos:programacion_avanzada_javascript:21-es6-dynamic-module-soporte-caniuse.png |}}
-soporte de módulos ES6 dinámicos
-</WRAP>
 La imagen anterior es para el soporte de módulos dinámicos, que son aquellos que se cargan usando el propio lenguaje ECMAScript, a través de la palabra clave ''import'' (de una forma similar a como usábamos ''require'' en módulos CommonJS). Pero el sistema de módulos de ES2015 va mucho más allá y **se soporta también la carga de módulos usando etiquetas ''<script>''**. De nuevo [[https://caniuse.com/#feat=es6-module|caniuse nos muestra el soporte]] de esta otra característica:
-<WRAP center round todo 60%>
+{{ :informatica:programacion:cursos:programacion_avanzada_javascript:21-es6-script-module-soporte-caniuse.png |}}
-soporte de módulos ES6 con etiqueta script
-</WRAP>
 ==== Definiendo un módulo ECMAScript 2015 ====
@@ Línea 1169: / Línea 1164: @@
 ==== DEMO: Cargar módulos desde HTML ====
+Página ''index.html'' con un cuadro de texto:
+<code html>
+<!DOCTYPE html>
+<head>
+    <title>Demo cargar módulos</title>
+    <!-- Como queremos añadir un script JS como módulo,
+    usaremos el atributo "type" con el valor "module" para indicarlo
+    -->
+    <script type="module" src="./bootstrap.js"></script>
+</head>
+<body>
+    <h1>Demo cargar modulos</h1>
+    <input type="text" width="50" id="txtOne" value="0"/> <br />
+    <input type="button" width="50" id="btnInc" />
+</body>
+</html>
+</code>
+Como vemos, añadimos un módulo inicial, ''bootstrap.js'':
+<code javascript>
+import {next} from './inc.js'
+const txt = document.getElementById('txtOne');
+const btn = document.getElementById('btnInc');
+btn.addEventListener('click', () => {
+    const value = parseInt(txt.value, 10);
+    txt.value = next(value);
+}, false);
+</code>
+Como vemos, en ese módulo no se exporta nada. Esto pasa con los módulos que se cargan a través de la etiqueta ''<script>''.
+El módulo ''inc.js'':
+<code javascript>
+import sum from './sum.js'
+const next = i => sum(i,1);
+export {sum, next};
+</code>
+El módulo ''sum.js'':
+<code javascript>
+export default (a,b) => a+b;
+</code>
+<WRAP center round info 60%>
+Como hemos visto, ya no es necesario Babel o ningún otro transpilador en las últimas versiones de los navegadores porque soportan los módulos de forma nativa.
+</WRAP>
 ==== DEMO: Soporte de módulos ES6 en NodeJS ====
+<WRAP center round important 60%>
+Este código tiene varios años, es muy probable que ya no funcione igual o que las notas que acompañen esta sección estén desfasadas
+</WRAP>
+Fichero ''index.mjs'':
+<code javascript>
+import {next} from './inc.mjs'
+const value = 42;
+console.log(next(value));
+</code>
+<WRAP center round info 60%>
+Node.js obliga que los ficheros de módulos tengan la extensión ''.mjs''.
+</WRAP>
+Fichero ''.inc.mjs'':
+<code javascript>
+import sum from './sum.mjs'
+const next = i => sum(i,1);
+export {sum, next};
+</code>
+Fichero ''sum.mjs'':
+<code javascript>
+export default (a,b) => a+b;
+</code>
+Ejecutamos con Node.js indicando la característica experimental:
+<code bash>
+node --experimental-modules index.mjs
+</code>
+===== Recursos =====
+  * [[https://github.com/systemjs/systemjs|SystemJS]]
+  * [[https://browserify.org/|browserify]]
+  * [[https://webpack.github.io/|webpack]]
+  * [[https://requirejs.org/|RequireJS]]
+  * [[https://www.npmjs.com/package/local-web-server|NodeJS local web server]]