harmony: 3. introducción a babel

Introducción al compilador de javaScript Babel.

Christian Schloe

archivado en: JavaScript / 14 enero, 2016 / taller:

Quizás tendría que haber empezado con esta entrada esta serie sobre ecmaScript 6, pero bueeeeno, más vale tarde que nunca. Decía en la primera entrada que existe un compilador llamado babel que «traduce» javaScript 6 a su versión 5, compatible con todos los navegadores actuales. Dicho de otra manera, es una manera de poder empezar a programar en harmony, que es formidable, hasta que termine de ser interpretado por los navegadores.

Para instalar babel se utiliza el npm de node. Abrimos la consola y preparamos un package.json escribiendo:

npm init

Nos pregunta una serie de cosas que otro día explico con más detalle, le vamos dando a enter y al final nos generará un archivo parecido a este.

{

"name": "babel-js",

"version": "1.0.0",

"description": "demo babel js",

"main": "index.html",

"author": "mmfilesi",

"license": "MIT"

}

Con todo listo, vamos ya sí con babel, que no conviene instalar de forma global:

npm install --save-dev babel-cli

El flag --sabe-dev sirve para decirle que incluya babel entre las dependencias de desarrollo (develop), de tal manera que luego se instale desde cualquier otro sitio con escribir npm install. De esta manera, en el package.json se escribirán nuevas líneas con la versión que hayamos instalado, que es siempre la última por defecto.

"devDependencies": {

"babel-cli": "^6.3.17"

}

Ahora para ejecutar babel tenemos dos opciones. Una es ir ejecutándolo por consola. Por ejemplo, si el código en bruto está en el directorio src y el transpilado, el final, está en lib, tendríamos que escribir algo así.

./node_modules/.bin/babel src -d lib

Otra, más cómoda, es añadir esa tarea entre los scripts del package.json:

...

"main": "index.html",

"scripts": {

"build": "babel src/ -d lib/"

},

"author": "mmfilesi",

"license": "MIT",

...

De esta manera, basta con escribir con consola esto para que se ponga en marcha.

npm run build

Es más cómodo, pero sigue siendo un poco pesado tener que escribir algo en la consola cada vez que escribamos una línea, así que mejor añadimos un watch, esto es, un observador que ejecute esa tarea cada vez que se guarda algo en la carpeta origen.

"build": "babel src/ -d lib/ --watch"

Mucho mejor ahora, pero seguimos teniendo un problema. Para que se entienda, vamos a preparar algo en ecma6 y lo guardamos en src/index.js, como este fragmento que vimos en la entrada anterior.

let mascota = "triceratops";

let cadena = `mi mascota es un ${mascota}`;

Cuando se compila ese fragmento, salvo por algún espacio, no hay diferencia entre el archivo e6 y el e5 y esto es porque no le hemos indicado a babel que queremos que traduzca el código a esa versión. Para eso hay que instalar un plugin:

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

Y además hay que indicarle que lo use en el package.json.

...

"author": "mmfilesi",

"license": "MIT",

"devDependencies": {

"babel-cli": "^6.3.17",

"babel-preset-es2015": "^6.3.13"

},

"babel": {

"presets":["es2015"]

}

...

Ahora cuando se traduce el código e6, sí que se convierte en código e5:

var mascota = "triceratops";

var cadena = "mi mascota es un " + mascota;

Pero podemos hacerlo aún mejor y es definir el flag --presets directamente en la sentencia del build del package.json.

"scripts": {

"build": "babel --presets es2015 src/ -d lib/ --watch"

},

Quedarían cosas por explicar, más plugins y maneras de precisar desde qué versión de ecmaScript debe traducirse el código, pero espero que como introducción con lo dicho baste para terminar de animarnos a empezar con harmony a la que surja una ocasión :P.

Adenda: babel y gulp

Explico esto a vuelapluma, pues doy por sentado que si estás leyendo estas líneas ya conoces gulp. sebmcksindresorhus han preparado un plugin para trabajar con gulp y babel. Se instala:

npm install gulp-babel --save-dev

Y se configura en el gulpfile.js:

const gulp = require('gulp');

const babel = require('gulp-babel');

gulp.task('default', () => {

return gulp.src('src/app.js')

.pipe(babel({

presets: ['es2015']

}))

.pipe(gulp.dest('dist'));

});

Existe también un plugin para grunt

|| Tags: , ,

valoración de los lectores sobre harmony: 3. introducción a babel

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*