ES2015

ES2015 (wcześniej ES6) to to fantastyczny krok naprzód dla języka JavaScript. Oferuje nowe funkcje cukru w przypadku wzorców, które wymagają znacznego powtórzenia w standardzie ES5. Ten zawiera klasy, funkcje strzałek i moduły. W tym odcinku omawiamy narzędzia wykorzystujemy, aby w pełni wykorzystać standard ES2015 podczas tworzenia aplikacji internetowych w języku JavaScript.

Transpilacja wykonywana przez Babel

Chociaż silniki JavaScriptu doskonale sprawdzają się postępy we wdrażaniu ES2015 natywnie można korzystać z jednej. Aby korzystać z pełnego zestawu funkcji dzisiaj trzeba będzie przetranspilować kod z powrotem do ES5, aby można go było interpretowane przez obecne przeglądarki. Na szczęście istnieją takie narzędzia, jak Babel, ten proces jest niemal bezproblemowy.

Wykorzystanie Babel w procesie kompilacji

Babel umożliwia wykonywanie kodu JavaScript napisanego w standardzie ES2015 i transpiluje go z powrotem do ES5, aby mógł działać w przeglądarkach, nie są obecnie obsługiwane przez te funkcje. Dodanie Babel do procesu kompilacji może być zrobić coś w ten sposób.

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

Jedyną funkcją, której Babel nie może transpilować, są moduły. Moduły w ES6 umożliwiają tworzyć zajęcia oraz eksportować i importować zajęcia między plikami; Transpilowanie modułów przekazywanie JavaScriptu Browserify, która połączy a następnie przekazać je w Babelify. (wersja Babel, która obsługuje dane wyjściowe z 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/'));
});

Wiele plików JavaScript

Powyższy przykład wymaga zdefiniowania konkretnego pliku, który może stać się Matt wykonuje w Gulp następujące czynności, aby wyszukać i transpilować pliki. z rozszerzeniem .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();
});

Kontrola lintingu i stylu

Podczas lintowania kodu ze względu na możliwe problemy i styl jest kilka możliwości zgodność z przepisami.

JSHint i JSCS

JSHint i JSCS to najpopularniejsze używane obecnie do sprawdzania stylów JavaScript.

JSHint wyróżni ewentualne błędy w kodzie oraz wskaże powszechnie uznawanych za niewłaściwe.

JSCS sprawdzi styl kodu, m.in. zadba o to, wystarczy użyć tabulatorów lub spacji, a spacje rozmieszczone w spójnych miejscach.

Aby używać JSHint i JSCS w kodzie ES2015, musisz dodać "esnext": true do Pliki .jshintrc i .jscsrc

ESLint

ESLint to alternatywny linter i sprawdzanie stylu w jednym. To narzędzie zbiera dużo pracy i ma kilka fajnych funkcji w porównaniu z JSHint np. możliwość wskazania środowisk, dla których napisany jest kod JavaScript, ustawiania poziomu błędów / ostrzeżeń dla konkretnych problemów.

ESLint można w pełni dostosowywać i udostępnia niestandardowe reguły lintowania we wszystkich lokalizacjach informacje o tym, czy opcje można wyłączyć lub zmniejszyć plików konfiguracji. Jeśli używasz React, ESLint działa też JSX,

Konfiguracja ESLint w procesie tworzenia też nie jest zbyt trudna.

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

Zespół Babel utrzymuje babel-estlint, które pozwala lintować dowolny prawidłowy kod Babel za pomocą ESLint. Podczas gdy ESLint obsługuje niestandardowe parsery, ale część składni obsługiwanej przez Babel nie obsługuje bezpośrednio obsługiwane przez ESLint. Jest to inna opcja, jeśli potrzebujesz jeszcze więcej i elastycznością. Możesz to skonfigurować, dostosowując sekcję parser Plik .eslintrc:

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

Dan Abramov napisał świetną historię na temat konfigurowania funkcji ESLint i babel-eslint w Lintcie Podoba mi się 2015. Dodatkowo obejmuje metody integracji SublimeLinter-eslint na obsługi lintowania ES2015 w Sublime Text.

Które z tych rozwiązań wykorzystasz? Wypróbuj je i zdecyduj, co jest dla Ciebie najlepsze.

