Babel和 WebStorm 自動轉碼配置
阿新 • • 發佈:2019-01-04
教程:ES6標準入門
第一步
在工程的目錄下新建 .babelrc 檔案, 用命令列 echo>.babelrc 建立.
第二步
在工程目錄下新建package.json 檔案, 並對其進行json格式初始化, 輸入{} 即可
第三步
# 最新轉碼規則 $ npm install --save-dev babel-preset-latest # 不同階段語法提案的轉碼規則(共有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
區域性(save-dev) 安裝相應的轉碼規則, 按照教程的命令輸入, 轉碼規則安裝時要 cd 到工程的目錄下. 然後在 .babelrc 配置好已經安裝的轉碼規則, 如下:
{
"presets": [
"latest",
"stage-2"
],
"plugins": []
}
第四步
npm install --global babel-cli
全域性(global) 安裝 babel-cli, 用於命令列轉碼。常用轉碼命令:
# 轉碼結果輸出到標準輸出 $ babel example.js # 轉碼結果寫入一個檔案 # --out-file 或 -o 引數指定輸出檔案 $ babel example.js -o compiled.js
WebStorm自動轉碼配置
第一步
cd 到專案根目錄, 安裝:
npm install babel-preset-env
第二步
開啟 WebStorm 的FileWatcher, 新增全域性安裝的 babel.cmd, 目錄在 user/1544/APPData/npm/… 下, 注意: 要把 argument 最後改成 env, 如圖:
到此配置完成…