Hbuilder中添加Babel自動編譯

[說明：轉載請標明出處。]

Hbuilder是一個不錯的H5開發IDE。

Babel是EMCAScript最新標准的編譯器，很多ES的最新特性都可以在Babel中嘗試。

如果可以有辦法在Hbuilder中直接使用ES6，並通過Babel自動轉化為ES5，那么對於使用ES6+Hbuilder進行開發調試將會非常方便。

簡單做了些配置，可以通過以下步驟達到目的。

1. Hbuilder配置 - 打開ES6

   

   

    

2. 安裝NPM
   1. 下載NPM安裝
   2. 通過NPM安裝babel-cli

      npm install --global babel-cli

   3. 安裝babel preset

      npm install --global babel-preset-env

3. 配置Hbuilder中的預編譯器設置

   

   

   

   根據實際情況，填寫以上信息。

4. 測試JS文件保存，自動生成babel轉換后的JS代碼

　　　　每次項目中的JS文件保存后，都會將編譯后的代碼文件放在項目中dist/下。

以上步驟，在windows環境下驗證。