Wyróżnianie składni ES2015

Oczywiście kod ES2015 musi mieć prawidłową składnię. Śr lubię używać babel-sublime, należy zainstalować z poziomu kontroli pakietów. Zalecamy, aby podczas konfiguracji ustawić tę opcję jako domyślną dla wszystkich plików. w którym brakuje podświetlania. Oczywiście będzie to uwzględniać kod JS, ale może a jeśli używasz React, zastosuj także JSX.

Dokumentowanie ES2015

W przeszłości dokumentowaliśmy kod JavaScriptu głównie przy użyciu JSDoc. Niestety są w niej otwarte problemy dotyczące obsługi standardu ES2015 (wymaga to rozwiązania w pliku JSDoc 3). Jednak w międzyczasie czekamy na wszystkie związane z nim rozwiązania. Jednym z takich rozwiązań jest ESDoc, a Jonathan Kremk ma na jego temat niedawno przygotowaną recenzję, którą warto przeczytać.

Tworzenie plików Gulp.js za pomocą Babel

Jeśli w procesie kompilacji używasz Gulp, pliki Gulpfiles można teraz utworzonych przy użyciu dowolnej składni obsługiwanej przez Babel. Robimy to w Web Starter Zestaw a ich konfiguracja jest stosunkowo prosta. Za pomocą najnowszej wersji Gulp oraz Interfejs wiersza poleceń Gulp, po prostu zmień nazwę gulpfile.js na gulpfile.babel.js, a Gulp zinterpretuj i przetranspiluj plik gulp ES2015 za pomocą Babel.

Ulubione funkcje ES2015

Moduły

Moduły umożliwiają eksportowanie wartości, funkcji i klas z jednego pliku, takich jak które możesz zaimportować do innego pliku.

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

Na tej stronie znajdziesz kilka znakomitych przykładów i wyjaśnień Moduły.

Szablonowe ciągi tekstowe

Ciągi tekstowe w szablonach umożliwiają zastąpienie portu ciągu tekstowego zmienną.

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

// => "Yo, Brendan!"

Zaletą ciągów szablonów jest to, że w zastępstwie tekst co oznacza, że możesz używać funkcji i wyrażeń w tekście.

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.

Więcej informacji na ten temat znajdziesz w tym przydatnym poście na blogu Ady.

Skrócone literały obiektu

Literały obiektów pozwalają uniknąć definiowania klucza i wartości, tworzenia obiektu, jeśli zmienna ma taką samą nazwę jak klucz, który ma być zdefiniowany obiekt.

Czyli:

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

Zmienia się w:

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

Obliczone nazwy usług

Ta funkcja w wersji ES2015 pozwala dynamicznie tworzyć nazwy właściwości w dowolnym miejscu obiektu. Dokumenty Mozilla są doskonałym źródłem informacji i mają przykład.

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

Funkcje grubej strzałki

Funkcje grubej strzałki umożliwiają szybkie pisanie funkcji, gdy:

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

Zmienia się w:

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

Poza krótszą składnią jedną z świetnych cech stosowania grubej strzałki oznacza, że zakres obiektu jest taki sam jak instrukcja uzupełniająca. Oznacza to, że nie musisz wywoływać polecenia .bind(this) w swojej funkcji ani utwórz zmienną, która = to.

Jest wiele więcej przykładów MDN.

Repozytorium narzędzi ES6 Addy

Addy zajmuje się przechowywaniem listy narzędzi ES2015, a jeśli powyższe narzędzia nie działają Jeśli używasz Grunt zamiast Gulp, być może na nie odpowiedź.

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

Powyżej znajdziesz też linki do dodatkowych narzędzi Babel, które pomogą testów jednostkowych i nie tylko.

Książki do przeczytania

Dostępne są 2 książki, które możesz kupić online bezpłatnie, by dowiedzieć się więcej ES2015. Omówienie ECMAScript 6 napisany przez Nicholasa C. Zakas i Odkrywanie ES6 autor Dr Axel Rauschmayer.

Wieża Babel

Jeśli chcesz poznać funkcje ES2015 w wierszu poleceń, tower-of-babel ma lub seria ćwiczeń, które mogą Cię zainteresować. Wszystkie te usługi przechodzą przez Babel.

Inne materiały, które mogą Cię zainteresować: