Front-end
Instalacion
Para la ejecución de código de ECMAScript 6 en navegadores web que solo soporten a ECMAScript 5 (la mayoria de las navegadores web más populares/recientes) es necesario un transpilador.
El uso de un transpilador de ECMAScript permite tener a la mano las nuevas carácteristicas en el lenguaje de programación aún cuando nuestro entorno de ejecución (navegador web) no cuente con el soporte.
Por el momento se cuenta con babel-standalone para integrar a Babel al navegador web, sin la necesidad de usar a Node.js/Babel/Webpack/etc. Anteriormente se contaba con babel-browser pero este ha sido removido de Babel.
De acuerdo con el autor de babel-standalone,
Daniel Lo Nigro:
At this point, the best long-term solution is probably to use Webpack or Browserify, as those seem to be
the solutions most supported by the Babel team.
En mi opinión lo recomendable sería hacer uso de la edición Current de Node.js para el front-end. Lo anterior debido a la velocidad de actualizaciones de otras herramientas-librerías.
En este documento se aborda el uso de Babel y Webpack, junto con Node.js.
Instala nodenv, lo que permitirá administrar distintas versiones de Node.js de forma local, como usuario normal:
alumno@servidor:~ $ git clone https://github.com/nodenv/nodenv.git $HOME/.nodenv alumno@servidor:~ $ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc alumno@servidor:~ $ echo 'eval "$(nodenv init -)"' >> ~/.bashrcEl objetivo de
nodenves permitirnos cambiar entre las distintas versiones de Node.js que descarguemos de tal forma que podamos trabajar en distintos proyectos, cada uno asociado a una versión distinta de Node.js.Descarga la versión estable de Node.js en
$HOME/.nodenv/versionsdisponible en https://nodejs.org/en/download/stable/:alumno@servidor:~ $ cd $HOME/.nodenv/versions alumno@servidor:~/.nodenv/versions $ wget -c https://nodejs.org/dist/v6.2.1/node-v6.2.1-linux-x64.tar.xz alumno@servidor:~/.nodenv/versions $ tar xf node-v6.2.1-linux-x64.tar.xzLa versión usada en este documento ha sido la 6.2.1 y el archivo descargado
node-v6.2.1-linux-x64.tar.xz.Verifica la correcta instalación de Node.js en
nodenv:alumno@servidor:~ $ nodenv versions node-v6.2.1-linux-x64 alumno@servidor:~ $ nodenv shell node-v6.2.1-linux-x64 alumno@servidor:~ $ nodenv shell node-v6.2.1-linux-x64 alumno@servidor:~ $ node --version v6.2.1 alumno@servidor:~ $ npm --version 3.7.3 alumno@servidor:~ $ nodenv which node /home/alumno/.nodenv/versions/node-v6.2.1-linux-x64/bin/node alumno@servidor:~ $ nodenv which npm /home/alumno/.nodenv/versions/node-v6.2.1-linux-x64/bin/npm
Recomendación: actualiza los paquetes (incluyendo a npm) ya instalados en Node.js mediante el
comando npm update -g.
Documentación
node: Command Line Optionsnpm: CLI commands
Proyecto
Crea un directorio donde residirá tu proyecto, por ejemplo
$HOME/code/babel/babel01, configura la versión de Node.js a usar y actualiza los módulos globales de Node.js:alumno@servidor:~ $ mkdir -p $HOME/code/babel/babel01 alumno@servidor:~ $ cd $HOME/code/babel/babel01 alumno@servidor:~/code/babel/babel01 $ echo node-v6.2.1-linux-x64 > .node-version alumno@servidor:~/code/babel/babel01 $ nodenv version node-v6.2.1-linux-x64 (set by $HOME/code/babel/babel01/.node-version) alumno@servidor:~/code/babel/babel01 $ npm update -gEjecuta
npm initpara crear el archivopackage.json:alumno@servidor:~/code/babel/babel01 $ npm init --yesEdita el archivo
package.jsoncon el siguiente contenido:{ "name": "babel01", "version": "1.0.0", "description": "", "main": "index.js", "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-polyfill": "^6.9.1", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1", "copy-webpack-plugin": "^3.0.1" }, "scripts": { "build": "webpack", "watch": "webpack --watch", "start": "webpack-dev-server --hot --inline --port 8080", "test": "echo \"Error: no test specified\" && exit 1" }, "babel": { "presets": ["es2015"] } }Esto es para definir las dependencias en este proyecto así como algunas rutinas a ejecutar:
Instala los módulos indicados en
package.jsonde forma local:alumno@servidor:~/code/babel/babel01 $ npm installConfigura a Webpack creando el archivo
webpack.config.jscon el siguiente contenido:var path = require('path'); var webpack = require('webpack'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var dir_js = path.resolve(__dirname, 'js'); var dir_html = path.resolve(__dirname, 'html'); var dir_build = path.resolve(__dirname, 'build'); var dir_build_js = path.resolve(__dirname, 'build/js'); module.exports = { entry: path.resolve(dir_js, 'main.js'), output: { path: dir_build_js, filename: 'bundle.js' }, devServer: { contentBase: dir_build, outputPath: dir_build }, module: { loaders: [ { loader: 'babel-loader', test: dir_js, } ] }, plugins: [ new CopyWebpackPlugin([ { from: dir_html, to: dir_build } ]), new webpack.NoErrorsPlugin() ], stats: { colors: true }, devtool: 'source-map', };Crea los directorios
js,htmlybuild/js:alumno@servidor:~/code/babel/babel01 $ mkdir -p js html build/jsCrea el archivo
html/index.htmlcon el siguiente contenido:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>babel01</title> </head> <body> <div id="output"></div> <script src="js/bundle.js"></script> </body> </html>Crea el archivo
js/main.jscon el siguiente contenido:import 'babel-polyfill'; console.info("Hola mundo desde js/bundle.js");Como prueba, compila el proyecto:
alumno@servidor:~/code/babel/babel01 $ npm run buildSi todo ha salido bien, contarás con la siguiente estructura en
build:alumno@servidor:~/code/babel/babel01 $ tree build/ build/ ├── index.html └── js ├── bundle.js └── bundle.js.map 1 directory, 3 filesAccede a
build, ejecuta athttpdy accede a él con el navegador web:alumno@servidor:~/code/babel/babel01 $ cd build alumno@servidor:~/code/babel/babel01/build $ thttpd -D -p 8080 -nor -l -Si todo ha salido bien, obtendrás el mensaje Hola mundo desde js/bundle.js en la Consola de JavaScript.
Fuente: https://leanpub.com/setting-up-es6/read y https://github.com/rauschma/webpack-babel-demo