Cómo configurar su entorno ES6 rápidamente

Como sabrá, los navegadores están comenzando a ponerse al día con ES6. Sin embargo, no todo funciona tan bien como se esperaba, y esto puede ser un problema lento y tedioso de resolver. Si algo sale mal, tratar de identificar si el problema está en el código o en el navegador no es un proceso fácil.

Pero no se preocupe, le mostraré cómo puede instalar y escribir rápidamente el código ES6 y, lo más importante, hacerlo compatible con todos los navegadores compatibles con ES5.

ES5 a ES6

Para escribir código ES6, necesitamos instalar algo que pueda compilarlo en ES5. Nosotros vamos a usar, Rollup. Compila pequeños fragmentos de código en algo más grande y complejo, como una biblioteca o aplicación. Esto le permite utilizar OOP (programación orientada a objetos) que hace que su código se vea más limpio, estructurado y modular, junto con otras funcionalidades útiles. Para aclarar, JS está orientado a objetos, pero no es un lenguaje orientado a objetos basado en clases como Java, C ++, C #, etc., hasta el lanzamiento de ES6.

De lo contrario, lo más cerca que puede llegar a OOP con respecto a incluir clases con ES5 es usar IIFE (Expresión de función inmediatamente invocada) o instalar bibliotecas externas. Pero, ¿por qué confiar en recursos externos cuando tiene un lenguaje central que admite el paradigma OOP? Muchos de los lenguajes de programación más utilizados ya lo admiten (como C ++, Java, C # y PHP).

¿Por qué ES6?

Personalmente, lo uso porque me permite organizar mi código en archivos separados, lo que hace que sea más fácil escalar y mantener el código.

Por ejemplo, en mi HTML, tengo uno scriptque se carga main.jsy main.js, dentro , cargo varios JSarchivos usando declaraciones importy export. En lugar de tener varios scripts en mi archivo HTML, solo necesito uno (menos código).

Prerrequisitos

  • Linux o macOS (basado en Debian)
  • NPM (administrador de paquetes) instalado
  • Conocimientos básicos de CLI

Paso uno: Instale el paquete acumulativo

Para usarlo Rollupdebemos instalarlo globalmente. Recuerde usar sudo. Esto le permite acceder a los Rollupcomandos en cualquier proyecto con el que trabaje.

Paso dos: estructura de archivos

Después de haber instalado Rollupa nivel mundial, el siguiente paso es configurar la estructura de carpetas y crear dos carpetas srcy destdentro de su proyecto. Además, cree index.html.

  • src → Archivos ES6 (donde escribirás el código)
  • dest → Genera un ES5 (versiones compiladas de ES6)

Tenga en cuenta que el bundle.jsarchivo se genera automáticamente cuando Rollupse ejecuta el comando. Hablaremos de esto más tarde.

Paso tres: cree un archivo de configuración

Cree un nuevo archivo y asígnele un nombre rollup.config.js. Luego agregue este código:

Asegúrese de que la ruta de origen inputy outputsea ​​correcta con la estructura de su carpeta y que este archivo esté ubicado en la carpeta principal.

Paso cuatro: cargue el archivo de secuencia de comandos en HTML

Estamos casi listos, pero primero debemos vincularnos al archivo fuente correcto en nuestra plantilla HTML. Esto cargará el archivo ES5 que se compila desde ES6.

Paso cinco: configurar archivos JS

Para verificar que el Rollupcomando funciona, necesitamos configurar una estructura OOP simple. Crearemos una car.jsclase, y default exporteso main.js.

Tenga en cuenta que este archivo exporta una nueva instancia de la car.jsclase, y esto permite acceder a los métodos directamente en lugar de escribir const car = new Car()en la main.jsclase.

Como soy un ingeniero de software vago, lidiar con algunos caracteres adicionales de código requiere mucho tiempo :)

A continuación, importe la car.jsclase main.jspara acceder al método type().

Paso seis: compile ES6 a ES5

Para ejecutar el archivo de configuración que hemos creado, ejecute este comando $ rollup -co $ rollup --config, ambos son iguales.

Después de ejecutar uno de los comandos, ábralo a index.htmltravés de un navegador, luego abra inspeccionar ( ctrl + shift + I) en el navegador y vaya a console. Si ve el texto "Tesla Model S", significa que todo funcionó correctamente.

Tenga en cuenta que cada vez que realice cambios con los archivos ES6, debe actualizarlos ejecutando el comando.

Opcional

Dado que ha instalado Rollupglobalmente, puede compilar ES6 sin necesidad de tener el archivo rollup.config.js. Hace exactamente lo mismo:

$ rollup src/main.js — o dest/bundle.js — f iife

Personalmente, recomendaría ejecutar $ rollup -ccomo se muestra en el paso seis, ya que se requiere menos código. Recuerde que debe tener el archivo rollup.config.js incluido al ejecutar este comando.

Si encuentra útil esta breve configuración de enfoque de instalación para ES6, comente y aplauda. Es buen karma.