ES2015

ES2015 (formalmente ES6) es una un paso fantástico para el lenguaje JavaScript. Ofrece nuevas funciones y para obtener patrones que requerían una cantidad considerable de código estándar en ES5. Esta incluye clases, funciones de flecha y módulos. En este episodio, abordamos las herramientas usamos para aprovechar ES2015 al máximo en el desarrollo de apps web con JavaScript.

Transpilación con Babel

Si bien los motores de JavaScript están mejorando progreso en la implementación de ES2015 de forma nativa, hay una única trampa. Para utilizar el conjunto completo de funciones hoy, tendrás que transpilar tu código de nuevo a ES5 para que se pueda interpretadas por los navegadores actuales. Por suerte, existen herramientas como Babel que hacen que este proceso casi indoloro.

Cómo usar Babel en tu proceso de compilación

Babel te permite usar JavaScript escrito con ES2015 y lo transpila de nuevo a ES5 para que pueda funcionar en navegadores actualmente no admiten estas funciones. Agregar Babel a tu proceso de compilación puede ser de esa manera.

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

La única característica que Babel no puede transpilar son los Módulos. Los módulos en ES6 te permiten crear clases y exportarlas o importarlas entre archivos. Para transpilar módulos pasar el código JavaScript por Browserify, que combinará las archivos y, luego, pásalos por Babelify (una versión de Babel que puede manejar el resultado de Browserify).

var babelify = require('babelify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');

gulp.task('babelify', function() {
  browserify({ entries: './src.js', debug: true })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist/js/'));
});

Varios archivos JavaScript

El ejemplo anterior requiere que definas un archivo específico, que se puede convertir Matt hace lo siguiente en Gulp para buscar y transpilar archivos que termina en .es6.js.

var config = {
  src: 'src/scripts',
  dest: 'dist/scripts'
};
var es6FileGlob = '/**/*.es6.js';

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var glob = require('glob');
var path = require('path');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

// Takes an array of bundles to run through browserify and babelify
function transpileES6Modules(browserifyFileEntries) {
  browserifyFileEntries.forEach(function(fileEntry) {
    var browserifyBundle = browserify({
        entries: [fileEntry.srcPath]
      })
      .transform(babelify);

    var finalStream = browserifyBundle.bundle()
      .on('log', plugins.util.log.bind(plugins.util, 'Browserify Log'))
      .on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
      .pipe(source(fileEntry.outputFilename));

    return finalStream.pipe(gulp.dest(fileEntry.dest));
  });
}

// This takes a source path and finds all files ending
// with .es6.js and creates the bundles to run through browserify
// and babelify
function handleES6Scripts(srcPath) {
  var browserifyFileEntries = [];

  var es6Filepaths = glob.sync(srcPath + es6FileGlob);
  es6Filepaths.forEach(function(filepath) {
    var filename = path.basename(filepath);
    var directoryOfFile = path.dirname(filepath);
    var relativeDirectory = path.relative(
      srcPath,
      directoryOfFile);

    // Create an object and add to the browserify bundle array
    browserifyFileEntries.push({
      srcPath: './' + filepath,
      outputFilename: filename,
      dest: path.join(config.dest, relativeDirectory)
    });
  });

  transpileES6Modules(browserifyFileEntries);
}

gulp.task('scripts:es6', ['scripts:lint'], function(cb) {
  handleES6Scripts(config.src);

  cb();
});

Comprobaciones de lint y estilo

Existen algunas opciones cuando realizas el análisis con lint de tu código para detectar posibles problemas y estilos y cumplimiento.

JSHint y JSCS

JSHint y JSCS son los más comunes que se usan para la comprobación de estilo de JavaScript actual.

JSHint destacará cualquier posible problema en tu código y destacará cualquier patrones generalmente considerados como una mala práctica.

JSCS analizará el estilo de tu código, lo que incluye garantizar solo se usan tabulaciones o espacios, y los espacios se colocan en lugares coherentes.

Para usar JSHint y JSCS en el código ES2015, debes agregar "esnext": true a tu Archivos .jshintrc y .jscsrc

ESLint

ESLint es un linter y un verificador de estilo alternativos. Esta herramienta se vuelve muy popular y tiene algunas funciones interesantes en comparación con JSHint. como poder indicar los entornos para los que está escrito JavaScript y establecer el nivel de error o advertencia para problemas específicos.

ESLint se puede personalizar por completo y proporciona reglas de análisis con lint personalizadas donde te encuentres en el asiento del conductor para decidir si se pueden desactivar o atenuar las opciones mediante su de configuración de Terraform. Además, si usas React, ESLint también funciona con JSX.

Configurar ESLint en tu proceso de compilación tampoco es demasiado difícil.

var gulp = require('gulp'),
    eslint = require('gulp-eslint');

gulp.task('lint', function () {
    return gulp.src(['js/**/*.js'])
        // eslint() attaches the lint output to the eslint property
        // of the file object so it can be used by other modules.
        .pipe(eslint())
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failOnError last.
        .pipe(eslint.failOnError());
});

gulp.task('default', ['lint'], function () {
    // This will only run if the lint task is successful...
});

