1. 程式人生 > >Babel和 WebStorm 自動轉碼配置

Babel和 WebStorm 自動轉碼配置

教程: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, 如圖:
在這裡插入圖片描述

到此配置完成…