深入解析 ES6：使用 Babel 和 Broccoli

發表於2015-09-11

ES6 才剛被標準化，人們就在開始談論 ES7 將提供哪些閃亮的新特性了。作為 Web 開發人員，我們更想知道如何使用這些新特性。在之前的文章中，作者鼓勵我們在一些工具的幫助下開始使用 ES6：

如果你想使用這些新語法，你可以使用 Babel 或 Google 的 Traceur 將 ES6 程式碼轉換為友好的 ES5 程式碼。

本文的主題就是這些工具的使用，上面這些工具被統稱為 transpiler，transpiler 也被稱為原始碼到原始碼的編譯器，用於在抽象級別進行程式語言之間的相互轉換。使用 transpiler 可以讓我們用 ES6 語法來編寫程式碼，同時保證這些程式碼能在所有瀏覽器上執行。

Transpiler

使用 transpiler 非常簡單，只需要下面兩步：

1.用 ES6 語法編寫程式碼：

let q = 99;
let myVariable = `${q} bottles of beer on the wall, ${q} bottles of beer.`;

1 2	let q = 99; let myVariable = `${q} bottles of beer on the wall, ${q} bottles of beer.`;

2.將上面程式碼作為 transpiler 的輸入，經 transpiler 處理後將得到下面的程式碼：

"use strict";

var q = 99;
var myVariable = "" + q + " bottles of beer on the wall, " + q + " bottles of beer."

"use strict";

var q = 99;

var myVariable = "" + q + " bottles of beer on the wall, " + q + " bottles of beer."

得到的程式碼是老式的 JavaScript 語法，可以在任何瀏覽器中執行。

transpiler 的內部工作原理相當複雜，超出了本文的討論範圍。這裡我們僅僅將 transpiler 作為一個黑盒來處理我們的程式碼，正如你會開車，但並不需要知道發動機的工作原理一樣。

Babel 實踐

使用 Babel 有幾種不同的方式。Babel 提供了一個命令列工具，你可以在終端中使用：

babel script.js --out-file script-compiled.js

1	babel script.js --out-file script-compiled.js

還有一個瀏覽器端庫。首先，將 Babel 嵌入到頁面中，然後將你的 ES6 程式碼放在 type 屬性值為 text/babel 的 script 標籤中：

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

// Your ES6 code

</script>

上面兩種方式實用性不強，當程式碼變得龐大，我們就會開始將程式碼分割到不同檔案或資料夾中。這時，我們就需要一個構建工具，並將 Babel 整合到我們的構建流程中。

下面我們將把 Babel 整合到一個構建工具中 – Broccoli.js，並通過幾個例子來演示 ES6 程式碼的編寫和執行。示例的完整程式碼放在這裡，一共包含三個示例：

es6-fruits
es6-website
es6-modules

每個例子都是建立在前個例子的基礎上，我們可以先從最簡單的例子入手，然後進階到一個通用的解決方案，最終可以作為一個龐大專案的起點。本文將詳細討論前面兩個例子，之後你將能自行閱讀和理解第三個例子中的程式碼。

如果你還在猶豫，那就等到瀏覽器相容這些新特性吧，這樣你也會被甩在時代的後面。瀏覽器完全相容這些新特性需要很長的時間，而且每年都將釋出一些新的 ECMAScript 標準，我們將看到新標準將比瀏覽器廠商的釋出更加頻繁。所以，別猶豫了，讓我們開始使用這些新特性吧。

小試牛刀

Broccoli 是一個快速構建工具，不僅可以用來混淆和壓縮檔案，藉助 Broccoli 外掛還可以做很多構建相關的工作，為我們節省了在處理檔案、目錄和執行命令上的時間。

準備工作

首先，我們需要安裝 Node 0.11 或更新的版本。

如果你使用的是 unix 系統，那麼請避免使用 package manager (apt, yum) 來安裝，這可以避免在安裝過程中使用 root 許可權。最好只為當前使用者使用連結中提供的二進位制檔案安裝。在這篇文章中介紹了為什麼不推薦使用 root 許可權，同時文章中還提供了一些其他安裝方式。

專案初始化

使用下面命令初始化我們的專案：

mkdir es6-fruits
cd es6-fruits
npm init
# Create an empty file called Brocfile.js
touch Brocfile.js

mkdir es6-fruits

cd es6-fruits

npm init

# Create an empty file called Brocfile.js

touch Brocfile.js

安裝 broccoli 和 broccoli-cli：

# the broccoli library
npm install --save-dev broccoli
# command line tool
npm install -g broccoli-cli

# the broccoli library

npm install --save-dev broccoli

# command line tool

npm install -g broccoli-cli

編寫 ES6 程式碼

建立一個 src 目錄，在目錄中建立一個 fruits.js 檔案：

mkdir src
vim src/fruits.js

1 2	mkdir src vim src/fruits.js

在我們建立的檔案中，使用 ES6 語法編寫一小段程式碼：

let fruits = [
  {id: 100, name: 'strawberry'},
  {id: 101, name: 'grapefruit'},
  {id: 102, name: 'plum'}
];

for (let fruit of fruits) {
  let message = `ID: ${fruit.id} Name: ${fruit.name}`;

  console.log(message);
}

console.log(`List total: ${fruits.length}`);

let fruits = [

{id: 100, name: 'strawberry'},

{id: 101, name: 'grapefruit'},

{id: 102, name: 'plum'}

];

for (let fruit of fruits) {

let message = `ID: ${fruit.id} Name: ${fruit.name}`;

console.log(message);

}

console.log(`List total: ${fruits.length}`);

上面程式碼中使用了 ES6 的三個新特性：

用 let 宣告區域性變數
for-of 迴圈
template strings

儲存檔案，然後嘗試執行一下：

node src/fruits.js

1	node src/fruits.js

我們看到執行報錯了，但我們的目標是使這段程式碼可以在 Node 和任何瀏覽器上都能被執行：

