prisskreative
8/29/2017 - 4:06 AM

ES6 Javascript

ES6 Javascript

// 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.