Header Ads Widget

Ticker

6/recent/ticker-posts

Módulos ES6 con Traceur.js

 

Pasemos ahora a aprender sobre los módulos ES6. Para esta lección, utilizaremos un software fantástico para el desarrollo moderno de JavaScript. Traceur.js de Google es un compilador de JavaScript que es muy fácil de usar y es genial si no quieres quedarte estancado por un sistema de compilación masivo. Todo lo que tienes que hacer es incluir Traceur en tu página y listo. También permite la carga del módulo ES. El objetivo de este tutorial es poder explorar completamente las características de los módulos ES6, sin tener que preocuparse por configurar y configurar herramientas excesivas. ¡Vamos a profundizar en los módulos ES6 ahora!


Patio de juegos del módulo ES6

Para comenzar, necesitamos un archivo HTML simple configurado para nosotros que incluya los archivos JavaScript Traceur.js que necesitamos para que podamos comenzar a probar nuestros módulos rápidamente. Este es el archivo HTML base que usaremos durante la duración de estos ejercicios.

La fuente de estos archivos JavaScript para incluir en su HTML se puede encontrar en la página de github de Traceur.js. Puede descargarlos manualmente o usar NPM para instalar el paquete por usted. Para este tutorial, usamos el comando de yarn add traceur, luego tomamos los archivos que necesitábamos desde allí. El base.jsarchivo es simplemente nuestro propio archivo JavaScript que es el principal punto de entrada de los módulos a nuestras páginas. Ya no tenemos que declarar múltiples etiquetas de script para incluir varios archivos JavaScript cuando usamos la carga de módulos.


Descripción general de Traceur

Entonces, ¿cuáles son estos archivos adicionales que incluimos en nuestra página de prueba? Estos archivos provienen del paquete Traceur. Traceur es un compilador / transpilador que le permite hacer uso de todas las funciones futuras de JavaScript que actualmente no son una oferta nativa en los navegadores web modernos. Además de poner a su disposición todas las funciones de ES6, Traceur también admite algunas funciones experimentales de ES.next. Si está familiarizado con el funcionamiento de BabelJS, Traceur comparte muchas de las mismas características. También puede probar Traceur en línea para ver cómo compila su código ES6.

demostración de transcodificación de google traceur


Usando System.import

Para nuestro primer ejemplo, simplemente demostraremos cómo System.import (); la sintaxis funciona. Usamos System.import ('./ base.js'); para importar el base.jsmódulo. Veámoslo en acción.

base.js

index.html

system_import_es6_example

Lo que esto muestra es que tan pronto como carga un módulo o archivo, utilizando un cargador de módulo ES6, cualquier código contenido en ese módulo se ejecuta inmediatamente. Un módulo se ejecuta solo una vez, la primera vez que se carga. Intentemos algunas cosas más.


Prueba de asignación de variables en módulos

base.js

index.html

módulo de asignación de variables es6


Usando la importación y exportación en ES6

Los comandos de importación y exportación facilitan un medio básico de comunicación entre módulos. Así es como se comparte información entre un módulo y otro. Este ejemplo básico aquí nos muestra exportando un valor del emulatormodule.jsmódulo y luego importando ese valor en el base.jsmódulo.


Exportación / importación de variables simples

Este es el ejemplo más básico de una exportación de un módulo a otro. Todo lo que estamos haciendo aquí es el uso de la exportación de mando en emulatormodule.jsexportar la emulatorvariable. En base.js, utilizamos un comando de importación para aceptar la exportación. Cuando cerramos la sesión del valor base.js, obtenemos el valor que esperamos.

base.js

emulatormodule.js

index.html

es6 importación y exportación


Exportación / importación de múltiples variables

No está limitado a la cantidad de valores que puede exportar y utilizar en un módulo. Aquí ampliamos el primer ejemplo y exportamos una gamevariable, así como la emulatorvariable.

base.js

emulatormodule.js

index.html

exportar varios valores desde un módulo es6


Usando una aspalabra clave para un alias en la importación

En este ejemplo, hemos cambiado un poco las cosas en el base.jsarchivo. Tenga en cuenta que importamos emulatory luego usamos la aspalabra clave para asignar ese valor GamecubeEntonces podemos usar Gamecubecomo variable en nuestro código en lugar de emulatorTenga en cuenta que una vez que asigne un alias a una variable, debe utilizar el nombre de alias y no el nombre original. Una vez que se establece el alias, el nombre original ahora no está definido .

base.js

emulatormodule.js

index.html

exportar varios valores desde un módulo es6


Usando una exportación predeterminada

Aquí importamos algo que no parece tener sentido. randomvalueno existe en emulatormodule.js, entonces, ¿cómo podemos importarlo? Además, no hay llaves alrededor del valor que queremos importar. Cuando omite las llaves usando una declaración de importación , ES6 buscará la exportación predeterminada del módulo desde el que está importando. En nuestro emulatormodule.jsmódulo, hemos establecido gamecomo exportación predeterminada. Cuando corremos el código, se puede ver que este es el valor que se importa en base.jsque randomvalueSonic Unleashed es la salida de la consola. Nota: Los módulos solo pueden tener una exportación predeterminada.

