Algunas de las características de ES6 todavía no son implementadas en los navegadores, pero si queremos iniciar hoy mismo a realizar las primeras pruebas o implementaciones, te recomiendo utilizar algún transpiler, que básicamente te convertirá la sintaxis de ES6 a ES5.

Aquí podemos encontrar una tabla con los navegadores e implementaciones que se han hecho sobre la especificación. Actualmente el transpiler que ha implementado más características es Babel, así que este transpiler usaremos para hacer algunos ejemplos del curso.

Instalación de Babel

Existen varias maneras de instalar esta herramientas, nosotros utilizaremos Gulp para facilitar el build, por lo tanto ejecutamos los siguientes comandos en la terminal.

$ mkdir curso-es6
$ cd course-es6
$ npm init
$ npm install --save gulp
$ npm install --save gulp-webserver
$ npm install --save babelify
$ npm install --save babel-preset-es2015
$ npm install --save browserify
$ npm install --save gulp-sourcemaps
$ npm install --save vinyl-source-stream
$ npm install --save vinyl-buffer
$ npm install --save watchify

1. En primer lugar creamos un directorio donde estaremos escribiendo todo el código de los tutoriales, este folder lo subiré a Github para beneficio de todos.
2. En segundo lugar nos posicionamos sobre el nuevo directorio e inicializamos el proyecto. El npm nos hará unas preguntas, puedes dejar las respuestas por default.
3. Instalamos gulp en el proyecto
4. Instalamos gulp-webserver, para poder usar un servidor web y servir los ejemplos que haremos.
5. Instalamos babelify, para transpilar de ES2015 a ES5, este paquete también permitirá generar el código transpilado listo para ser usado con browserify.
6. Instalamos babel-preset-es2015 para poder utilizar todas las características de ES2015, ya que babel también nos permite utilizar características que todavía no han sido aprobadas en el standard y que posiblemente sean incluidas en la siguiente versión de JavaScript, por esta razón le indicaremos a Babel que solo usaremos la versión 2015.
7. Instalamos browserify para poder importar/exportar paquetes usando la nueva sintaxis de ES6.
8. El resto de paquetes son dependencias que usaremos en nuestro build.

Ahora vamos a crear el gulpfile.js dentro de la carpeta que creamos anteriormente y le asignamos el siguiente contenido.

var gulp        = require('gulp');
var webserver   = require('gulp-webserver');
var babel       = require('babelify');
var browserify  = require('browserify');
var sourcemaps  = require('gulp-sourcemaps');
var source      = require('vinyl-source-stream');
var buffer      = require('vinyl-buffer');
var watchify    = require('watchify');

function compile(watch) {
  var bundler = watchify(browserify('./src/index.js', { debug: true })
                .transform(babel,{ presets: ["es2015"] }));

  function rebundle() {
    bundler.bundle()
      .on('error', function(err) { console.error(err); this.emit('end'); })
      .pipe(source('build.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./build'));
  }

  if (watch) {
    bundler.on('update', function() {
      console.log('-> bundling...');
      rebundle();
    });
  }

  rebundle();
}

gulp.task('build', function() { 
  return compile(); 
});

gulp.task('watch', function() { 
  return compile(true); 
});

gulp.task('copy', function() {
  gulp.src('src/**/*.html')
    .pipe(gulp.dest('./build'));
});

gulp.task('serve', function() {
    gulp.src('./')
        .pipe(webserver({
            livereload: true,
            directoryListing: true,
            open: true
        }));
});

gulp.task('default', ['copy','watch','serve']);

Vamos a crear todo el código de los tutoriales dentro del folder src, dentro del folder build se van a crear los archivo compilados de ES6 a ES5, Babel se encargará de esto. La idea es usar Babel para aquellas características que aún no son implementadas en los navegadores.

Instalando Scratch JS

Si se te complica utilizar la terminal, node, npm, gulp y todas las herramientas que hemos usado o simplemente no te apetece utilizarlas. La manera más sencilla de seguir el curso es utilizar Scratch JS, un plugin para Chrome que nos permite transpilar de ES6 a ES5 directamente desde el navegador.

Este plugin nos permitirá tener un pequeño editor de texto en el navegador donde podremos ir probando los ejemplos que haremos a lo largo del curso. Te recomiendo instalarlo si es que no deseas utilizar Node JS y Gulp.

Pues ya estamos listos para iniciar con este curso! Nos vemos hasta la próxima!

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso JavaScript Next, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!