使用Babel轉碼

使用Babel轉碼

Babel轉碼器就是將 ES6 代碼轉爲 ES5 代碼

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

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

1.怎樣使用Babel轉碼?
全局作用域的情況
步驟一：先在項目的根目錄裏創建好.babelrc文件，(這裏記住，一定要手動創建一個文件)
Babel 的配置文件是.babelrc，存放在項目的根目錄下。使用 Babel 的第一步，就是配置這個文件。

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

presets字段設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。但是要按照順序安裝

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

    # 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": [
            "es2015",
            "react",
            "stage-2"
            ],
            "plugins": []
        }

步驟二：利用babel-cli工具的命令行轉碼
Babel提供babel-cli工具，用於命令行轉碼，安裝命令如下:

    $ npm install --global babel-cli

基本用法：創建一個es6文件：01.js，(x => x*2)(1);

    //轉碼輸出
    $ babel 01.js
      (function (x) {
        return x * 2;
      })(1);
    # 轉碼結果寫入一個文件
    # --out-file 或 -o 參數指定輸出文件
    $ babel 01es6.js --out-file 01es5.js 
    #或者
    $ babel 01es6.js -o 01es5.js 
    # 如果需要將整個目錄轉碼
    # --out-dir 或 -d 參數指定輸出目錄
    $ mkdir es6 
    #創建文件 01.js 02.js 03.js
    $ babel es6 --out-dir es5
    #或者
    $balel es6 -d es5
    # -s 參數生成source map文件
    babel es6 -d sMap -s

上面代碼是在全局環境下，進行 Babel 轉碼。這意味着，如果項目要運行，全局環境必須有 Babel，也就是說項目產生了對環境的依賴。
另一方面，這樣做也無法支持不同項目使用不同版本的 Babel。解決辦法是將babel-cli安裝在項目中:
第一步：和全局情況的步驟一一樣，先在項目的根目錄裏創建好.babelrc文件然後。。。。
# npm install --save-dev babel-cli，改寫babel-cli目錄裏面的package.json

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build1": "babel 01es6.js -o 01es5.1.js",
    "build2": "babel es6 -d es5.1"
  }
}

上面如果執行那個項目，就應該將哪個項目放入”scripts”鍵所對應的值裏，
build1就是將根目錄中的01es6.js文件轉碼爲01es5.1.js;
build1就是將根目錄中的es6目錄轉碼爲es5.1目錄
第三步：將上面改寫的package.json文件複製到和項目的根目錄，也就是你當前操作的目錄
轉碼的時候，就執行下面的命令。

 $ npm run build1
 $ npm run build2

2.babel-cli工具babel-node
babel-cli 工具自帶一個babel-node命令，提供一個支持運行es6的REPL環境
不用單獨安裝，而是隨babel-cli一起安裝。然後，執行babel-node就進入REPL環境,
使用babel-node替代node，這樣script.js本身就不用做任何轉碼處理。

    $ babel-node
    > (x => x * 2)(1)
    2
    或者
    $ babel-node 01es6.js
    2

如果babel-cli不是全局安裝，那麼就要安裝在項目中，這時候如果需要執行哪個項目就要在package裏面配置哪個文件或者目錄：

{
  "scripts": {
    "xx": "babel-node yy.js"
  }
}
執行方法：
$ babel-node xx

3. babel-register模塊改寫require命令
每當使用require加載.js、.jsx、.es和.es6後綴名的文件，就會先用Babel進行轉碼。

  $ npm install --save-dev babel-register

例如我新建一個01es6.1.js文件，然後先引進轉碼後的01es6.js文件，
注意：01es6.1.js文件並沒有轉碼，只會對require命令加載的文件轉碼。
由於它是實時轉碼，所以只適合在開發環境使用。

    require("babel-register");
    require("./01es6.js");
    (x => x*2)(1);

4.babel-core
如果某些代碼需要調用 Babel 的 API 進行轉碼，就要使用babel-core模塊。安裝命令如下：

    $npm install babel-core --save

安裝之後到babel-core目錄下的 README.md文件裏查看

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

網頁實時將 ES6 代碼轉爲 ES5，對性能會有影響。
7.以Babel配合Browserify轉換代碼。
首先，安裝babelify模塊

    $ npm install --save-dev babelify babel-preset-latest

8.traceur轉換
作爲命令行工具使用時，Traceur 是一個 Node 的模塊，首先需要用 Npm 安裝。

    $ npm install -g traceur
    $ traceur 01es6.js -o 01es5.js