本頁面由 Cloud Translation API 翻譯而成。

ES2015

ES2015 (原稱 ES6) 為我們這次就對 JavaScript 語言進行完美的準備不僅帶來新功能針對需要大量樣板 (ES5) 的模式發糖。這個包括類別、箭頭函式和模組在本集節目中，我們會介紹各項工具我們來充分利用 ES2015 來建構 JavaScript 網路應用程式。

使用 Babel 進行傳輸

雖然 JavaScript 引擎可以大幅改善 ES2015 進度第一個功能是真的使用整套功能現在您需要將程式碼轉譯回 ES5 已由目前的瀏覽器解譯幸好，Babel 這類工具與這個過程相輔相成

在建構程序中使用 Babel

Babel 可讓您使用 ES2015 編寫 JavaScript 並轉譯回 ES5，以便在目前不支援這些功能您也可以將 Babel 新增至建構程序就像這樣

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

Babel 無法平移的一項功能是 Modules。ES6 中的模組可讓您可以建立課程，並在檔案之間匯出 / 匯入課程。轉化模組傳送 JavaScript Browserify 來合併並透過 Babelify 傳送此檔案 (可處理 Browserify 輸出內容的 Babel 版本)。

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

多個 JavaScript 檔案

上述範例需要您定義特定檔案，這個檔案可能會於是 Matt 透過 Gulp 搜尋並轉譯檔案結尾是 .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();
});

檢查與樣式檢查

編寫程式碼時，有些選項可找出潛在問題和樣式確保符合法規。

JSHint 和 JSCS

JSHint 和 JSCS 是最常見的適用於現今 JavaScript 樣式檢查的工具

JSHint 會醒目顯示程式碼中可能存在的問題，並指出一般認為不適當

JSCS 會查看程式碼的樣式，其中包括確保只會使用 Tab 或空格，且空格則位於一致的位置。

如要在 ES2015 程式碼中使用 JSHint 和 JSCS，您需要將 "esnext": true 新增至 .jshintrc 和 .jscsrc 個檔案

ESLint

ESLint 是替代的 Linter 和樣式檢查工具。這項工具能清除一大堆蒸氣，而 JSHint 還提供一些實用的功能例如可指出編寫 JavaScript 的目標環境為特定問題設定錯誤 / 警告等級

ESLint 完全可自訂，能否透過設定檔此外，如果您使用 React，ESLint 也可搭配使用 JSX。

在建構程序中設定 ESLint 也並非難事。

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

Babel 團隊負責維護 babel-estlint 這項工具可讓您使用 ESLint 檢查任何有效的 Babel 程式碼。ESLint 支援自訂剖析器，但 Babel 支援的部分語法無法直接 ESLint 支援這項功能，如果您需要進一步靈活彈性方法是自訂以下項目的 parser 部分： .eslintrc 檔案：

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

Dan Abramov 在 Lint 中設定 ESLint 和 babel-eslint 的佳績喜歡 2015 年。此外，會說明如何在 SublimeLinter-eslint 新增至執行 ES2015 程式碼檢查功能的工作流程。

您該選擇下列哪一個選項？不妨試用看看，繼續採用最適合自己的做法。

ES2015 語法醒目顯示

您當然希望正確強調 ES2015 程式碼的語法。三盡情享受 babel-sublime 的功能，從 Package Control 安裝。設定時，建議你務必將任何檔案設為預設標示出實作項目這當然包括 JS 如果使用 React。

文件 ES2015

我們一向依賴 JSDoc 來記錄 JavaScript 程式碼。很抱歉，該問題對於支援 ES2015 存在尚未解決的問題 (尚未在 JSDoc 3 中解決)，不過我們正等待支援狀況與日俱增。而 ESDoc 就是其中一種做法，而 Jonathan Creamer 最近的寫下新書值得一讀。

使用 Babel 編寫 Gulp.js 檔案

如果您要使用 Gulp 進行建構程序，現在使用 Babel 支援的任何語法撰寫而成。我們會在 Web Starter 中執行這項操作套件也相對簡單的設定方式使用最新版本的 Gulp 和只要將 gulpfile.js 重新命名為 gulpfile.babel.js，Gulp 就會使用 Babel 自動解讀及轉譯 ES2015 gulpfile。

最愛的 ES2015 功能

模組

透過模組，您可以從單一檔案匯出值、函式和類別，如方便您匯入其他檔案

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

這個網站提供了一些很棒的 Modules。

範本字串

範本字串可讓您將字串的通訊埠替換為變數。

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

// =&gt; "Yo, Brendan!"

範本字串的理想之處在於替換式 JavaScript 執行，這表示您可以使用函式或內嵌運算式。

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

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

詳情請參閱這篇實用的網誌文章：阿迪。

速記物件常值

使用物件常值，不必在必須建立一個物件 (如果變數的名稱與您要載入資料的鍵相同) 所需物件

意義：

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

成為：

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

運算的屬性名稱

該功能可讓您使用 ES2015 的物件。Mozilla 文件是取得資訊的絕佳來源，而且具備範例。

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

脂肪箭頭函式

虛構箭頭函式可讓您以簡略的方式編寫函式，如下所示：

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

成為：

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

除了語法較短以外，還有一個很棒的功能函式是物件的範圍與封閉式陳述式相同。這表示您不需要在自己的函式上呼叫 .bind(this) 或建立 = 這個變數

我們還提供許多其他範例 MDN。

ES2015

使用 Babel 進行傳輸

在建構程序中使用 Babel

多個 JavaScript 檔案

檢查與樣式檢查

JSHint 和 JSCS

ESLint

ES2015 語法醒目顯示

文件 ES2015

使用 Babel 編寫 Gulp.js 檔案

最愛的 ES2015 功能

模組

範本字串

速記物件常值

運算的屬性名稱

脂肪箭頭函式

更多資訊的連結

阿迪的 ES6 工具庫

書籍推薦

巴貝爾塔

ES2015 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

使用 Babel 進行傳輸

在建構程序中使用 Babel

多個 JavaScript 檔案

檢查與樣式檢查

JSHint 和 JSCS

ESLint

ES2015 語法醒目顯示

文件 ES2015

使用 Babel 編寫 Gulp.js 檔案

最愛的 ES2015 功能

模組

範本字串

速記物件常值

運算的屬性名稱

脂肪箭頭函式

更多資訊的連結

阿迪的 ES6 工具庫

書籍推薦

巴貝爾塔

ES2015