Babel指南 - 基本環境搭建

ECMAScript的現狀

ECMAScript，自己是一個腳本語言的設計規範，基於此規範，有許多爲人熟知的語言，如JavaScript、ActionScript等。而時至幾年前，隨着Node.js的出現，以及HTML5帶來的諸多新WebAPI，讓JavaScript一會兒提高到一個無比重要的位置。時至那個階段，咱們能夠統稱當時爲ECMAScript5（ES5）。

那以後，很快就開始了對ECMAScript 2015（ES6）的制定，ES6一洗JS過去諸多的奇淫巧技、含糊不清的地方，帶入了不少現代編程語言的特性，並且其推行的速度遠比HTML5和CSS3要快。而在今天討論ES6的時候，實際上ECMAScript 2016（ES7）已經在制定中（目前其實主要是修正和彌補ES6的不足），不少已經可使用在實際生產環境中。

然而如上所述，即便是ES6，仍然有許多不足之處，因此急匆匆的ES7上線了，縱然你在使用ES6了，可是以今天的技術發展速度來講，既然ES7有了修正案，儘早的切入到ES7才能跟得上時代的步伐。

而JavaScript是一門須要環境依託運行的語言，不管是Browser環境下，仍是服務器環境下，都須要環境的支持。下面這個列表，能夠看到你的瀏覽器，和當前市面可支持JavaScript環境對ES6的支持狀況：

https://kangax.github.io/compat-table/es6/

Babel

這時候，若是但願嘗試使用ES6/ES7的，則可使用Babel這個轉譯器。Babel自己的設計，就是針對JavaScript（全部須要轉換爲JavaScript）進行設計的。因此如官網的宣傳語所說：

Babel transforms your JavaScript

Babel的官方網站：babeljs.io

Babel自己的設計是基於node.js環境下運行使用的，你也能夠將babel-core用於瀏覽器環境。同時，有一個叫作babel-standalone的開源項目，則支持非node.js環境下使用Babel。

因此本文注重說明的是，基於node.js環境下配置和使用Babel的說明。

從深到潛，能夠簡單的將node.js下的配置使用狀況區分爲：CLI => 各類環境配置（GULP、IDE等）。

CLI環境

通常來講，使用Babel都是在各類環境內使用的，而不多直接使用CLI模式，可是這個模式能幫助理解Babel的基本配置。Babel有一大堆轉換器插件，因此搞清楚他的配置方式是很必要的。

官方的博客有一篇基礎環境下的安裝說明：https://babeljs.io/blog/2015/10/31/setting-up-babel-6，這個篇章我只是將這個教程做爲簡單的翻譯。

Babel基本安裝

你有兩個選項，全局的npm環境安裝babel-cli，或當前項目下安裝babel-core：

npm install --global babel-cli
// or
npm install --save-dev babel-core

添加插件（Plugins）

你能夠在項目的根目錄添加一個 .babelrc 文件（json格式）。

假定你須要一叫作 es2015-arrow-functions 的特性支持：

npm install --save-dev babel-plugin-transform-es2015-arrow-functions

注意，這是在當前項目目錄添加的npm。

並修改 .babelrc 文件，將這個插件註冊：

{
  "plugins": ["transform-es2015-arrow-functions"]
}

Babel提供了許多ES7的插件，具體能夠查詢官網的插件列表：Babel Plugins List。

插件的命名機制

這裏特別說明一下，Babel的插件名的命名機制的問題

首先，你能夠在Babel Plugins List查詢到插件的列表，你會看到如下的內容：

能夠看到插件名稱，是諸如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping等。

其次，對應的在Babel的github上的項目中的packages目錄下，上述的幾個插件，名稱則對應爲：

es2015-arrow-functions        => babel-plugin-transform-es2015-arrow-functions
es2015-block-scoped-functions => babel-plugin-transform-es2015-block-scoped-functions
es2015-block-scoping          => babel-plugin-transform-es2015-block-scoping

再次，這些插件寫入到 .babelrc 的配置文件中的名稱，則對應爲：

es2015-arrow-functions        => transform-es2015-arrow-functions
es2015-block-scoped-functions => transform-es2015-block-scoped-functions
es2015-block-scoping          => transform-es2015-block-scoping

爲了統一稱呼，咱們定義以下：

插件名 - 形如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping

插件（安裝）包名 - 形如：babel-plugin-transform-es2015-arrow-functions、babel-plugin-transform-es2015-block-scoped-functions、babel-plugin-transform-es2015-block-scoping

配置名 - 形如：transform-es2015-arrow-functions、transform-es2015-block-scoped-functions、transform-es2015-block-scoping

通常來講，在 .babelrc 中，或者是gulp中，或者是使用 babel-standalone 的在線轉譯功能，都使用的是 配置名 。必定要區分這三者的區別，否則很容易出錯。

Babel預設值（Presets）

目前做爲Babel官方的預設，主要包含如下的內容：

• es2015
• react
• stage-0
• stage-1
• stage-2
• stage-3

這些預設，包含了相關所需的插件包，在你的babel配置中（.babelrc），能夠混合多個preset使用，同時還能夠在此基礎上追加plugin。

使用預設置，和插件的用法相似，先執行npm安裝所需的包，而後在配置中加載：

npm install --save-dev babel-preset-es2015 babel-preset-react

在 .bablerc 文件中

{
  "presets": ["es2015", "react"]
}

gulp中使用

要在gulp中使用Babel是一個很簡單的事情，官方提供了簡單教程，這裏我就不翻譯了，由於很簡單。

特別說明一下的是，若是你須要在gulp使用Babel的某個插件，必須npm安裝在當前項目中，而不能使用global。也即：npm install babel-preset-es2015 --save-dev。

gulp支持使用 .bablerc 。

在IDE環境中使用

這裏以WebStorm爲例，官網提供了教程，但其實JetBrians系列的IDE提供了一個叫作File Wathcer的機制的東西，支持實時修改文件的同時，便可自動對譯出目標的文件，包括js、css等。這裏主要介紹一下如何使用File Watcher。

首先，你須要全局安裝babel-cli：

npm install --global babel-cli

其次，在WebStorm（JB家全系IDE通用），打開File -> Settings -> Tools -> File Watcher：

點擊右上角的 + ，會看到以下的界面：

選擇 Babel 項：

這裏， File Type ，你能夠選擇ECMAScript 6，這樣可讓你的項目保持對JS文件不進行處理。以下：

對於 Arguments ，你能夠進行修改，具體的參數命令，能夠參考Babel Options，好比： --source-maps --out-file $FileNameWithoutExtension$.js $FilePath$ 。

至此，你能夠在WebStorm的項目添加一個.es6的文件，每次保存的時候（你按Ctrl + S），他都會自動轉譯出一個.js文件出來。

使用babel-standalone實時轉譯

上面已經介紹過了，babel-standalone提供了接近於官方Babel同步的版本，並能夠在非node.js的環境中使用，並且這個類庫整合了babel大部分的插件。

你能夠經過bower進行安裝：

bower install babel-standalone --save

安裝完畢後，直接在你的項目使用便可，他的轉譯參數，和 .babelrc 保持基本的一致。

defined(['babel-standalone'], function(babel) {
  var code = 'let helloWorld = "hello world"; alert(helloWorld)';
  var options = {
    presets: ['es2015'],
    plugins: ['transform-es2015-modules-amd']
  }
  eval(babel.transforms(code, options));
})