¿Cómo trabajar con EcmaScript6?

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:

npm init

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:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

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:

npm install --save-dev babel-cli babel-preset-latest

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:

npm install babel-preset-es2015 --save-dev

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

./node_modules/.bin/babel polygon.es6.js -o polygon.js

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

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Polygon = function Polygon(height, width) {
  _classCallCheck(this, Polygon);

  this.height = height;
  this.width = width;
};

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:

./node_modules/.bin/babel -w polygon.es6.js -o polygon.jsl