深刻淺出 ES6：ES6 與 Babel / Broccoli 的聯用

時間 2019-12-05

標籤深刻 es6 babel broccoli 欄目 JavaScript 简体版

原文原文鏈接

深刻淺出 ES6 指的是添加在 ECMASript 標準第六版中的 JavaScript 編程語言的新特性，簡稱爲 ES6。css

雖然 ES6 剛剛到來，可是人們已經開始談論 ES7 了，它將來的樣子，以及新標準能提供哪些光鮮亮麗的特性。做爲網絡開發者，咱們想的則是如何將這些特性都用上。在以前的深刻淺出 ES6 貼文中，咱們曾屢次鼓勵讀者朋友使用 ES6 在一些小工具的幫助下編寫代碼。並這樣調戲大家：html

若是你想在網絡上使用這個新語法，你可使用 Babel (一款 JS 編譯器)或谷歌的 Traceur (一款編譯器)將你的 ES6 代碼翻譯成網絡友好型的 ES5。node

今天，本文將向你展現詳細的實現步驟。上面所提到的工具被稱爲轉換編譯器。轉換編譯器又被稱爲源到源的編譯器 —— 將編程語言在同一個抽象層面進行轉換的編譯器。轉換編譯器使得咱們在使用 ES6 編寫代碼的同時，保證代碼在每個瀏覽器中都可以運行。python

##1、咱們的救星——轉換編譯器jquery

轉換編譯器使用簡便。兩個步驟就能解釋清楚：git

1.用 ES6 語法寫出代碼。es6

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

2.將上面的代碼做爲轉換編譯器的輸入，編譯器處理以後獲得下面的輸出：github

"use strict";

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

這是咱們熟知的 JavaScript，它可以在任何瀏覽器中使用。web

至於轉換編譯器內部如何轉換代碼及其複雜，遠非這篇小文可以解釋得了。這就像咱們不知道內置引擎的工做原理，可是咱們卻可以很好地駕駛車輛。所以，咱們也能夠將轉換編譯器看作一個可以處理代碼的黑盒子。npm

###Babel登場

在一個具體的項目中，使用Babel有幾種不一樣的方法。在工具中，有一種命令行工具，你能按照以下所示的格式發出命令：

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

你也可使用瀏覽器版本。只須要將 Babel 添加爲經常使用 JS 庫，而後將你的 ES6 代碼放入「 text/babel」類型標籤中。以下所示：

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

當你的代碼庫開始膨脹，你不得不將它們放在不一樣的文件和文件夾中時，這些方法都不會跟着膨脹。那時，你須要的是一個開發工具以及一個使用管道來整合Babel 的辦法。

在接下來的內容中，咱們會將 Babel 整合至開發工具，即 Broccoli.js，並書寫和執行 ES6 代碼例子。爲了避免讓你感到迷惑，你能夠在這裏看到完整的源代碼：broccoli-babel-實例。在那裏你會找到三個項目實例：

1.es6-fruits

2.es6-website

3.es6-modules

每一個實例都創建在前一個例子的基礎之上。咱們從最小最基礎的步驟開始，而後發展成一個通用的方案（做爲雄偉計劃的第一步）。本文將會詳細描述前兩個實例。此後，你就能獨立閱讀和理解實例3中的代碼了。

若是你如今的想法是 —— 我就坐等瀏覽器來支持新特性吧 —— 那你就會掉隊。即便最終實現了徹底兼容，也必須花費很長的時間。而轉換編譯器卻一直在這兒；並且 ECMAScript 標準會按計劃每一年發佈新版本。所以，咱們將會看到的是在統一的瀏覽器平臺出現以前新標準的不斷涌現。不妨如今就加入咱們開始使用這些新特性吧。

##2、第一個 Broccoli & Babel 項目

Broccoli 是一個旨在實現項目開發的工具。經過使用 Broccoli 插件，你可以壓縮合並、最小化文件等等。它節省了咱們處理文件、目錄以及每次項目改變後都要執行命令的時間。能夠將它視爲：

這就像是鐵路管道資產，不過它在節點上運行並且與後端無關（backend-agnostic）。

###一、項目設置

###節點

你也許已經猜到了，你必須安裝 Node0.11 或後繼版本。

若是你的系統是 Unix，不要選擇程序包管理器（如 apt，yum）安裝。這是爲了不在安裝時使用根管理權限。最好是在當前用戶下使用上面提供的連接手動安裝。你能夠在 Do notsudo npm 瞭解爲何咱們不推薦使用根權限。在那裏你能找到其餘的安裝方法。

###Broccoli

咱們首先使用下面的代碼安裝 Broccoli 項目：

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

##寫入 ES6 代碼

新建 src 文件夾並放入文件 fruits.js

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

上面的代碼樣本使用了3個 ES6 的特性：

使用 let 在局部範圍內聲明（在後續的文章中咱們將會進一步討論）
for-of 循環
模板字符串

保存並嘗試運行。

node src/fruits.js

如今還不能運行，可是立刻咱們將會使用節點（Node）讓它在任何瀏覽器中均可以執行。

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

##二、轉換編譯器時間

如今，咱們將會使用 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;

注意咱們須要使用 broccoli-babel-transpiler，即一個封裝了 Babel 庫的 Broccoli 插件，所以咱們必須安裝：

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

如今構建項目並執行代碼：

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

這很簡單嘛！你能夠打開 dist/fruits.js，看一看轉換的代碼長啥樣。Babel 轉換編譯器的一個不錯的特性就是它可以獲得可讀的代碼。

##3、在 website 中寫入 ES6 代碼

在第二個實例中咱們將會提升一個姿式。首先，退出 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>

src/print-info.js

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

你可能已經注意到了這段代碼：function* hexRange — yes，這是一個 ES6 生成器。現階段，並非全部的瀏覽器都支持這個特性。爲了使用它，咱們須要一個緩衝。Babel 提供這個緩衝並且咱們很快就會用到。

接下來即是整合全部的 JS 文件並在一個網站中使用它們。最難的部分是寫 Broc 文件。此次咱們安裝四個插件：

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 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

This time you should see the following structure in the distfolder:

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

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

這是一個靜態網站，你可以使用服務器來證實代碼在工做中。例如：

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

你將會看到這個：

##4、Babel 和 Broccoli 中更多好玩兒的

這第二個實例展現了使用 Babel 能完成不少事情。這可能會讓你繼續探索一下子。若是你想繼續玩 ES6，Babel 和 Broccoli，你應該去看看這個：broccoli-babel-boilerplate。這也是一個 Broccoli+Babel 的設置，並且高級得多。這個樣本文件會處理模塊，導入以及進行單元測試。

你也能夠試試這個已有的配置實例：es6-modules。全部的高科技都在 Broc 文件夾裏面，並且這和咱們剛作的差很少。

OneAPM 助您輕鬆鎖定 .NET 應用性能瓶頸，經過強大的 Trace 記錄逐層分析，直至鎖定行級問題代碼。以用戶角度展現系統響應速度，以地域和瀏覽器維度統計用戶使用狀況。想閱讀更多技術文章，請訪問 OneAPM 官方博客。 本文轉自 OneAPM 官方博客 原做者：Gastón I. Silva

原文連接：https://hacks.mozilla.org/2015/06/es6-in-depth-babel-and-broccoli/

相關標籤/搜索

es6

深刻淺出

webpack+babel+es6+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。