Babel轉碼快速入門

閱讀基礎：能在node環境下使用npm/yarn

Babel 能夠將 ES6 代碼轉爲 ES5 代碼，從而能夠在不支持 ES6 的環境運行，下面是一個例子：

//轉碼前
a=>a+1;

//轉碼後
(function (a) {
  return a + 1;
});

//上面的代碼使用了箭頭函數，Babel 將其轉爲普通函數。

Babel 雖然支持瀏覽器環境，但網頁實時將 ES6 代碼轉爲 ES5 代碼會對網頁性能有影響，因此咱們須要使用構建工具在生產環境將 ES6 代碼進行提早轉碼。

配置babel

Babel 只能轉換語法（如箭頭函數），不支持新的全局變量，好比：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等。
若是想讓這些方法運行，必須使用 babel-polyfill ,爲當前環境提供該方法。

babel、babel-polyfill 安裝：

$ yarn add babel-preset-env --dev
$ yarn add babel-polyfill --dev

安裝完成後，咱們能夠經過.babelrc文件或者package.json文件對 babel 進行配置；配置文件能夠根據具體的需求進行配置：英文文檔 中文文檔。

• 方法一：新建 .babelrc 文件，並添加如下字段：

{
  "presets": [["env",{"useBuiltIns": true}]]
}

• 方法二：在 package.json 文件中增長字段：

{
  // ...
  "babel": {
    "presets": [["env",{"useBuiltIns": true}]]
  }
}

babel-cli 命令行轉碼

Babel 提供 babel-cli 工具，可用於命令行轉碼，工具安裝：

$ yarn add babel-cli --dev

babel-cli 基本用法：

# 輸出轉碼結果
$ babel index.js

# 單文件轉碼
# --out-file 或 -o 參數指定輸出文件
$ babel index.js --out-file compiled.js
$ babel index.js -o compiled.js

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

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

咱們能夠在 package.json 文件中增長腳本：

{
  // ...
  "scripts": {
    "build": "babel src -d build"
  },
}

轉碼的時候，就執行下面的命令。

$ yarn run build

babel-node

babel-cli 工具自帶一個 babel-node 命令，提供一個支持 ES6 的 REPL 環境，並且能夠直接運行 ES6 代碼。

執行 babel-node 就能夠進入REPL環境：

$ babel-node
> (x => x * 2)(1)
2

babel-node 命令能夠直接運行 ES6 腳本。將上面的代碼放入腳本文件 es6.js，而後直接運行。

$ babel-node es6.js
2

咱們能夠改寫 package.json：

{
  // ...
  "scripts": {
    "script-name": "babel-node test.js"
  }
}

用 babel-node 代替 node, test.js 就不須要作任何轉碼處理了。