Babel - un compilador

facebook-svg gplus-svg twitter-svg

ES6 funciona en todos los navegadores modernos, pero NO en en los más antiguos. He aquí una tabla detallada del soporte en los navegadores de ES6

Si queremos que ES6 funcione también en los navegadores antiguos tenemos que utilizar polyfills, fragmentos de código que implementan las nuevas características de ES6 en estos navegadores.

Donde encontrar los polyfills necesarios

Si solo queremos implementar algunos nuevos métodos de ES6, por ejemplo el método codePointAt() de string, podemos encontrar el polyfill necesario a MDN: String.prototype.codePointAt()

Babel - un compilador

Una opción mejor es utilizar un compilador como por ejemplo Babel, que "traduce" el código ES6 a ES5. Para entender que puede hacer Babel recomiendo utilizar Codepen donde podemos:
crear un nuevo pen,
escoger en Pen Settings "Babel" como JavaScript Preprocessor
escribir algo de código en ES6
y escoger la opción View Compiled JS que devuelve el código "traducido" a ES5.

Codepen y Babel

También la página de Babel permite probar el "traductor" de ES6.

Todo esto está muy bien como demostración, pero si tenemos que escribir mucho código, no hay nada mejor que instalar Babel en el propio ordenador.

Para poder instalar Babel tenemos que instalar primero Node. Esta es una tarea bastante sencilla aunque a veces podemos tener problemas. Si todavía no lo tiene instalado, hay muchísimos tutoriales que explican cómo hacerlo.

Después de instalar Node podemos instalar Babel

Cómo instalar Babel – por pasos

Babel aconseja instalar el compilador localmente, proyecto por proyecto. Para instalar Babel podemosseguir los siguientes pasos:

1. Creamos un directorio para el nuevo proyecto ( por ejemplo BabelTest )
2. Dentro del nuevo directorio creamos un archivo .js ( por ejemplo script.js ).
Es aquí es donde habrá que escribir el código ES6.
3. Abrimos el terminal ( command line  o CLI )
4. Cambiamos de directorio utilizando el comando cd.

cd /Users/. . . . . /BabelTest

Un pequeño truco: después de escribir el comando cd ( change directory ) podemos arrastrar el directorio directamente en el terminal para recuperar la dirección de este.

5. Iniciamos el npm ( node package manager o el gestor de paquetes de node ).

npm init

Esto genera un nuevo package.json en el directorio BabelTest. El proceso dura unos cuantos segundos, tiempo en el cual tenemos que contestar algunas preguntas o simplemente dar a enter para escoger los valores por defecto.

El aspecto del nuevo package.json generado es algo así:

  {
    "name": "babeltest",
    "version": "1.0.0",
    "description": "",
    "main": "script.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
  }

6. Ahora podemos abrir este archivo y modificarlo:

{
    "name": " babeltest ",
    "version": "1.0.0",
    "description": "",
    "main": "script.js",
    "scripts": {
      "babel": "babel script.js --watch --out-file script-compiled.js"
    },
    "author": "",
    "license": "ISC"
  }

En este caso queremos escribir el código ES6 en el script.js, y queremos que el código compilado aparezca en el script-compiled.js. O sea: script-compiled.js es el nombre del fichero de salida.

También necesitamos utilizar algunos indicadores ( flags ):
--watch: utilizado para compilar el script.js cada vez que este cambia.
--out-file el javascript compilado aparece en un fichero de salida: script-compiled.js en este caso.

Pero estos no son los únicos indicadores que podemos utilizar. Puede leer más aquí

A continuación podemos instalar Babel. Para esto escribimos el siguiente comando en el terminal:

npm install --save-dev babel-cli

Después de darle a enter la instalación empieza y dura unos cuantos segundos. Cuando la instalación acaba, el directorio BabelTest tiene la siguiente estructura:
- Una carpeta node_modules y tres ficheros:
- package-lock.json
- package.json
- script.js

El package.json también ha cambiado:

{
    "name": " babeltest ",
    "version": "1.0.0",
    "description": "",
    "main": "script.js",
    "scripts": {
      "babel": "babel script.js --watch --out-file script-compiled.js"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
       "babel-cli": "^6.26.0"
     }
  }
En este caso la versión de babel instalada es 6.26.0, pero esto cambiará en unas cuantas semanas.

8. A continuación tenemos que decidir que necesitamos: o sea los plugins necesarios para transformar el código ES6 en ES5. Pero hay una opción mejor: utilizar presets: o sea paquetes de plugins, por ejemplo es2015 ( este es un clásico ).

Un preset todavía mejor es el env preset que detecta automáticamente los plugins necesarios.

Para instalar este preset tenemos que modificar de nuevo el package.json de esta manera:

{
    "name": " babeltest ",
    "version": "1.0.0",
    "description": "",
    "main": "script.js",
    "scripts": {
      "babel": "babel script.js --watch --out-file script-compiled.js"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-cli": "^6.26.0"
    },
     "babel": {
      "presets": [
         ["env", {
           "targets": {
             "browsers": ["last 2 versions", "safari >= 7"]
           }
         }]
       ]
     }
  }

Puede encontrar este ejemplo aquí: Preset env

El código que acabamos de añadir al package.json dice que queremos utilizar el preset env, y que el JavaScript compilado funcione en las ultimas dos versiones de cada navegador ( "last 2 versions" ), y en las versiones de Safari >= 7.

Ahora podemos volver al terminal para instalar el preset env:

npm install babel-preset-env --save-dev

La instalación dura unos cuantos segundos.

9. Si todo ha ido bien, podemos ejecutar Babel escribiendo el siguiente comando en el terminal:

npm run babel

Esto crea un nuevo fichero js: script-compiled.js en este caso. Ahora al modificar el script.js, Babel lo compila automáticamente en el script-compiled.js