En este tutorial abordaremos el tema de como trabajar con ES6 (Ecmascript 2015) directamente en Rails y dejar que Sprocket se haga cargo de transformar automáticamente los archivos javascript a ES5, el cual es compatible con la mayoría de los navegadores.
Si no utilizas Rails pero quieres trabajar de todas formas con EcmaScript 6 puedes seguir este tutorial.
Para integrar Es6 primero necesitamos actualizar Sprocket a la versión 4.0, la cuál todavía está en beta.La razón por la que tenemos que actualizar es que esta última versión trae soporte para Babel, y utilizando la gema babel-transpiler podemos hacer el proceso de transpiración (convertir de un lenguaje a otro) los archivos de ES6 a ES5.
Actualizando Sprocket
Entonces a nuestro archivo Gemfile agregaremos:
gem 'sprockets', :git => "[email protected]:rails/sprockets.git", :tag => "v4.0.0.beta3"
gem 'babel-transpiler'
bundle update sprockets
bundle
Después dentro de nuestra carpeta app/assets/javascripts agregaremos un archivo llamado test.es6, y dentro de el agregaremos un simple código de ES6.
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
let p = new Polygon(2,3);
alert(p.width);
Al cargar alguna página dentro de nuestro sitio podremos ver el mensaje de alerta, y al inspeccionar el código podremos ver que se encuentra en ES5, también si probamos precompilando los assets podremos ver que el código final generado se encuentra en ES5.
Gonzalo Sánchez
Artículos relacionados
1 Comentario
Deja una respuesta
Recibe los artículos más leidos y beneficios especiales de nuestra academia
Empieza a trabajar en los roles digitales mejor pagados
Fórmate de manera práctica, e intensiva, con sesiones en vivo de forma flexible y efectiva. Te acompañamos desde que partes hasta que encuentras trabajo.
Con estas gemas puedo instalar librerías de npm y usarlas con un require(«lo que sea») en rails? o tocaría hacer más pasos como he visto en otros tutoriales… es que no me queda claro si el archivo compilado ES5 contendría en su interior todo el código que se llama con el require(«»)… gracias…