ES2015

ES2015 (früher ES6) ist ein fantastischer Schritt nach vorn für die JavaScript-Sprache. Es bietet neue Funktionen und für Muster, die in ES5 viel Textbaustein erforderlich waren. Dieses umfasst Klassen, Pfeilfunktionen und Module. In dieser Folge stellen wir Tools vor, mit denen wir ES2015 beim Erstellen von JavaScript-Webanwendungen optimal nutzen können.

Transpilation mit Babel

JavaScript-Engines machen zwar große Fortschritte bei der nativen Implementierung von ES2015-Funktionen, aber es gibt einen Haken. Wenn Sie alle Funktionen nutzen möchten, müssen Sie Ihren Code zurück in ES5 transpilieren, damit er von aktuellen Browsern interpretiert werden kann. Zum Glück gibt es Tools wie Babel, die diesen Prozess nahezu problemlos machen.

Babel im Erstellungsprozess verwenden

Mit Babel können Sie JavaScript, das mit ES2015-Funktionen geschrieben wurde, zurück in ES5 transpilieren, damit es in Browsern funktioniert, die diese Funktionen derzeit nicht unterstützen. So fügen Sie Babel Ihrem Build-Prozess hinzu:

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

Die einzige Funktion, die Babel nicht übertragen kann, sind Module. Mit den Modulen in ES6 können Sie Klassen erstellen und Klassen zwischen Dateien exportieren / importieren. Wenn Sie Module transpilieren möchten, geben Sie Ihr JavaScript an Browserify weiter. Dieser Dienst führt die Dateien zusammen und leitet sie dann an Babelify weiter, eine Version von Babel, die die Ausgabe von Browserify verarbeiten kann.

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

Mehrere JavaScript-Dateien

Für das obige Beispiel müssen Sie eine bestimmte Datei definieren, die geht Matt in Gulp so vor, um Dateien zu durchsuchen und mit der Endung .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();
});

Lint- und Stilprüfungen

Beim Linieren Ihres Codes auf mögliche Probleme und Einhaltung des Stils gibt es nur wenige Optionen.

JSHint und JSCS

Am häufigsten werden JSHint und JSCS verwendet. Tools für die JavaScript-Stilüberprüfung.

JSHint hebt mögliche Probleme in Ihrem Code hervor und weist auf Mustern, die allgemein als schlechte Praxis angesehen werden.

JSCS prüft den Stil Ihres Codes. Dazu gehört unter anderem, dass nur Tabulatoren oder Leerzeichen verwendet werden und Leerzeichen an einheitlichen Stellen platziert werden.

Um JSHint und JSCS auf ES2015-Code zu verwenden, müssen Sie "esnext": true zu Ihrem .jshintrc- und .jscsrc-Dateien

ESLint

ESLint ist eine alternative Linter- und Stilprüfung in einem. Dieses Tool ist sehr betriebsbereit und bietet einige nützliche Funktionen gegenüber JSHint. z. B. um Umgebungen anzuzeigen, für die Ihr JavaScript geschrieben wird, und Fehler-/Warnstufe für bestimmte Probleme festlegen

ESLint ist vollständig anpassbar und bietet benutzerdefinierte Lint-Regeln, bei denen Sie über die Konfigurationsdateien festlegen können, ob Optionen deaktiviert oder abgeschwächt werden sollen. Wenn Sie React verwenden, funktioniert ESLint auch mit JSX.

Auch das Einrichten von ESLint im Build-Prozess ist nicht allzu schwierig.

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

Das Babel-Team verwaltet babel-estlint, ein Tool, mit dem Sie jeden gültigen Babel-Code mit ESLint linten können. ESLint unterstützt zwar benutzerdefinierte Parser, aber einige der von Babel unterstützten Syntaxelemente werden von ESLint nicht direkt unterstützt. Es ist also eine weitere Option, wenn Sie noch mehr Flexibilität benötigen. Passen Sie dazu den Abschnitt parser Ihres .eslintrc-Datei:

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

Dan Abramov hat einen hervorragenden Bericht über die Einrichtung von ESLint und babel-eslint in Lint. Gefällt mir 2015 Außerdem behandelt die Integration von SublimeLinter-eslint Ihren Workflow für die Unterstützung von Linting nach ES2015 in Sublime Text.

Welche sollten Sie verwenden? Probieren Sie sie aus und bleiben Sie bei dem, was für Sie am besten funktioniert.

