prisskreative
10/4/2017 - 5:35 PM

ES6

ES6

// Function
 
const TAX_RATE = 0.08;
 
function calculateFinalPurchaseAmount(amt) {
	// calculate the new amount with the tax
	amt = amt + (amt * TAX_RATE);
 
	// return the new amount
	return amt;
}
 
var amount = 99.99;
 
amount = calculateFinalPurchaseAmount( amount );
 
console.log( amount.toFixed( 2 ) );		// "107.99"
Primero, vamos a crear una carpeta llamada es6-tutorial en la ubicación que consideremos conveniente. Dentro de ella generaremos dos carpetas mas, una llamada src en la cual colocaremos nuestros archivos fuente con JavaScript ES6 y otro llamado build donde Babel colocara los archivos compilados a ES5.
 
Después vamos crear nuestro archivo package.json de node con el siguiente comando. Aquí, lo llenaremos con la información de cada uno de nosotros.
 
> npm init
A continuación, procederemos ahora si a instalar babel. El siguiente comando nos instalara la interfaz de consola de babel y un set de configuraciones preestablecidas con las características mas utilizadas de ES6/2015
 
> npm install --save-dev babel-cli babel-preset-es2015
Para mayor información acerca del preset, favor de ir a http://babeljs.io/docs/plugins/preset-es2015/
 
Luego, vamos crear un archivo .babelrc, aquí indicaremos que presets utilizaremos en nuestra configuracion. En nuestro caso solamente agregaremos el preset es2015
 
> echo '{ "presets": ["es2015"] }' > .babelrc
Finalmente, crearemos una tarea de npm para simplificar la compilacion de nuestro codigo. Agregaremos la siguiente linea a la seccion de “Scripts” del archivo package.json
 
 "build": "babel src -d build"
Listo, ya podemos probar nuestra configuracion para revisar que todo este funcionando correctamente.
 
Vamos a crear un archivo llamado app.js dentro de src que contenga una función arrow como esta:
 
const sum = (a, b) => a+b;
Ver Ejemplo de traspilación
 
Después, ejecutaremos en el terminal el comando:
 
> npm run build
y para finalizar, veremos como se crea un archivo llamado app.js en nuestra carpeta build con el siguiente contenido:
 
'use strict';
 
var sum = function sum(a, b) {
  return a + b;
};
Listo, asi de sencillo fue preparar un entorno básico de desarrollo para ES6 con compatibilidad para navegadores anteriores. Claro que babel puede ser utilizado con otras herramientas como gulp, grunt, webpack y otros para generar mejores flujos de trabajo.
 
Para mayor información sobre Babel y configuraciones mas avanzadas favor de ir a su página en la sección de Setup https://babeljs.io/docs/setup/#installation y Plugins.