let fruits = [
    ^^^^^^
SyntaxError: Unexpected identifier

let fruits = [

^^^^^^

SyntaxError: Unexpected identifier

Transpilation

接下來我們將使用 Broccoli 來載入程式碼，並通過 Babel 處理，修改 Brocfile.js 檔案如下：

// import the babel plugin
var babel = require('broccoli-babel-transpiler');

// grab the source and transpile it in 1 step
fruits = babel('src'); // src/*.js

module.exports = fruits;

// import the babel plugin

var babel = require('broccoli-babel-transpiler');

// grab the source and transpile it in 1 step

fruits = babel('src'); // src/*.js

module.exports = fruits;

broccoli-babel-transpiler 這個包是 Broccoli 的一個外掛，使用前需要安裝：

npm install --save-dev broccoli-babel-transpiler

1	npm install --save-dev broccoli-babel-transpiler

構建並執行：

broccoli build dist # compile
node dist/fruits.js # execute ES5

1 2	broccoli build dist # compile node dist/fruits.js # execute ES5

執行結果如下：

ID: 100 Name: strawberry
ID: 101 Name: grapefruit
ID: 102 Name: plum
List total: 3

ID: 100 Name: strawberry

ID: 101 Name: grapefruit

ID: 102 Name: plum

List total: 3

有木有很簡單啊！開啟 dist/fruits.js 檔案來看看編譯後的程式碼，我們將發現通過 Babel 生成的程式碼可讀性是非常強的。

在 Web 開發中的使用

接下來我們來看一個稍複雜的例子。首先，退出 es6-fruits 目錄；然後，按照之前的步驟建立es6-website 目錄。

在 src 目錄下建立下面三個檔案：

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ES6 Today</title>
  </head>
  <style>
    body {
      border: 2px solid #9a9a9a;
      border-radius: 10px;
      padding: 6px;
      font-family: monospace;
      text-align: center;
    }
    .color {
      padding: 1rem;
      color: #fff;
    }
  </style>
  <body>
    <h1>ES6 Today</h1>
    <div id="info"></div>
    <hr>
    <div id="content"></div>

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="js/my-app.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ES6 Today</title>

</head>

<style>

body {

border: 2px solid #9a9a9a;

border-radius: 10px;

padding: 6px;

font-family: monospace;

text-align: center;

}

.color {

padding: 1rem;

color: #fff;

}

</style>

<body>

<h1>ES6 Today</h1>

<hr>

</body>

</html>

src/print-info.js

function printInfo() {
  $('#info')
      .append('<p>minimal website example with' +
              'Broccoli and Babel</p>');
}

$(printInfo);

function printInfo() {

$('#info')

.append('<p>minimal website example with' +

'Broccoli and Babel</p>');

}

$(printInfo);

src/print-colors.js

// ES6 Generator
function* hexRange(start, stop, step) {
  for (var i = start; i < stop; i += step) {
    yield i;
  }
}

function printColors() {
  var content$ = $('#content');

  // contrived example
  for ( var hex of hexRange(900, 999, 10) ) {
    var newDiv = $('<div>')
      .attr('class', 'color')
      .css({ 'background-color': `#${hex}` })
      .append(`hex code: #${hex}`);
    content$.append(newDiv);
  }
}

$(printColors);

// ES6 Generator

function* hexRange(start, stop, step) {

for (var i = start; i < stop; i += step) {

yield i;

}

function printColors() {

var content$ = $('#content');

// contrived example

for ( var hex of hexRange(900, 999, 10) ) {

var newDiv = $('<div>')

.attr('class', 'color')

.css({ 'background-color': `#${hex}` })

.append(`hex code: #${hex}`);

content$.append(newDiv);

}

$(printColors);

或許你已經注意到 function* hexRange，沒錯這就是 ES6 generator，目前該特性還沒有被所有瀏覽器相容，為了使用這個特性，我們需要一個 polyfill，Babel 為我們提供了這個 polyfill。

下一步就是合併 JS 檔案，難點在於 Brocfile.js 檔案的編寫，這次我們需要安裝 4 個外掛：

npm install --save-dev broccoli-babel-transpiler
npm install --save-dev broccoli-funnel
npm install --save-dev broccoli-concat
npm install --save-dev broccoli-merge-trees

npm install --save-dev broccoli-babel-transpiler

npm install --save-dev broccoli-funnel

npm install --save-dev broccoli-concat

npm install --save-dev broccoli-merge-trees

Brocfile.js

// Babel transpiler
var babel = require('broccoli-babel-transpiler');
// filter trees (subsets of files)
var funnel = require('broccoli-funnel');
// concatenate trees
var concat = require('broccoli-concat');
// merge trees
var mergeTrees = require('broccoli-merge-trees');

// Transpile the source files
var appJs = babel('src');

// Grab the polyfill file provided by the Babel library
var babelPath = require.resolve('broccoli-babel-transpiler');
babelPath = babelPath.replace(/\/index.js$/, '');
babelPath += '/node_modules/babel-core';
var browserPolyfill = funnel(babelPath, {
  files: ['browser-polyfill.js']
});

// Add the Babel polyfill to the tree of transpiled files
appJs = mergeTrees([browserPolyfill, appJs]);

// Concatenate all the JS files into a single file
appJs = concat(appJs, {
  // we specify a concatenation order
  inputFiles: ['browser-polyfill.js', '**/*.js'],
  outputFile: '/js/my-app.js'
});

// Grab the index file
var index = funnel('src', {files: ['index.html']});

// Grab all our trees and
// export them as a single and final tree
module.exports = mergeTrees([index, appJs]);

// Babel transpiler

var babel = require('broccoli-babel-transpiler');

// filter trees (subsets of files)

var funnel = require('broccoli-funnel');

// concatenate trees

var concat = require('broccoli-concat');

// merge trees

var mergeTrees = require('broccoli-merge-trees');

// Transpile the source files

var appJs = babel('src');

// Grab the polyfill file provided by the Babel library

var babelPath = require.resolve('broccoli-babel-transpiler');

babelPath = babelPath.replace(/\/index.js$/, '');

babelPath += '/node_modules/babel-core';

var browserPolyfill = funnel(babelPath, {

files: ['browser-polyfill.js']

});

// Add the Babel polyfill to the tree of transpiled files

appJs = mergeTrees([browserPolyfill, appJs]);

// Concatenate all the JS files into a single file

appJs = concat(appJs, {

// we specify a concatenation order

inputFiles: ['browser-polyfill.js', '**/*.js'],

outputFile: '/js/my-app.js'

});

// Grab the index file

var index = funnel('src', {files: ['index.html']});

// Grab all our trees and

// export them as a single and final tree

module.exports = mergeTrees([index, appJs]);

構建：

broccoli build dist

1	broccoli build dist

構建結果，dist 的目錄結構：

$> tree dist/
dist/
├── index.html
└── js
    └── my-app.js

$> tree dist/

dist/

├── index.html

└── js

└── my-app.js

這就是一個完整靜態網站的根目錄，可以使用任何靜態伺服器來啟動，比如：

cd dist/
python -m SimpleHTTPServer
# visit http://localhost:8000/

cd dist/

python -m SimpleHTTPServer

# visit http://localhost:8000/

你將看到如下結果：

ES6和Babel
2018-12-13
Babel
深入解析 ES6：Iterator 和 for-of 迴圈
2015-07-24
深入解析 ES6：Generator
2015-07-25
深入解析 ES6：Symbol
2015-07-26
Symbol
深入解析 ES6：模板字串
2015-07-25
字串
深入解析 ES6：簡介
2015-07-24
深入解析 ES6：解構賦值
2015-07-26
賦值
深入解析 ES6：箭頭函式
2015-07-26
函式
深入解析 ES6：Rest 引數和引數預設值
2015-07-26
REST
ES6 -- Babel 轉碼器
2018-05-15
Babel
babel是如何編譯es6 class和extends的
2019-03-11
Babel編譯
babel-runtime和babel-polyfill的介紹和使用
2019-05-07
Babel
深入瞭解babel（一）
2019-02-16
Babel
使用Babel轉碼將es6轉為es5
2020-12-21
Babel
stage?es6?es7?速覽javascript版本和babel配置
2018-12-09
JavaScriptBabel
【爬坑日記】使用webpack、babel-loader/babel-polyfill解決ie瀏覽器不支援es6
2019-04-03
WebBabel瀏覽器
如何寫好.babelrc？Babel的presets和plugins配置解析
2017-04-18
BabelPlugin
從babel實現es6類的繼承來深入理解js的原型及繼承
2018-09-07
Babel繼承JS原型
深入解析decltype和decltype(auto)
2024-04-12
ES6 / TypeScript / Babel / C# 中的 super(base)
2019-02-16
TypeScriptBabelC#
Babel 外掛原理的理解與深入
2018-09-11
Babel
使用Babel和ES7建立JavaScript模組
2016-05-11
BabelJavaScript
ES6系列——let和const深入理解
2019-03-02
babel使用詳解
2018-12-11
Babel
深入Babel，這一篇就夠了
2018-12-25
Babel
史上最清晰易懂的babel配置解析
2019-03-31
Babel
關於babel-polyfill和babel-runtime
2018-06-22
Babel
深入理解ES6
2018-12-15
深入理解 ES6
2017-09-08
es6 class解析
2022-04-14
ES6 系列之 Babel 是如何編譯 Class 的(上)
2021-09-09
Babel編譯
ES6 系列之 Babel 是如何編譯 Class 的(下)
2018-11-07
Babel編譯
ES6系列之Babel是如何編譯Class的(上)
2018-11-06
Babel編譯
Babel 一下 ES6 中的類及繼承
2018-07-13
Babel繼承
var，let和const深入解析（一）
2019-02-13
深入解析delete和truncate不同之處:
2012-11-21
delete
探索 babel 和 babel 外掛是怎麼工作的
2018-03-05
Babel
深入理解ES6 --- 物件
2019-03-30
物件