Diferencias

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

--- informatica:programacion:cursos:programacion_avanzada_javascript:modulos_javascript [2024/10/29 15:47] – [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 1170: / Línea 1165: @@
 ==== DEMO: Cargar módulos desde HTML ====
-''index.html'':
+Página ''index.html'' con un cuadro de texto:
 <code html>
@@ Línea 1176: / Línea 1171: @@
 <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>
@@ Línea 1186: / Línea 1184: @@
 </code>
-''bootstrap.js'':
+Como vemos, añadimos un módulo inicial, ''bootstrap.js'':
 <code javascript>
@@ Línea 1198: / Línea 1196: @@
 </code>
-''sum.js'':
+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>
@@ Línea 1204: / Línea 1212: @@
 </code>
-''inc.js'':
+<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 sum from './sum.js'
+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>
-==== DEMO: Soporte de módulos ES6 en NodeJS ====
+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]]