EcmaScript6, también conocido como Ecmascript2015 o ES2015, es el próximo standard de Javascript que, entre sus principales novedades, permite trabajar con clases, creación de constantes, interpolación de strings, entre muchas otras cosas más (http://es6-features.org/#Collation).

El problema de la portabilidad

En la actualidad la mayoría de los navegadores aun no soporta nativamente esta última versión de Javascript, por lo que para poder correr nuestros scripts en los navegadores primero los tendremos que transformar a una versión anterior.

Portando EcmaScript6 a EcmaScript5

Para resolver este problema existen herramientas que pueden transformar todo un código creado en EcmaScript6 a EcmaScript5. La más utilizada y la que aplicaremos en este tutorial se llama Babel.

Setup inicial

Crearemos una carpeta donde realizaremos la primera prueba y dentro de esta carpeta inicializaremos npm:

y dejaremos todas las opciones por defecto.

Un proyecto básico

Crearemos un proyecto chico en ES6 para transformar a ES5. Para eso crearemos el archivo polygon.es6.js en la raíz del proyecto y dentro de este crearemos una clase:

Babel

Instalando Babel

Para instalar Babel utilizaremos npm. La recomendación oficial es intalar la biblioteca Babel localmente para evitar conflictos entre diversos proyectos al actualizar.

Para instalarlo localmente dentro de nuestra carpeta de proyecto con ES6 escribiremos la siguiente línea:

Babel es una herramienta que permite diversos tipos de transformaciones que se realizan a través de presets. Para poder convertir de ES6 a ES5 ocuparemos el preset es2015, que también debemos intalar:

Luego en la raíz del proyecto utilizaremos Babel para transformarlo:

El archivo resultante es polygon.js, dentro del cual veremos el código compatible con ES5.

Y con esto ya estamos listos para poder a desarrolar un proyecto en EcmaScript6

Bonus: Transformando el archivo en tiempo real

Gracias al parámetro -w de Babel podemos hacer un watch del archivo, de modo de que cada vez que se guarde se genere automáticamente el output. Eso lo podemos hacer con:

Share Button

Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.