Transcripciones
1. Introduccion: Hola y bienvenidos a
mi curso ES6 módulos, como usarlos y
como crearlos. Los módulos Es6 son el
nuevo estándar para cargar módulos en JavaScript, cual es soportado en
todos los navegadores modernos. Cuenta con una nueva sintaxis y palabras clave
extra para
importar y exportar. Casi todos los
navegadores modernos pueden usarlo. Tienen cargadores de
módulos integrados y además no hay jazz en su última
versión lo soporta. Entonces cada transpiler moderno y Bundler y también
TypeScript lo soportan. Los nuevos proyectos que comienzan utilizan el nuevo
sistema de módulos y cada vez más de los proyectos existentes
se actualizan para apoyarlo. Y también ayuda con el
temblor de los árboles y minimiza
los tamaños de los haces. Entonces, si estás usando módulos ES6, estás en el
camino correcto para desarrollar aplicaciones web
modernas y
mantenibles. lo que en este curso,
aprenderás a usar las sentencias Export e import
y cómo integrar módulos en tu página HTML, cómo usar las importaciones dinámicas
y cómo usar la sintaxis. Espero que disfruten del curso y nos vean en el primer video.
2. Importar y exportar: Hola y bienvenidos a este video. Te explicaré en este video
cómo usar los módulos ES6, cómo introducirlos, cómo crearlos, y cómo
integrarlos a tu HTML. En primer lugar, hablemos en breve de mi
entorno de desarrollo. Tengo videos para
recodificar como IDE. También puedes usar eso. Es una gran idea
de Microsoft. Es gratis. Puedes
descargarlo para mis chicas, para Windows, para Linux. Pero también puedes
usar otra cosa. Puedes usar tu editor de
texto favorito, lo que sea. En realidad no importa. Y estoy usando un VGS
como servidor sordo, que está transpirando
código sobre la marcha. Pero no tienes que usarlo. Puedes usar cualquier otra cosa. Puedes usar un servidor normal, puedes usar un webpack, servidor
dev, lo que quieras. Entonces comencemos. Y cada página web y cada aplicación rep
comienza dentro de HTML, en este caso, index.html. Y aquí está. Es bastante sencillo. Tiene la pestaña del título
VII porque estoy usando create VT para
crear un proyecto. Entonces tengo este div aquí, que sólo contiene
pequeños textos. Entonces eso no importa. Pero aquí tenemos la primera etiqueta
importante. Es la etiqueta del script por supuesto, porque es, está
cargando un script. En este caso, son
las salsas principal JS, que está por aquí. Lo revisamos ahorita. Principal JS, por el
momento está vacío, pero voy a poner en
algún código ahí. Así que también podrías poner algo de código aquí dentro la etiqueta script y
luego omitir la fuente. Eso también es posible que ya
debas saber que es etiqueta de script normal. Funciona como una etiqueta de script
normal. La única diferencia es que
tienes módulo de tipo aquí. Y esto
lo importante si quieres
usar palabras clave son declaraciones
como importar y exportar. En el script, hay que
usar módulo de tipo aquí. También hay otra posibilidad. Hacer importaciones dinámicas. Puedes usar la función de importación y puedes importar módulos, módulos ES6 con eso. Pero la forma estándar referenciarlos
estáticamente es la etiqueta de script y el módulo de tipo. Entonces esto
lo importante, tipo módulo. Y puedes escribir tu
código aquí dentro, o puedes usar el
atributo source y apuntar
a tu JavaScript. Entonces vamos a comprobar si esto
está realmente cargado. Así que puse un año algo de registro, Sólo JS principal, y vamos a
comprobar la salida de la consola. De acuerdo, así que aquí lo tenemos. Eso realmente funciona. Por lo que nuestro script, nuestro
módulo, está cargado. Y por el momento, no
es visible
que sea un módulo. Pero vamos a poner en algunos
módulos código específico aquí. Entonces en este momento
tenemos este bitácora, podemos dejarlo aquí. Pero, ¿qué es
lo importante en el módulo? Es que el módulo puede exportar algo o se puede
importar algo o ambos. Por supuesto, yo estoy haciendo
aquí la importación primero, claro, porque exportar
aquí no tiene ningún sentido. Porque estoy cargando esto
vía la etiqueta script aquí. Y no puedo usar
ninguna exportación aquí. Entonces tenemos que usar
primero alguna importación. Entonces estoy poniendo una declaración de
importación aquí. Esto es lo nuevo. Esta es la instrucción de
importación del módulo ES6. Y así ahora tenemos que
escribir importar algo. Y luego después de eso desde
y se puede leer que como importar algo que
especificamos más adelante desde el archivo, que se especifica aquí, que es creé mod one. Entonces es mod one dot js. Por favor use la extensión aquí. También podría omitir
la extensión aquí, pero esto es porque estoy usando
VHS como servidor sordo y
puede resolver también los módulos
sin ninguna extensión. Pero creo que es la mejor práctica poner
aquí la extensión. Por lo que también podría ser
algo así como JSX o también puedes
si tu, si tu entorno lo soporta, también
puedes usar, también
puedes importar CSS. Pero para eso se necesita
algún tipo de bundler, o en este caso, las muertes de jazz tienen también
soporta la importación de CSS. Pero normalmente se importa
un archivo js dot js. Por lo que estamos importando
desde este archivo. Y aquí tenemos que
decirle al motor JavaScript qué importar. Podemos importar cosas diferentes. Podemos importar
exportaciones específicas, exportaciones únicas. O podemos importar un
defecto, una exportación por defecto, o podemos importar el módulo
completo, lo cual estoy haciendo aquí
con este asterisco. Y luego necesito
ponerles algún identificador. Esto lo puedo maquillar completamente. Entonces estoy usando mod one. En realidad no importa
cuál sea el identificador. Puedo referenciar el módulo
con este identificador. Para que pueda escribir aquí
mod un punto algo. Está vacía por el momento, así que aquí no tengo nada. Entonces solo estoy escribiendo mod one. Pero lo importante
aquí es el asterisco. Como mod one significa que estoy importando el
módulo completo como un objeto, y lo estoy nombrando mod one. Entonces este es mi identificador para el módulo, el módulo
completo. Pasemos al módulo mod one. Por el momento está
completamente vacío, así que no hay nada
que importar en realidad, pero ponemos algo aquí. Estamos importando algo. Entonces debo exportar
algo en este módulo. Y aquí es donde
usamos la palabra clave export. Y después de la exportación, necesitamos especificar lo que
queremos exportar. Y estoy exportando
una función aquí. Y no puedo, no puedo exportar
y función anónima, debo nombrarlo aquí. Entonces lo nombramos, hazlo porque
solo es hacer algo,
algo así como este log de consola. Yo sólo estoy registrando. Hazlo. De acuerdo, así que aquí estamos exportando
esta función en JS principal. Puedo importar eso y estoy
ingresando el módulo completo. Entonces debería poder hacer
algo como mod one dot, hacerlo, y llamarlo aquí. Vamos a comprobar si está funcionando. Hola módulos, ese es
nuestro div, no importa. Lo importante es
aquí en la consola. Hagámoslo. Esto es lo que nosotros,
lo que iniciamos sesión en el, en la función de exportación a ella. Y luego tenemos js principales. Volvamos a revisar el código. Sí, entonces estamos llamando a la función de
exportación, hazlo. Y en esta función estamos
haciendo consola log it. Y después de eso, hacemos el registro de
consola JS principal. Entonces eso sí funcionó
ya. Entonces eso está bien. Vamos a exportar segunda función. Entonces copiamos este y lo
nombramos, hazlo también. Nos encerramos a su a la consola. De acuerdo, entonces lo que deberíamos hacer aquí, lo que deberíamos poder
hacer aquí es hacerlo. Hazlo también desde el módulo
mod one. Y ya me está
sugiriendo hacer también. Y a ver si funciona. Hazlo, hazlo también. Funciona. De acuerdo, Entonces lo exportamos
a funciones aquí. Función de exportación, hazlo. La función de exportación debido a la
sintaxis es sencilla. Acabas de poner la declaración
export antes de la función aquí. Y también se pueden
exportar variables como liger, const, por ejemplo. Esta es una constante. Estoy exportando esto aquí. Mod un punto. Esta es una constante. Y sólo puedo
consola registrarlo aquí. Y vamos a comprobar si está funcionando. Sí, así que está saliendo
para aquí. Entonces eso funciona. Podemos exportar funciones, podemos exportar variables. Entonces vamos a ver si podemos importar una función específica
o exportación específica. Entonces aquí tenemos la sintaxis también. Importar el módulo completo y referenciarlo como este
identificador mod one. Podría renombrar mod
one a solo mod, por
ejemplo, puedo
llamarlo cualquier cosa por igual. Pero ahora si quiero
importar una exportación específica, necesito usar sintaxis diferente. La sintaxis aquí son
las llaves, que también se usan
para estructurar y que es algo similar. Entonces estoy poniendo aquí
estas llaves rizadas y estoy consiguiendo esto las exportaciones aquí como sugerencias para la importación. Por lo que tengo que hacer es, y esta es una constante como las exportaciones de este
mod un punto js módulo. Vamos a importar, hazlo. Y estamos comentando
esto por el momento. Y ahora he importado hazlo. Entonces necesito eliminar eso porque solo tengo que
hacerlo ahora como identificador. Y puedo llamar a hacerlo como
una función porque es, se exporta aquí en mod one. Y estoy importando solo esta, exportación, esta función aquí. Y se llama igual
que aquí se exporta, hazlo. Y yo lo estoy llamando. Entonces vamos a ver. Ahora está funcionando. Yo podría hacer lo mismo con debido a una actriz todos kowtow
también podría importar el const. Entonces ahora mismo estoy importando
por completo cada
exportación aquí por separado. Podría llamar a hacerlo a
un registro de consola de iconos. Esta es una constante. Y deberíamos tener la
misma salida que antes. Se debe 22. Por ahora tan bueno. Para que podamos importar el módulo
completo. Puedes importar
exportaciones individuales o puedes,
puedes importarlas por separado
aquí, como yo hice aquí. ¿ Y si quieres llamarlo? Digamos que
ya tienes una función la
cual está llamada a hacerlo. No quieres
cambiar el nombre porque quieres usarlo aquí. Y este solo está
haciendo registro de consola. Y haremos salida Local. Hazlo. Entonces ahora tenemos un problema porque estamos definiendo aquí esta
función hazlo, y es el mismo
identificador que esta importación. Pero, ¿cómo podemos importar esto y renombrarlo a un identificador
diferente? Esto es posible con la misma sintaxis que hacíamos
antes con la estrella. Como hacerlo, como,
digamos, importado. Hazlo. Con esta sintaxis. Cambiamos el nombre de la exportación a este
identificador importado, hazlo. Veamos si podemos cambiar
este para importarlo,
hacerlo, y ver cuál es
la salida. Entonces hagámoslo. Hazlo
a dos y tío local. Eso es lo que esperábamos ahora. Porque aquí, esto hacerlo es, por
supuesto esta declaración de
función. Esto lo hacen y los exportados
lo hacen desde este módulo. Nosotros, lo renombramos
para importarlo. Y podrías hacer el
mismo año si quieres, hazlo a importado. Entonces si ya
tiene e identifica en su ámbito de módulo cuál es idéntico a una
exportación de un módulo. Puede usar esta sintaxis
para cambiar el nombre de la importación. Vamos a comprobar si
sigue funcionando. Sí, está funcionando. Entonces así es como se importan
las exportaciones por separado. Y esto es importante porque también
podrías por supuesto, importar todo con siempre con una estrella e importante módulo
completo. Pero es un problema porque no
le dices al bundler o al programa que usas para agrupar tu JavaScript y
minificado y cosas por el estilo. No le dices a este sistema lo que realmente usas
desde este módulo. Si haces esto y
solo quieres tener, digamos que solo
querías tener hacerlo. Entonces estoy, estoy comentando esto. Si solo quieres tener, hazlo como importante para ello. El empaquetador, si usa, por
ejemplo, es algo
así como tres árboles temblando. El bundler sabe
que solo usas, hazlo esta función
desde este módulo. Entonces teóricamente si
nadie más usa, no
hay otros
usuarios del módulo hacerlo también, o esta constante, el bundler
podría simplemente borrar este código. Y así haz que el tamaño de tu
paquete sea más pequeño. Esta es la ventaja
de esta sintaxis aquí solo importa una sola exportación. Por lo que deberías
preferir esta sintaxis. También puedes, por supuesto, si
utilizas el modular completo, casi cualquiera, casi
todas las funciones o las exportaciones en el módulo. Puedes, por supuesto,
usar esta sintaxis. Entonces, pero si tú, digamos que tienes
algo así como guión bajo, que contiene como 3030
exportaciones o algo así. Y solo necesitas una función. Sería prudente simplemente
importar esta función. Porque tu Bundler
entonces borraría todas las
demás funciones. Tienes un tamaño de haz mucho
más pequeño. Entonces voy a volver a esto. Ahora. Vamos, saltemos derecho a sintaxis
diferente o a un estilo de importación
diferente. Llamémoslo así. Lo que también podemos hacer es definir una exportación por defecto,
default, export, default
después de la exportación. Y le estoy diciendo
al sistema de módulos que esta es mi exportación por defecto. Por supuesto. ¿Qué puedo hacer aquí para importar la exportación
predeterminada? Entonces digamos que esta es
mi función principal aquí. Aquí es donde, digamos que el 80%
del módulo que los usuarios quieren usar. O es, tal vez
también es la única función. Vamos, hagámoslo así. Es la única función
es la única exportación. Para que puedas, puedes decir exportar función
predeterminada hazlo. Y lo que puedes hacer aquí es simplemente
escribirlo así. Lo cambiaremos para hacerlo. Y borraré éste. Vamos a comprobar en el
navegador si está funcionando. Hazlo. Funciona. Por lo que si montas export default, puedes importar este predeterminado. De esta manera. Solo escribo importación,
luego cualquier identificacion, podria usar un identificador
diferente aqui podria usar importado. Hazlo. No importa porque
esta sintaxis es para importar la exportación
predeterminada. Para que pueda nombrarlo como me gusta. Sigue trabajando. No tiene que ser
la exportación un nombre. Entonces podría llamarlo cualquier cosa igual porque
no estoy especificando. No tengo que especificar lo que
quiero importar porque esta sintaxis es para
importar el predeterminado. Por supuesto hay que tener un
defecto en el otro módulo. Entonces si borro eso, ya no debería funcionar, me sale un error de sintaxis. El modelo solicitado no proporciona
una exportación con el nombre predeterminado. ¿ De acuerdo? Entonces no funciona. Por supuesto, tengo que marcar la exportación como predeterminada
para importarla como predeterminada. Entonces aquí puedes poner en
alguna, cualquier identificarte, te gustaría importar la exportación
por defecto aquí. Y puedo tener una segunda
exportación, que no es default. Por supuesto que sólo se puede
tener un único defecto. Pero puedo tener una segunda. Eso no es un problema. Entonces cómo hago esta importación
yo, claro que puedo. Derecho a importar declaraciones. El primero es
importar el predeterminado, y el segundo lo está importando. Hazlo también. Eso es completamente posible. Entonces yo lo llamo aquí, hazlo también. Y también debería funcionar. Creo que aquí no cambié
el registro de la consola. Entonces ahora hazlo y hazlo también. De acuerdo, así es como
usas la importación con
una exportación predeterminada. También puedes,
también puedes combinar esto. Por lo que la sintaxis también es posible. Así que si quieres importar
explícitamente en estas llaves, en estas llaves, también
puedes decir explícitamente, quiero importar por defecto, nombrelo importante para hacerlo. Debes proporcionar un
identificador, por supuesto, porque esto no funciona, porque necesitas un
identificador aquí. Para que puedas hacer esto. Por lo que en cuanto pongas un
defecto antes de la función, tendrás que considerar
esto aquí e importarlo como predeterminado como y
luego algún identificador. O puedes, por supuesto, usar la expresión mucho más corta e importarla así. Por supuesto que ahora es doble. Entonces debería comentar esto, o simplemente borro ese. Por defecto como importante para ello. Entonces eso está totalmente bien. Vamos a comprobarlo.
Deacuerdo, está funcionando. De acuerdo. Entonces así es como importas, y así es como exportas. Y en el siguiente video
hablaremos de importación dinámica, que es Yeah, es solo una función que puedes usar
para importar módulos. Y se puede utilizar para retrasar la carga de
un módulo, por ejemplo. Ese será el siguiente video
y esperamos verte ahí. Adiós.
3. Importación dinámica: Hola, Bienvenidos a este video. Aquí te explicaremos cómo
utilizar las importaciones dinámicas. Entonces digamos que queremos
cargar un módulo, pero no al principio del tiempo de
carga sobre la página. Pero queremos cargarlo después. Tal vez donde sea el componente de interfaz de usuario, que es bastante grande,
como muchas dependencias. Entonces no queremos
cargarlo al inicio. Al inicio
de la carga de la página. Queremos retrasar la
carga del módulo. A un punto posterior en el tiempo. El usuario navega, por ejemplo, a una nueva página. En este momento,
se
cargará el módulo y no al inicio. Podemos simular esto. Debido a que no tenemos interacción
del usuario aquí en nuestra página web en este momento, podemos simular esto usando un setTimeout con el
retardo de 1 segundo. Y aquí podemos
intentar cargar el módulo. Seamos ingenuos y probemos esto. Sólo borra esto aquí. Ya no necesitamos eso. Simplemente ponga la instrucción import
aquí en esta función. Para que eso no funcione. Ya está marcado como un error. Lo intentamos de todos modos. Y mira lo que dice el navegador. Error de sintaxis no detectado,
inspeccionar token inesperado. ¿ De acuerdo? Entonces este es el, el mensaje de error
que no es del todo, no del todo explicativo,
pero lo explicaré. Esta es la declaración static
import. Y estable significa que tiene que
estar en la parte superior del módulo. Por lo que debe ser aquí. Y tú también, normalmente, no se
te permite
hacer esto por ejemplo. Por lo que está funcionando aquí. Pero creo que en la
especificación, dice
que nada más debe venir antes de la primera declaración
de entrada. Nada en el medio. Por lo que debes poner
tus, todas tus entradas, tus importaciones estáticas en
la parte superior del archivo, en la parte superior del módulo. Entonces eso lo hemos intentado. Eso no funciona. Pero
hay otra posibilidad. Y es la función de importación, la función de importación dinámica, que también se llama Importar. Y es una función
para que podamos llamarla. Y podemos dar parámetros. Y los parámetros, por
supuesto, el de. Entonces de dónde sacar
ese módulo. Entonces tomamos el mismo camino, el mismo módulo que con una importación estática y comprobamos cuál
es el resultado. Entonces aquí no hay nada
impreso. Lo cual no es muy sorprendente porque aquí
no estamos haciendo nada. Entonces, si este módulo sólo está cargado, no
hay código para
ser ejecutado aquí. Sólo las declaraciones de funciones
para hacerlo y hacerlo también. Entonces eso parece funcionar. También podemos escribir un log de
consola aquí para ver que está realmente cargado
y realmente ejecutarlo aquí. Después de 1 segundo, mod one. Recarguemos la página. Después de 1 segundo vemos mod
one impreso aquí. De acuerdo, entonces eso parece funcionar. Pero bien, entonces ¿cómo obtenemos nuestro módulo o las
exportaciones del módulo? Podríamos probar algo así y poner
aquí una declaración del depurador para comprobarlo
en el depurador. De acuerdo, entonces se está
deteniendo aquí y
comprobamos lo que se devuelve
de la función de importación. De acuerdo, este no es el
módulo, como podemos ver. Es una promesa, una
supuesta promesa. Si no sabes
qué son las promesas, explicaré ahora mismo. Pero no es lo que podríamos
haber esperado aquí. Se podría pensar que, vale, tan importante es devolver el módulo, el módulo
importante. Pero no lo es. En cambio
devuelve una promesa. Y la promesa es algo
para tareas asíncronas. Por lo que la importación es cargar un
archivo desde el servidor, que es naturalmente asíncrono. Por lo que necesita llegar
al servidor. Y el servidor necesita
enviar el código del módulo. Y luego el motor JavaScript
necesita ejecutar el código. Entonces esto es algo que
bloquearía el motor JavaScript. Entonces es por esto que
es asíncrono. Y para procesos asíncronos, tenemos la API de promesa. Si no estás familiarizado
con la API de promesa, podemos comprobar qué es, cuáles son las propiedades
de la promesa devuelta. Ya sugiere
atrapar finalmente, y luego
lo importante se hace aquí. Entonces es un método sobre la promesa. Y se necesita una función. Y también, esta
función tiene un parámetro. En este caso, es el módulo. Por lo que debería llamar a esta promesa. Y así tenemos una promesa y
tenemos el método entonces. Y luego método obtiene una, se
puede llamar un
métodos de devolución de llamada, función de devolución de llamada. Y esta función de devolución de
llamada se llama si se resuelve la
promesa. Y en este caso la
promesa se resuelve cuando se cargó el módulo. Y el parámetro de la
función será el módulo. Podemos comprobar esto
si ponemos un depurador aquí y eliminamos éste, podemos comprobar qué es mod. Y si mi suposición es cierta, basta con recargar la página
nafta 1 segundo. De verdad estamos llegando a este depurador y
comprobamos módulo. Y sí, esto
parece un módulo. También se llama módulo aquí. Y tenemos la exportación por defecto aquí en la propiedad por defecto. Y tenemos que hacerlo a. Se llamó a la función predeterminada para hacerlo, pero es, puedes
encontrarla aquí en el predeterminado. Por lo que el nombre real no se usa como un nombre de propiedad
por defecto se usa aquí. Y la segunda exportación
fue hacerlo también, que es accesible con
el mismo nombre. Entonces con esto,
tenemos el módulo. Aquí, podemos
usarlo. Hagámoslo. Y sugerencias ya ahí, por defecto o hazlo también. Por lo que usamos primero el predeterminado. Y después podemos usar dos a dos y comprobar lo que
está impreso. Entonces tenemos mod one, que se imprime
al inicio del módulo, del módulo cargado. Entonces tenemos que
hacerlo y hacerlo también. Entonces eso es lo que hemos
esperado y está funcionando. Esta no es una sintaxis muy bonita que la puedas escribir
de una mejor manera. Y para eso podemos
usar el
mecanismo de espera asíncrono o la sintaxis de espera
asíncrona. Si tienes una promesa, un valor de retorno con una promesa como la que
tienes con la importación. Puedes llamar o
puedes escribir un peso. Y eso significa que estamos esperando. Estamos a la espera de la
resolución de la promesa. Entonces es lo mismo que aquí en
esta función de devolución de llamada. Excepto que no es
una función de devolución de llamada, sino que es una especie de
código normal mientras lo escribes. En situaciones normales, situaciones
sincrónicas, las únicas diferencias que
tenemos esta palabra clave esperan. Por lo que podría escribir algo así como mod
constante igual o se
le asigna una importación de peso. Entonces esto aguarda, espera la
resolución de la promesa. Y el valor de retorno. O el, en este caso, el módulo será el
valor de esta expresión. Y lo estoy asignando al mod. Y entonces puedo llamar a
hacerlo y por defecto. Y debido a, eso debería funcionar excepto que se
me olvidó algo. Y esa es la
palabra clave asíncrona por aquí. Entonces, si estás usando un peso, tienes que usar asíncrono en la función en la que estás
usando el peso. Estos dos van juntos. Si tienes un peso, entonces siempre usa asíncrono. Frente a la función. A excepción de que también puedes
usarlo en el nivel superior aquí. Y entonces no usas el asíncrono porque
no tienes una función. Pero en cuanto tengas
una función que
tenemos una porque estamos
usando setTimeout. Tienes que usar
el asíncrono antes. Antes de la función. También puedes usar una
función normal como esta. Y antes de la palabra clave function, hay
que usar async o antes de que la función de error 40 sea sintaxis
más corta para esto. Y si usas el asíncrono, también
puedes usar el aguardar. Await se puede utilizar
en todas partes donde
tengas un valor de retorno de una
promesa o tengas una promesa. Para que puedan esperar la
resolución de la promesa. También hay una función en
el navegador llamada fetch, y también está devolviendo
una promesa y también
puedes usar wait con eso. Por ejemplo, será
algo así. Espera y aquí
pondrías la URL. Bueno en realidad podemos usarlo. Podemos revisar mod one dot js. Podemos cargarlo como texto. Entonces vamos a comprobar cuál será la
respuesta. Esto no tiene nada
que ver con los módulos, pero de todos modos, tiene algo que ver con
las promesas y el peso. Entonces lo estoy mostrando
aquí la respuesta. La respuesta es un objeto de
respuesta. Para obtener los textos reales, necesitamos llamar a algo
en el objeto de respuesta. Y este texto. Y esto también es devolver
una promesa, como pueden ver. Por lo que ya
sabemos usar las promesas. Por lo que estoy firmando más textos con un peso, responde al texto. Dot text también está
devolviendo una promesa y estoy esperando la
resolución de esta promesa. Y luego obtendré el texto mod. Vamos a comprobarlo. Más texto. Sí, y luego tenemos nuestro
texto de mod one dot js. Entonces esta pequeña
excursión por promesas, que tenemos que usar aquí. Entonces, o usas puntos luego
con la función de devolución de llamada. Y esta
función de devolución de llamada se llama cada vez que
se resuelve la promesa. Que en este caso es cuando se cargó
el módulo. O se utiliza la
sintaxis mucho más agradable esperar importación. Y luego se
obtiene directamente la molécula. Y luego puedes usar el
módulo como si lo hicieras. Escribe un mod
de importación estática desde dot mod one, JS que será el mismo. Entonces en este caso mod
sería el mismo. Puedes llamar a default
o hacerlo también. Para que lo podamos probar aquí. Sí, entonces estoy recargando. Primero. Es escribir, hacerlo, hacerlo también con la importación
estática, y luego hacerlo y hacerlo
también con una importación dinámica. Importación estática, y
aquí, importación dinámica. Entonces si quieres cargar
un módulo justo a tiempo, por
ejemplo, si el
usuario navega a una nueva página y quieres
renderizar un nuevo control. Entonces puedes usar
la importación dinámica. Y devuelve una promesa. Y hay que esperar la promesa o usar
el punto entonces métodos. Y luego se obtiene el módulo. Al igual que si
usaras esta sintaxis.
4. Conclusión: Por lo que en este video,
concluiré el curso y resumiré lo que
les he mostrado sobre los módulos ES6. Hemos visto cómo
integrar módulos en HTML con una
etiqueta de script y un módulo de tipo. Entonces este fue nuestro primer
módulo aquí, js principal. Después hemos importado
el segundo módulo en nuestro primer módulo
a nuestro primer módulo. Y este es el segundo módulo. Aquí hemos exportado
dos funciones. Una es una
exportación por defecto y otra no. Y ya has visto cómo
importar todo el módulo, el módulo completo
con este asterisco. También hemos visto cómo
importar sólo exportaciones específicas. Entonces por ejemplo, aquí
importamos sólo lo hacemos dos. O también podríamos importar
default como lo hacemos. Y finalmente, hemos visto cómo usar la
función de entrada aquí, que se usa para
cargar dinámicamente módulos en tiempo de ejecución. Y hemos aprendido
a usar la
API de promesa y cómo usar las nuevas
palabras clave, un solo peso, para usar la función de importación
e inmediatamente obtener el módulo para que
podamos llamar a las
funciones exportadas aquí . Entonces espero que hayas
disfrutado del curso, y espero que ahora
puedas usar los
módulos ES6 con éxito. Y con un poco de confianza. Siéntete libre de consultar
mis otros cursos sobre desarrollo web
y JavaScript. Y buena suerte para
ti y adiós.
Stephan Haewß