base.js

emulatormodule.js

index.html

es6 exportar predeterminado


Importar usando el operador comodín

Si tiene varios valores que desea exportar desde un módulo, puede utilizar el operador comodín en el módulo receptor para importarlos todos a la vez. Es una forma realmente agradable de acortar su código. Cuando exportamos los tres valores en este ejemplo aquí, todos se importan valuescomo un objeto. Luego podemos acceder a esos valores usando la notación de objetos.

base.js

emulatormodule.js

index.html

importación de comodines es6


Las exportaciones con nombre son de solo lectura

Como hemos estado exportando valores de nuestro módulo e importándolos en el módulo base, tenemos una buena idea de cómo funcionan. Sin embargo, una cosa a tener en cuenta es que la exportación con nombre es un valor de solo lectura una vez que está en el módulo base. Por ejemplo, cuando exportamos el gamecomo 'Sonic Unleashed', esa exportación con nombre no se puede mutar una vez en base.jsVeamos esto en acción.

base.js


Las propiedades de un objeto que se denominan exportaciones se pueden actualizar

La forma en que nos ocupamos de esto es exportar valores en un objeto si desea tener la capacidad de actualizarlos en un momento posterior. En este ejemplo usamos un objeto para exportar. Como podemos ver, values.gameesta vez se actualiza muy bien.

base.js

emulatormodule.js

index.html

las propiedades del objeto en las exportaciones con nombre se pueden actualizar


Exportar una función

También podemos exportar una función de un módulo a otro. Aquí configuramos una playGame()función en el emulatormodule.jsmódulo y la exportamos al base.jsmódulo.

base.js

emulatormodule.js

index.html

función de exportación es6


Exportación de múltiples funciones

Si necesita exportar más de una función, continúe. Exportaremos dos funciones aquí y veremos el resultado.

base.js

emulatormodule.js


Exportar una clase en ES6

También puede exportar una clase utilizando módulos ES6. Aquí tenemos nuestro base.jsmódulo estándar , pero hemos creado un nuevo módulo Games.jspara realizar nuestra clase de juegos. Sí, ahora podemos usar la palabra clave class en ES6 para parecerse más al estilo de programación que puede hacer en C #, Java o PHP. Exportar la clase es tan fácil como cualquier otro tipo de exportación que hemos realizado hasta ahora en este tutorial. Todo lo que debe hacer es colocar el comando de exportación justo antes de la palabra clave class, y su clase se exporta desde ese módulo. El comando de importación relacionado se base.jscomporta exactamente como esperabas.

base.js

Games.js


Importar un módulo con <script type = ”module”>

Cuando tiene una página web que incluye Traceur, también puede importar un módulo directamente en la página utilizando una etiqueta de secuencia de comandos y estableciendo su tipo en módulo . En este ejemplo agregamos bootstrap porque soy un fanático de hacer que las cosas se vean bien sin esfuerzo. Tomaremos nuestro ejemplo de una clase de Juegos y lo usaremos directamente en la página usando esa nueva sintaxis de <script type = ”module”>. Prácticamente todo funciona como en nuestro último ejemplo de una Gamesclase, pero esta vez tenemos un nuevo método en nuestra clase listgames()Este método llega al dom y crea una lista de nuestros juegos usando un estilo bootstrap para que se vea bien. Recuerde que en nuestro último ejemplo, todo lo que hicimos fue cerrar la sesión de los valores en la consola. Esto completa nuestros ejemplos para lograr un efecto agradable. Vea este concepto en acción aquí.

módulo de tipo de script es6


Resumen de módulos ES6 con Traceur.js

Esto concluye nuestra exploración de los módulos ES6 mientras usamos Traceur.js. Resulta que hay muchas otras formas de manejar el trabajo con módulos como Babel, Webpack, Rollup, Browserify, etc., etc. De alguna manera, casi se siente como en los días en que jQuery, Moo Tools, Scriptaculous y otros competían para la posición de la biblioteca de manipulación dom de facto. Ahora estamos viendo cómo evolucionarán las herramientas de ES6. Con el tiempo, es probable que estas herramientas se consoliden y surja un líder claro con una forma algo estandarizada de hacer las cosas. Hasta entonces, todos estamos experimentando a medida que el ecosistema de JavaScript avanza hacia el futuro.

Durante este tutorial, cubrimos la configuración de una caja de arena ES6 básica para probar la carga de nuestro módulo y repasamos una descripción general de alto nivel de Traceur y cómo puede usarlo. Luego echamos un vistazo a cómo cargar módulos como archivos, aprovechando la potencia de System.import (); sintaxis en nuestro archivo HTML principal. A partir de ahí, probamos una variedad de exportaciones e importaciones entre los módulos ES6, incluidas variables, funciones y clases. Finalmente lo terminamos con un ejemplo de cómo hacer uso de la sintaxis <script type = ”module”> para incrustar un módulo ES6 directamente en nuestra página.


Publicar un comentario

0 Comentarios