為什麽要使用Babel?

在當代環境中雖然對ES6的支持越來越好，但是大多數還是不支持ES6，這時候我們就需要把已經寫好的ES6代碼轉換成ES5，而Babel就是將ES6轉化成ES5的轉碼器，被廣泛使用。
舉個栗子：

// 轉碼前
input.map(item => item + 1);

// 轉碼後
input.map(function (item) {
  return item + 1;
});

配置文件 .babelrc

.babelrc是babel的配置文件，放在項目的根目錄下，比如現有的項目：

{
  // presets 是用來設置轉碼規整的，es2015就是ES6,
  // stage-2其實是一個系列，它是ES7的編碼規則，有stage-0[,1,2,3], 四選一
  "presets": ["es2015", "stage-2"],
  "plugins": ["lodash", "transform-runtime"],
  "comments": false
}
 

基本用法如下。

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 參數生成source map文件
$ babel src -d lib -s

你也可以將babel-cli安裝到項目中去：

$ npm install --save-dev babel-cli

然後，改寫package.json。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  // 這裏build只是隨便啟的名字，運行是質詢要npm run build就行了
  "scripts": {
    "build": "babel src -d lib"
  },
}

babel-polyfill

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。

$ npm install --save babel-polyfill
然後，在腳本頭部，加入如下一行代碼。
import 'babel-polyfill';
// 或者
require('babel-polyfill');

瀏覽器環境

當你不想做這些操作，或者現有的項目沒有webpack等構架工具時，這一步轉碼過程可以放在瀏覽器中，只不過從Babel 6.0開始，不再直接提供瀏覽器版本，而是要用構建工具構建出來。如果你沒有或不想使用構建工具，可以通過安裝5.x版：

$ npm install babel-core@5

運行上面的命令以後，就可以在當前目錄的node_modules/babel-core/子目錄裏面，找到babel的瀏覽器版本browser.js（未精簡）和browser.min.js（已精簡）。
然後，將下面的代碼插入網頁。

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

上面代碼中，browser.js是Babel提供的轉換器腳本，可以在瀏覽器運行。用戶的ES6腳本放在script標簽之中，但是要註明type="text/babel"。

另一種方法是使用babel-standalone模塊提供的瀏覽器版本，將其插入網頁。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

但是要註意的是，如果這樣做瀏覽器會是是轉換ES6代碼，會使性能下降。

1.Babel轉碼器