深入淺出ES6（九）：學習Babel和Broccoli，馬上就用ES6

自ES6正式發佈，人們已經開始討論ES7：未來版本會保留哪些特性，新標準可能提供什麼樣的新特性。作爲Web開發者，我們想知道如何發揮這一切的巨大能量。在深入淺出ES6系列之前的文章中，我們不斷鼓勵你開始在編碼中加入ES6新特性，輔以一些有趣的工具，你完全可以從現在開始使用ES6：

如果你想在Web端使用這種新語法，你可以通過Babel或Google的Traceur將你的ES6代碼轉譯爲Web友好的ES5代碼。

現在，我們將向你分步展示如何做到的這一切。上面提及的工具被稱爲轉譯器，你可以將它理解爲源代碼到源代碼的編譯器——一個在可比較的抽象層上操作不同編程語言相互轉換的編譯器。轉譯器允許我們用ES6編寫代碼，同時保證這些代碼能在每一個瀏覽器中執行。

轉譯技術拯救了我們

轉譯器使用起來非常簡單，只需兩步即可描述它所做的事情：

用ES6的語法編寫代碼。

let q = 99;
let 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，這段代碼可以在任意瀏覽器中運行。

轉譯器內部從輸入到輸出的邏輯高度複雜，完全超出本篇文章的講解範圍。正如我們無須知道所有的內部引擎結構就可以駕駛一輛汽車，現在，我們同樣可以將轉譯器視爲一個能夠處理我們代碼的黑盒。

實際體驗Babel

你可以通過幾種不同的方法在項目中使用Babel，有一個命令行工具，在這個工具中可以使用如下形式的指令：

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

Babel也提供支持在瀏覽器中使用的版本。你可以將Babel作爲一個普通的庫引入，然後將你的ES6代碼放置在類型爲text/babel的script標籤中。

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// 你的ES6代碼
</script>

隨着代碼庫爆炸式增長，你開始將所有代碼劃分爲多個文件和文件夾，但是這些方法並不能隨之擴展。到那時，你將需要一個構建工具以及一種將Babel與構建管道整合在一起的方法。

在接下來的章節中，我們將要把Babel整合到構建工具Broccoli.js中，我們將在兩個示例中編寫並執行第一行ES6代碼。如果你的代碼無法正常運行，可以在這裏（broccoli-babel-examples）查看完整的源代碼。在這個倉庫中你可以找到三個示例項目：

es6-fruits
es6-website
es6-modules

每一個項目都構建於前一個示例的基礎之上，我們會從最小的項目開始，逐步得出一個一般的解決方案，爲日後每一個雄心壯志的項目打下良好的開端。這篇文章只包含前兩個示例，閱讀文章後，你完全可以自行閱讀第三個示例中的代碼並加以理解。

如果你在想——我坐等瀏覽器支持這些新特性就好了啦——那麼你一定會落後的！實現所有功能要花費很長時間，況且現在有成熟的轉譯器，而且ECMAScript加快了發佈新版本的週期（每年一版），我們將會看到新標準比統一的瀏覽器平臺更新得更頻繁。所以趕快加入我們，一起發揮新特性的巨大威力吧！

我們的首個Broccoli與Babel項目

Broccoli是一個用來快速構建項目的工具，你可以用它對文件進行混淆與壓縮，還可以通過衆多的Broccoli插件實現許多其它功能。它幫助我們處理文件和目錄，每當項目變更時自動執行指令，很大程度上減輕了我們的負擔。你不妨將它視爲：

類似Rails的asset管道，但是Broccoli運行在Node上且可以對接任意後端。

配置項目

NODE

你可能已經猜到了，你需要安裝Node 0.11或更高版本。

如果你使用unix系統，不要從包管理器（apt、yum等）中安裝，這樣可以避免在安裝過程中使用root權限，最好使用當前的用戶權限，通過上面的鏈接手動安裝。在文章《不要sudo npm》中可以瞭解爲什麼不推薦使用root權限，文章中也給出了其它安裝方案。

BROCCOLI

首先，我們要配置好Broccoli項目：

mkdir es6-fruits
cd es6-fruits
npm init
# 創建一個名爲Brocfile.js的空文件
touch Brocfile.js

現在我們安裝broccoli和broccoli-cli

# 安裝broccoli庫
npm install --save-dev broccoli
# 命令行工具
npm install -g broccoli-cli

編寫一些ES6代碼

創建src文件夾，在裏面置入fruits.js文件。

mkdir src
vim src/fruits.js

用ES6語法在新文件中寫一小段腳本。

let fruits = [
  {id: 100, name: '草莓'},
  {id: 101, name: '柚子'},
  {id: 102, name: '李子'}
];
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循環
模板字符串

保存文件，嘗試執行腳本。

node src/fruits.js

目前這段代碼不能正常運行，但是我們將會讓它運行在Node與任何瀏覽器中。

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

轉譯時刻

現在，我們用Broccoli加載代碼，然後用Babel處理它。編輯Brocfile.js文件並加入以下這段代碼：

// 引入babel插件
var babel = require('broccoli-babel-transpiler');

// 獲取源代碼，執行轉譯指令（僅需1步）
fruits = babel('src'); // src/*.js

module.exports = fruits;

注意我們引入了包裹在Babel庫中的Broccoli插件broccoli-babel-transpiler，所以我們一定要安裝它：


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

現在我們可以構建項目並執行腳本了：

broccoli build dist # 編譯
node dist/fruits.js # 執行ES5

輸出結果看起來應當是這樣的：

ID: 100 Name: 草莓
ID: 101 Name: 柚子
ID: 102 Name: 李子
List total: 3

那很簡單！你可以打開dist/fruits.js查看轉譯後代碼。Babel轉譯器的一個優秀特性是它能夠生產可讀的代碼。

爲網站編寫ES6代碼

在第二個示例中，我們將做進一步提升。首先，退出es6-fruits文件夾，然後使用上述配置項目一章中列出的步驟創建新目錄es6-website。

在src文件夾中創建三個文件：

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>馬上使用ES6</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</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>

src/print-info.js

function printInfo() {
  $('#info')
  .append('<p>用Broccoli和Babel構建的' +
          '最小網站示例</p>');
}
$(printInfo);

src/print-colors.js

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

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

  // 人爲的示例
  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的生成器。這個特性目前尚未被所有瀏覽器支持。爲了能夠使用這個特性，我們需要一個polyfill，Babel中已經支持，我們很快將投入使用。

下一步是合併所有JS文件然後在網站中使用。最難的部分是編寫Brocfile文件，這一次我們要安裝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

把它們投入使用：

// Babel轉譯器
var babel = require('broccoli-babel-transpiler');
// 過濾樹（文件的子集）
var funnel = require('broccoli-funnel');
// 連結樹
var concat = require('broccoli-concat');
// 合併樹
var mergeTrees = require('broccoli-merge-trees');

// 轉譯源文件
var appJs = babel('src');

// 獲取Babel庫提供的polyfill文件
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']
});

// 給轉譯後的文件樹添加Babel polyfill
appJs = mergeTrees([browserPolyfill, appJs]);

// 將所有JS文件連結爲一個單獨文件
appJs = concat(appJs, {
  // 我們指定一個連結順序
  inputFiles: ['browser-polyfill.js', '**/*.js'],
  outputFile: '/js/my-app.js'
});

// 獲取入口文件
var index = funnel('src', {files: ['index.html']});

// 獲取所有的樹
// 並導出最終單一的樹
module.exports = mergeTrees([index, appJs]);

現在開始構建並執行我們的代碼。

broccoli build dist

這次你在dist文件夾中應該看到以下結構：

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

那是一個靜態網站，你可以用任意服務器伺服來驗證那段代碼正常運行。舉個例子：

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

lgh1117

發佈了99 篇原創文章 · 獲贊 56 · 訪問量 84萬+

他的留言板關注

深入淺出ES6（九）：學習Babel和Broccoli，馬上就用ES6

轉譯技術拯救了我們

實際體驗Babel

我們的首個Broccoli與Babel項目

配置項目

NODE

BROCCOLI

編寫一些ES6代碼

轉譯時刻

爲網站編寫ES6代碼

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

關於遊戲付費的一點想法

我通過CKA和CKS啦！

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

activiti5.13 框架數據庫表結構說明

ES5 標準對象說明

sublime 每次啓動都提示更新新版本禁止sublime更新操作

MongoDB java連接參數說明

深入淺出ES6（十七）：展望未來

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結