Este pequeño repo, tiene la intenció de ayudar a integrar ECMA6 (o ES6) en Sails JS del lado del cliente, para poder sacarle la mayoría de provecho a las nuevas características del nuevo estandar de JavaScript. Esto será posible gracias a los presets de babel.
##Primero crearemos la tarea que transcribirá (transpila) los archivos de ES6 a ES5 ### Primero: Instala grunt-babel y los presets es2015 (se toma por hecho que ya está construido el servidor en SailsJS)npm install --save grunt-babel babel-preset-es2015
### Segundo:
Creamos en la ruta `task/config` un archivo llamado babel.js
### Tercero:
Antes que nada debemos de tener claro cuáles archivos o directorios serán los que se van a transpilar, tengamos encuenta que entre más tareas tenga que realizar nuestro servidor o más archivos tenga que procesar más se demorará en servir nuestros archivos al navegador. Por ejemplo (en mi caso) no quiero que la carpeta dependencies sea transcrita y solo la carpeta es6 (y sus archivos) sea transcrita, ya que generalmente en esta carpeta estarán las librerías o plugins que usaré por lo que no es código que tocaré.
Escribimos el siguiente código:
module.exports = function(grunt) {
grunt.config.set('babel', {
dev: {
options: {
presets:['es2015']
},
files: [{
expand: true,
cwd: 'assets/js/',
src: ['es6/**/*.js', '!dependencies/**/*'],
dest: '.tmp/public/js/',
ext: '.js'
}]
}
});
grunt.loadNpmTasks('grunt-babel');
};
Como se dan cuenta babel me enviará los archivos a la carpeta public, por lo que no no necesito que se copien estos archivos, entonces en el archivo task/config/copy.js quitamos las carpetas a transcribir.
Para este caso solo la pondré para develop
Vamos a task/register/compileAssets.js e insertamos antes de "copy:dev" "babel:dev", ya con esto cada vez que lancemos el servidor babel hará su trabajo, si necesitan que este trabaje con el servidor arriba y cada vez que guarden un archivo, copian "babel:dev" en syncAssets
- Si tienen curiosidad y no utilizan Jade, ni CoffeScript, ni otras tareas pueden quitarlas de los archivos que estan en la carpeta register (esto reducirá la carga de su servidor).
- Si quieren utilizar ES6 en SailsJS del lado del servidor deben instalar sails-hook-babel
npm i -S sails-hook-babel