ES2015-Syntaxhervorhebung

Natürlich möchten Sie, dass Ihr ES2015-Code korrekt syntaxgefärbt ist. Mi. babel-sublime, mit dem Sie über Package Control installiert werden. Wir empfehlen, diese Option bei der Einrichtung als Standardeinstellung für alle Dateien festzulegen. die Sie hervorheben müssen, um zu arbeiten. Dazu gehört natürlich JS, aber bei Verwendung von React kann auch JSX abgedeckt werden.

ES2015 dokumentieren

In der Vergangenheit haben wir uns bei der Dokumentation unseres JavaScript-Codes recht stark auf JSDoc verlassen. Leider gibt es offene Probleme bei der Unterstützung von ES2015, die in JSDoc 3 behoben werden sollen. Es gibt jedoch immer mehr Alternativen, während wir auf die Aktualisierung warten. ESDoc ist eine solche Option und Jonathan Creamer hat sich vor Kurzem zu diesem Thema beschäftigt, was sich lesen lässt.

Gulp.js-Dateien mit Babel erstellen

Wenn Sie Gulp für Ihren Buildprozess verwenden, können Gulp-Dateien jetzt mit jeder von Babel unterstützten Syntax erstellt werden. Wir machen das im Web Starter Kit und die Einrichtung ist relativ einfach. Mit einer aktuellen Version von Gulp und dem Gulp CLI einfach Ihren gulpfile.js in gulpfile.babel.js umbenennen, und Gulp wird Interpretieren und übersetzen Sie Ihre ES2015-gulpfile mit Babel automatisch.

Beliebte ES2015-Funktionen

Module

Module sind eine Möglichkeit, Werte, Funktionen und Klassen aus einer Datei zu exportieren, damit Sie sie in eine andere Datei importieren können.

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

Auf dieser Website finden Sie einige gute Beispiele und Erklärungen zu Modulen.

Vorlagenstrings

Mit Vorlagenstrings können Sie den Port eines Strings durch eine Variable ersetzen.

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

// => "Yo, Brendan!"

Das Schöne an Vorlagenstrings ist, dass die Ersetzung eine JavaScript-Ausführung ist. Das bedeutet, dass Sie Funktionen oder Inline-Ausdrücke verwenden können.

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.

Weitere Informationen finden Sie in diesem praktischen Blogpost von Addy.

Kurzzeichen für Objektliterale

Mit Objektliteralen müssen Sie beim Erstellen eines Objekts nicht den Schlüssel und den Wert definieren, wenn die Variable denselben Namen wie der gewünschte Schlüssel des Objekts hat.

Bedeutung:

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

Wird zu Folgendem:

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

Namen berechneter Properties

Mit dieser Funktion in ES2015 können Sie Eigenschaftsnamen dynamisch auf einer -Objekt enthält. Die Mozilla-Dokumente sind eine gute Informationsquelle und enthalten dieses tolle Beispiel.

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

Fettpfeilfunktionen

Mit Funktionen mit dickem Pfeil können Sie Funktionen in Kurzform schreiben, wobei Folgendes gilt:

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

Wird zu Folgendem:

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

Neben der kürzeren Syntax ist ein Vorteil von Funktionen mit dem dicken Pfeil, dass der Gültigkeitsbereich des Objekts mit dem der umschließenden Anweisung übereinstimmt. Das bedeutet, dass Sie .bind(this) nicht für Ihre Funktion aufrufen oder eine Variable erstellen müssen, die = this ist.

Es gibt noch viele weitere Beispiele auf MDN

Addy's ES6 Tools Repo

Addy hat damit beschäftigt, eine Liste der ES2015-Tools zu führen. vielleicht Grunt anstelle von Gulp verwendet, eine Antwort für Sie.

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

Hier finden Sie auch Links zu weiteren Babel-Tools, die Ihnen bei der Unittests und mehr.

Bücher zum Lesen

Es gibt zwei Bücher, die Sie kostenlos online lesen können, um mehr über ES2015 zu erfahren. ECMAScript 6 verstehen von Nicholas C. Zakas und Exploring ES6 von Dr. Axel Rauschmayer.

Turm von Babel

Wenn Sie sich mit den ES2015-Funktionen in der Befehlszeile vertraut machen möchten, bietet tower-of-babel eine Reihe von Übungen, die für Sie interessant sein könnten. Sie alle führen die Verwendung Babel.

Weitere Informationsquellen: