> 原文出處：http://www.infoq.com/cn/articles/es6-in-depth-babel-and-broccoli 自ES6正式發布，人們已經開始討論ES7：未來版本會保留哪些特性，新標準可能提供什么樣的新特性。作為Web開發者，我們想知道如何發揮這一切的巨大能量。在[深入淺出ES6系列](http://www.infoq.com/cn/es6-in-depth/)之前的文章中，我們不斷鼓勵你開始在編碼中加入ES6新特性，輔以一些有趣的工具，你完全可以從現在開始使用ES6： > 如果你想在Web端使用這種新語法，你可以通過[Babel](https://babeljs.io/)或Google的[Traceur](https://github.com/google/traceur-compiler)將你的ES6代碼轉譯為Web友好的ES5代碼。 現在，我們將向你分步展示如何做到的這一切。上面提及的工具被稱為轉譯器，你可以將它理解為[源代碼到源代碼的編譯器](https://en.wikipedia.org/wiki/Source-to-source_compiler)——一個在可比較的抽象層上操作不同編程語言相互轉換的編譯器。轉譯器允許我們用ES6編寫代碼，同時保證這些代碼能在每一個瀏覽器中執行。 [TOC] ## 轉譯技術拯救了我們 轉譯器使用起來非常簡單，只需兩步即可描述它所做的事情： 1. 用ES6的語法編寫代碼。 ~~~ let q = 99; let myVariable = `${q} bottles of beer on the wall, ${q} bottles of beer.`; ~~~ 2. 用上面那段代碼作為轉譯器的輸入，經過處理后得到以下這段輸出： ~~~ "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](http://broccolijs.com/)中，我們將在兩個示例中編寫并執行第一行ES6代碼。如果你的代碼無法正常運行，可以在這里（[broccoli-babel-examples](https://github.com/givanse/broccoli-babel-examples)）查看完整的源代碼。在這個倉庫中你可以找到三個示例項目： 1. es6-fruits 2. es6-website 3. es6-modules 每一個項目都構建于前一個示例的基礎之上，我們會從最小的項目開始，逐步得出一個一般的解決方案，為日后每一個雄心壯志的項目打下良好的開端。這篇文章只包含前兩個示例，閱讀文章后，你完全可以自行閱讀第三個示例中的代碼并加以理解。 如果你在想——我坐等瀏覽器支持這些新特性就好了啦——那么你一定會落后的！實現所有功能要花費很長時間，況且現在有成熟的轉譯器，而且ECMAScript加快了發布新版本的周期（每年一版），我們將會看到新標準比統一的瀏覽器平臺更新得更頻繁。所以趕快加入我們，一起發揮新特性的巨大威力吧！ ## 我們的首個Broccoli與Babel項目 Broccoli是一個用來快速構建項目的工具，你可以用它對文件進行混淆與壓縮，還可以通過眾多的[Broccoli插件](https://www.npmjs.com/browse/keyword/broccoli-plugin)實現許多其它功能。它幫助我們處理文件和目錄，每當項目變更時自動執行指令，很大程度上減輕了我們的負擔。你不妨將它視為： > 類似Rails的asset管道，但是Broccoli運行在Node上且可以對接任意后端。 ### 配置項目 #### NODE 你可能已經猜到了，你需要[安裝Node 0.11或更高版本](https://nodejs.org/)。 如果你使用unix系統，不要從包管理器（apt、yum等）中安裝，這樣可以避免在安裝過程中使用root權限，最好使用當前的用戶權限，通過上面的鏈接手動安裝。在文章《[不要sudo npm](http://givan.se/do-not-sudo-npm/)》中可以了解為什么不推薦使用root權限，文章中也給出了[其它安裝方案](http://givan.se/do-not-sudo-npm/#install-npm-properly)。 #### 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特性： 1. 用`let`進行局部作用域聲明（在稍后的文章中討論） 2. [for-of循環](http://www.infoq.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop) 3. [模板字符串](http://www.infoq.com/cn/articles/es6-in-depth-template-string) 保存文件，嘗試執行腳本。 ~~~ 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的生成器](http://www.infoq.com/cn/articles/es6-in-depth-generators)。這個特性目前尚未被所有瀏覽器支持。為了能夠使用這個特性，我們需要一個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/ ~~~ 你應該可以看到：  ## Babel和Broccoli組合還有更多樂趣 上述第二個示例給出了一個通過Babel實現功能的思路，它可能足夠你用上一陣子了。如果你想要更多有關ES6、Babel和Broccoli的內容，可以查看[broccoli-babel-boilerplate](https://github.com/jayphelps/broccoli-babel-boilerplate)，這個倉庫中的代碼可以提供Broccoli+Babel項目的配置，而且高出至少兩個層次。這個樣板可以文件處理模塊、模塊導入以及單元測試。 通過這些配置，你可以在示例[es6-modules](https://github.com/givanse/broccoli-babel-examples/tree/master/es6-modules)中親自實踐。Brocfile魔力無窮，與我們之前實現的非常類似。 * * * 正如你看到的，Babel和Broccoli對于在Web網站中應用ES6新特性非常實用。感謝Gastón I. Silva貢獻這篇文章！ 下一篇，深入淺出ES6將為你帶來一些ES6中威力更大的特性，屆時請加入我們一起探索新世界。