Babel 轉碼器

介紹

Babel 是一個廣泛使用的 ES6 轉碼器，可以將 ES6 代碼轉爲 ES5 代碼，從而在現有環境執行。這意味着，你可以用 ES6 的方式編寫程序，又不用擔心現有環境是否支持。下面是一個例子。

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

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

這裏使用了ES6中的箭頭函數，有的是不支持的，那麼我把這個轉換成普通的函數，那麼就可以使用啦！

具體使用

安裝 babel-cli

    npm install --global babel-cli

配置 .babelrc

Babel的配置文件名爲.babelrc ,位於項目的根目錄下面
格式：

{
      "presets": [],
      "plugins": []
}

presets 字段爲設定轉碼規則，

# 最新轉碼規則
$ npm install --save-dev babel-preset-latest

# react 轉碼規則
$ npm install --save-dev babel-preset-react

# 不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然後，將規則加入到 .babelrc中

 {
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

命令轉碼

# 轉碼結果輸出到標準輸出
$ 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 轉碼。這意味着，如果項目要運行，全局環境必須有 Babel，也就是說項目產生了對環境的依賴。另一方面，這樣做也無法支持不同項目使用不同版本的 Babel。

一個解決辦法是將babel-cli安裝在項目之中。

$ npm install --save-dev babel-cli

package.json

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

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

 npm run build