ES6 -- Babel 轉碼器

前言

我們都知道，es6是JavaScript的下一代標準，但現代瀏覽器對ES6新特性支援度不高，所以要想在瀏覽器中直接使用ES6的新特性就得藉助別的工具來實現。

Babel是一個廣泛使用的轉碼器，babel可以將ES6程式碼完美地轉換為ES5程式碼，所以我們不用等到瀏覽器的支援就可以在專案中使用ES6的特性。

配置檔案 .babelrc

Babel 的配置檔案是.babelrc，存放在專案的根目錄下。使用 Babel 的第一步，就是配置這個檔案。基本格式如下

{
  "presets": [],  // presets欄位設定轉碼規則
  "plugins": []
}

注意，以下所有 Babel 工具和模組的使用，都必須先寫好.babelrc。

babel-cli

Babel 提供babel-cli工具，用於命令列轉碼。

npm install --g babel-cli

babel ./src/index.js -o ./src/main.js

babel-preset-es2015

上述編譯其實並沒有進行，而是原樣輸出。這是因為我們沒有安裝相應的外掛，官方提示我們需要安裝 babel-reset-es2015

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

babel-core

某些程式碼需要呼叫Babel的API進行轉碼，就要使用babel-core模組。

npm install --save-dev babel-core

babel-polyfill

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

舉例來說，ES6在Array物件上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法執行，必須使用babel-polyfill，為當前環境提供一個墊片。

npm install --save-dev babel-polyfill

然後，在指令碼頭部，加入如下一行程式碼。

import 'babel-polyfill'

總結

在前端工程化越來越流行的今天，es6 + vue/ng/react + webpack。已經成為主流。

es6只是第一步，就是需要了解babel，其實難就難在配置這裡。願大家共勉，一起攀登這一座座大山！