Diferencias

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

--- informatica:programacion:cursos:programacion_avanzada_javascript:modulos_javascript [2024/10/29 15:52] – [DEMO: Cargar 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 1216: / Línea 1211: @@
 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]]