ES2015

ES2015 (früher ES6) ist ein fantastischen Schritt weiter 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 geht es um Tools nutzen wir ES2015 beim Erstellen von JavaScript-Webanwendungen.

Transpilation mit Babel

Obwohl sich JavaScript-Engines Fortschritte bei der Implementierung von ES2015 nativ ist, gibt es eine Gotcha. Alle Funktionen nutzen müssen Sie Ihren Code zurück in ES5 transpilieren, damit er die von aktuellen Browsern interpretiert werden. Glücklicherweise gibt es Tools wie Babel, mit denen und diesen Prozess neben schmerzlos ausführen.

Babel im Erstellungsprozess verwenden

Mit Babel können Sie JavaScript-Code verwenden, der in ES2015 geschrieben wurde. zurück in ES5, sodass es in Browsern funktioniert, unterstützen diese Funktionen derzeit nicht. Das Hinzufügen von Babel zu Ihrem Erstellungsprozess so gemacht.

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. Um Module zu transpilieren leiten Sie Ihren JavaScript-Code weiter Browserify ausführen, wodurch die und über Babelify übergeben. (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

Es gibt einige Möglichkeiten, Ihren Code auf mögliche Probleme und Stile zu untersuchen. Compliance.

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ören Dinge wie Es werden nur Tabulatoren oder Leerzeichen verwendet und Leerzeichen an einheitlichen Stellen platziert.

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 Linting-Regeln, je nachdem, wo Sie sich gerade befinden ob die Optionen über das Display abgeschaltet oder abgesenkt werden können. Konfigurationsdateien. 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 gültigen Babel-Code mit ESLint Lint nutzen können. Während ESLint benutzerdefinierte Parser unterstützt, ist ein Teil der von Babel unterstützten Syntax nicht direkt unterstützt von ESLint. Dies ist eine weitere Option, Flexibilität. 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 Methode sollten Sie verwenden? Probier sie aus und bleib bei dem, was für dich am besten funktioniert.

ES2015: Syntaxhervorhebung

Natürlich sollte die Syntax Ihres ES2015-Codes richtig hervorgehoben sein. Mi. babel-sublime, mit dem Sie über Package Control installiert werden. Wir empfehlen, diese Einstellung bei der Einrichtung als Standardeinstellung für alle Dateien festzulegen. die Sie hervorheben müssen, um zu arbeiten. Dazu gehört natürlich auch JS, bei Verwendung von React auch JSX abdecken.

Dokumentation zu ES2015

In der Vergangenheit haben wir uns bei der Dokumentation unseres JavaScript-Codes recht stark auf JSDoc verlassen. Leider gibt es offene Probleme für die Unterstützung von ES2015 (die in JSDoc 3 behandelt werden). In der Zwischenzeit gibt es jedoch eine wachsende Anzahl von Alternativen. ESDoc ist eine solche Option und Jonathan Creamer hat sich vor Kurzem zu diesem Thema beschäftigt, das sich lesen lässt.

Gulp.js-Dateien mit Babel erstellen

Wenn ihr Gulp für euren Build-Prozess verwendet, können Gulpfiles jetzt die mit einer von Babel unterstützten Syntax erstellt wurden. Wir wiederholen diesen Vorgang in Web Starter Set 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, damit Gulp 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 tolle Beispiele und Erklärungen zu Module.

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 Vorlagen-Strings ist, dass die Ersetzung eine JavaScript- d. h. Sie können Funktionen oder Inline-Ausdrücke verwenden.

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 Add-ons.

Kurzschreibweise Objektliterale

Mit Objektliteralen müssen Sie Schlüssel und Wert nicht definieren, wenn ein -Objekt erstellen, wenn die Variable denselben Namen wie der Schlüssel hat, Objekt, das Sie haben sollten.

Bedeutung:

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

Wird zu Folgendem:

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

Berechnete Attributnamen

Mit dieser Funktion in ES2015 können Sie Eigenschaftsnamen dynamisch auf einer -Objekt enthält. Die Mozilla-Dokumentation ist eine großartige Informationsquelle und enthält 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 Fettpfeil-Funktionen können Sie Funktionen in Kurzschreibweise schreiben. Dabei 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 einer kürzeren Syntax ist ein großer Vorteil der besteht darin, dass der Geltungsbereich des Objekts mit der einschließenden Anweisung übereinstimmt. Das bedeutet, dass Sie .bind(this) nicht für Ihre Funktion oder Erstellen Sie eine Variable, die = this.

Es gibt noch viele weitere Beispiele auf MDN

Addys ES6-Tools-Repository

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 online kostenlos ausleihen können, um mehr über ES2015. ECMAScript 6 verstehen von Nicholas C. Zakas und Entdecken von ES6 von Dr. Axel Rauschmayer.

Babelturm

Wenn Sie mehr über ES2015-Funktionen über die Befehlszeile erfahren möchten, Tower-of-Babel bietet ein eine Reihe interessanter Übungen an. Sie alle führen die Verwendung Babel.

Weitere Informationsquellen: