Babel入門——ES6轉ES5

原文轉載自 阮一峯教程

本文講解如何在nodejs環境下使用babel將ES6代碼轉ES5以及運行ES6的js文件

配置.babelrc文件

首先安裝es2015的presets字段

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

而後寫入.babelrc

{
    "presets":[
        "es2015"
    ]
}

命令行轉碼babel-cli

$ npm install --global babel-cli

基本用法以下：

# 轉碼結果輸出到標準輸出
$ 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中加入：

{
    "scripts":{
        "build":"babel src -d lib"
    }
}

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

$ npm run build

關於 npm scripts的更多用法詳見 阮一峯教程

babel-node

能夠直接運行ES6代碼

babel-node已安裝在 babel-cli中，因此無須額外安裝

$ babel-node index.js

babel-node也已經安裝在babel-cli中，無須額外安裝
一樣，改寫package.json

{
    "scripts":{
        "start":"babel-node index.js"
    }
}

babel-register

babel-register模塊改寫require命令，爲它加上一個鉤子。此後，每當使用require加載.js、.jsx、.es和.es6後綴名的文件，就會先用Babel進行轉碼。
首先安裝：

$ npm install --save-dev babel-register

使用時在文件頭加載：

require("babel-register");
require("./index.js");

而後，就不須要手動對index.js轉碼了。