El equipo de Babel mantiene babel-estlint. una herramienta que permite analizar con lint cualquier código Babel válido usando ESLint. Mientras que ESLint admite analizadores personalizados, parte de la sintaxis que admite Babel no está directamente compatible con ESLint, así que es otra opción si necesitas aún más y flexibilidad. Para configurarlo, personaliza la sección parser de tu Archivo .eslintrc:

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

Dan Abramov tiene un excelente artículo sobre cómo configurar ESLint y Babel-eslint en Lint. Como si fuera 2015. También abarca cómo integrar SublimeLinter-eslint en flujo de trabajo para admitir el análisis con lint ES2015 en Sublime Text.

¿Qué plataforma deberías usar? Pruébalos y elige la que mejor funcione para ti.

Resaltado de sintaxis de ES2015

Por supuesto, querrás que tu código ES2015 se destaque correctamente sintácticamente. Mié disfrutas usar babel-sublime, que puede instalarse desde Package Control. Cuando configures la app, te recomendamos que la establezcas como la opción predeterminada para todos los archivos. necesitas destacar para trabajar. Por supuesto, esto incluirá JS, pero puede también cubriremos JSX si se usa React.

Documentación de ES2015

Históricamente, hemos confiado bastante en JSDoc para documentar nuestro código JavaScript. Lamentablemente, tiene problemas abiertos para admitir ES2015 (que se deberían solucionar en el JSDoc 3). Sin embargo, hay una cantidad cada vez mayor de alternativas disponibles mientras esperamos a que se ponga al día. ESDoc es una de esas opciones, y Jonathan Creamer tiene un resumen reciente que vale la pena leer.

Crea archivos Gulp.js con Babel

Si usas Gulp para tu proceso de compilación, usando cualquier sintaxis compatible con Babel. Lo hacemos en Web Starter Kit y su configuración es relativamente trivial. Usando una versión reciente de Gulp y la En la CLI de Gulp, simplemente cambia el nombre de tu gulpfile.js a gulpfile.babel.js. Gulp interpretar y transpilar tu gulpfile ES2015 automáticamente con Babel.

Funciones favoritas de ES2015

Módulos

Los módulos son una forma de exportar valores, funciones y clases desde un archivo, como que podrás importar a otro archivo.

export function exampleFunction() {
  console.log('I\'m an example. #TrueStory');
}



import { exampleFunction } from './example-function';
import BaseController from './base-controller';

export default class ExampleController extends BaseController {
  constructor() {
    super();

    exampleFunction();
  }

  doSomething() {
    console.log('What should I do? Change the DOM? Print a dancing shark to the console?');
  }
}

Este sitio tiene excelentes ejemplos y explicaciones sobre Módulos.

Cadenas de plantillas

Las cadenas de plantilla te permiten reemplazar el puerto de una cadena por una variable.

// Simple string substitution
var name = "Brendan";
console.log('Yo, ${name}!');

// => "Yo, Brendan!"

Lo bueno de las cadenas de plantillas es que la sustitución es un elemento ejecución, lo que significa que puedes usar funciones o expresiones intercaladas.

var a = 10;
var b = 10;
console.log('a+b = ${a+b}.');
//=> a+b = 20.

function fn() { return "I am a result. Rarr"; }
console.log('foo ${fn()} bar');
//=> foo I am a result. Rarr bar.

Obtén más información en esta útil entrada de blog Addy.

Literales de objeto de atajo

Los literales de objeto te permiten evitar tener que definir la clave y el valor cuando creando un objeto, si la variable tiene el mismo nombre que la clave que quieres que que tenga.

Significado:

function createObject(name, data) {
  return { name: name, data: data };
}

Se convierte en esto:

function createObject(name, data) {
  return { name, data };
}

Nombres de propiedades procesados

Esta función de ES2015 permite crear nombres de propiedades dinámicamente en una . Los documentos de Mozilla son una gran fuente de información y tienen esta ejemplo.

var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

Funciones de flecha gorda

Las funciones de flecha gorda te permiten escribir funciones abreviadas en los siguientes casos:

button.addEventListener('click', function(event) {
  console.log('The button has received a click', event);
});

Se convierte en esto:

button.addEventListener('click', (event) => {
  console.log('The button has received a click', event);
});

Además de tener una sintaxis más corta, una excelente función del uso de funciones es que el alcance del objeto es el mismo que el de la declaración contenedora. Esto significa que no necesitas llamar a .bind(this) en tu función o creemos una variable que equivale a esto.

Hay muchos más ejemplos en MDN.

Repositorio de herramientas ES6 de Addy

Addy ha estado ocupado llevando una lista de herramientas de ES2015 y, en caso de que las anteriores no lo estén para ti, quizás uses Grunt en lugar de Gulp, entonces esto podría una respuesta para ti.

https://github.com/addyosmani/es6-tools

En el ejemplo anterior, también se incluyen vínculos a herramientas de Babel adicionales que pueden ayudarte durante la prueba de unidades y mucho más.

Libros para leer

Hay dos libros que puedes consultar gratis en línea para obtener más información. ES2015. Información sobre ECMAScript 6 escrito por Nicholas C. Zakas y explora ES6 escrito por Dr. Axel Rauschmayer.

Torre de Babel

Si te interesa aprender funciones de ES2015 en tu línea de comandos, torre-de-babel ofrece la con una serie de ejercicios que podrían interesarte. Todos ellos explican cómo usar Babel

Otros recursos que pueden interesarte: