ES2015

ES2015 (anciennement ES6) est un pour le langage JavaScript. Il apporte de nouvelles fonctionnalités et des modèles qui nécessitaient beaucoup de code récurrent dans ES5. Ce comprend des classes, des fonctions fléchées et des modules. Dans cet épisode, nous abordons les outils que nous utilisons pour tirer pleinement parti d'ES2015 lors de la création d'applications Web JavaScript.

Transpilation avec Babel

Même si les moteurs JavaScript progression dans la mise en œuvre d'ES2015 en natif, il y a un piège. Pour utiliser l'ensemble des fonctionnalités Aujourd'hui, vous devez convertir votre code en ES5 interprétés par les navigateurs actuels. Heureusement, des outils comme Babel existent ce processus à côté de la simplicité.

Utiliser Babel dans votre processus de compilation

Babel vous permet d'utiliser du code JavaScript écrit avec ES2015 et le transpile en ES5 afin qu'il puisse fonctionner dans les navigateurs qui ne prennent pas en charge ces fonctionnalités aujourd'hui. Ajouter Babel à votre processus de compilation peut être faire comme ceci.

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 seule caractéristique que Babel ne peut pas transposer est les modules. Les modules dans ES6 vous permettent créer des classes et exporter / importer des classes entre des fichiers. Pour transpiler des modules transmettre votre code JavaScript Browserify, qui fusionne les puis les transmettre via Babelify (version de Babel pouvant gérer la sortie 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/'));
});

Plusieurs fichiers JavaScript

L'exemple ci-dessus exige que vous définissiez un fichier spécifique, qui peut devenir un peu trop lourd, Matt effectue les opérations suivantes dans Gulp pour rechercher et transpiler des fichiers se terminant par .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();
});

Linting et contrôle du style

Il existe peu d'options pour effectuer le linting de votre code afin d'identifier les problèmes potentiels et le style. de conformité.

JSHint et JSCS

JSHint et JSCS sont les méthodes les outils utilisés pour le contrôle de style JavaScript d'aujourd'hui.

JSHint signale les éventuels problèmes de votre code et signale ces modèles est généralement considérée comme une mauvaise pratique.

JSCS examinera le style de votre code, y compris pour s'assurer seuls les tabulations ou les espaces sont utilisés et les espaces sont placés à des endroits cohérents.

Pour utiliser JSHint et JSCS avec le code ES2015, vous devez ajouter "esnext": true à votre Fichiers .jshintrc et .jscsrc

ESLint

ESLint est une alternative à l'outil lint et au vérificateur de style à la fois. Cet outil génère beaucoup de vapeur et offre des fonctionnalités intéressantes par rapport à JSHint comme indiquer les environnements pour lesquels le code JavaScript est écrit. définir le niveau d'erreur / d'avertissement pour des problèmes spécifiques.

Entièrement personnalisable, ESLint fournit des règles d'analyse lint personnalisées permet au conducteur de savoir si les options peuvent être désactivées ou atténuées via son de configuration. De plus, si vous utilisez React, ESLint fonctionne également avec JSX

Configurer ESLint dans votre processus de compilation n'est pas non plus trop difficile.

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...
});

L'équipe Babel gère babel-estlint, un outil qui vous permet d'exécuter le lint sur un code Babel valide à l'aide d'ESLint. Alors qu'ESLint prend en charge les analyseurs personnalisés, une partie de la syntaxe acceptée par Babel n'est pas directement pris en charge par ESLint. Il s'agit donc d'une autre option si vous avez besoin d'encore plus la flexibilité. Pour configurer cette fonctionnalité, personnalisez la section parser de votre Fichier .eslintrc:

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

Dan Abramov a rédigé un excellent résumé sur la configuration d'ESLint et de babel-eslint dans Lint Comme 2015. Il y a aussi explique comment intégrer SublimeLinter-eslint dans votre workflow pour la prise en charge du linting ES2015 dans Sublime Text.

Que devez-vous utiliser ? Essayez-les et limitez-vous à ce qui vous convient le mieux.

Mise en surbrillance de la syntaxe ES2015

La syntaxe de votre code ES2015 doit bien sûr être mise en surbrillance. Mer d'utiliser babel-sublime, qui peut être installé depuis le contrôle des packages. Lors de la configuration, nous vous recommandons de le définir comme paramètre par défaut pour tous les fichiers sur lesquels vous devez la mise en surbrillance. Il s'agira bien sûr de JavaScript, mais peut couvrent également JSX si vous utilisez React.

Documenter ES2015

Nous nous sommes toujours appuyés beaucoup sur JSDoc pour documenter notre code JavaScript. Malheureusement, il existe des problèmes en suspens concernant la compatibilité avec ES2015 (qui doivent être traités dans le document JSDoc 3). Cependant, il existe de plus en plus d'alternatives disponibles en attendant que le problème soit résolu. ESDoc en fait partie, et Jonathan Creamer a récemment publié un résumé le concernant.

Créer des fichiers Gulp.js avec Babel

Si vous utilisez Gulp pour votre processus de compilation, vous pouvez désormais créées à l'aide d'une syntaxe compatible avec Babel. C'est ce que nous allons faire dans Web Starter Coffret et sa configuration est relativement simple. En utilisant une version récente de Gulp CLI Gulp, renommez simplement votre gulpfile.js en gulpfile.babel.js pour que Gulp d'interpréter et de transpiler votre fichier gulpfile ES2015 automatiquement à l'aide de Babel.

Fonctionnalités ES2015 préférées

Modules

Les modules permettent d'exporter des valeurs, des fonctions et des classes à partir d'un fichier tel que afin de pouvoir les importer dans un autre fichier.

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?');
  }
}

Ce site propose d'excellents exemples et des explications Modules.

Chaînes de modèle

Les chaînes de modèle vous permettent de remplacer le port d'une chaîne par une variable.

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

// => "Yo, Brendan!"

L'avantage des chaînes de modèle est que la substitution est un code JavaScript ce qui signifie que vous pouvez utiliser des fonctions ou des expressions intégrées.

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.

Pour en savoir plus, consultez cet article de blog très utile Addy.

Littéraux d'objet abrégés

Les littéraux d'objet vous évitent d'avoir à définir la clé et la valeur lorsque un objet, si la variable a le même nom que la clé que vous souhaitez d'un objet.

Signification:

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

Devient ceci:

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

Noms de propriétés calculés

Cette fonctionnalité d'ES2015 vous permet de créer des noms de propriétés de manière dynamique . Mozilla Docs est une excellente source d'informations. exemple.

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

Fonctions des flèches grasses

Les fonctions fléchées "Fat" vous permettent d'écrire des fonctions en abrégé où:

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

Devient ceci:

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

En plus d'avoir une syntaxe plus courte, l'utilisation de la grosse flèche est que la portée de l'objet est la même que l'énoncé englobant. Cela signifie que vous n'avez pas besoin d'appeler .bind(this) sur votre fonction ou crée une variable = this.

Il y a beaucoup plus d'exemples MDN

Dépôt d'outils ES6 d'Addy

Addy a tenu une liste des outils ES2015 et si les outils ci-dessus ne le sont pas Si vous utilisez Grunt au lieu de Gulp, par exemple, une réponse pour vous.

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

Le contenu ci-dessus inclut également des liens vers d'autres outils Babel qui peuvent vous aider pendant les tests unitaires et au-delà.

Livres à lire

Il existe deux livres que vous pouvez consulter sans frais en ligne pour en savoir plus sur ES2015. Comprendre ECMAScript 6 écrit par Nicholas C. Zakas et Exploring ES6 écrit par Dr Axel Rauschmayer.

Tour de Babel

Si vous souhaitez apprendre les fonctionnalités ES2015 dans votre ligne de commande, tour-de-babel offre une une série d'exercices qui pourraient vous intéresser. Elles suivent toutes en utilisant Babel.

Autres ressources pouvant vous intéresser: