webstorm編輯器使用babel自動轉化es6
阿新 • • 發佈：2018-12-26
- node對es6相容程度不斷提高，書寫也不會受到限制
- 注意：低版本的node對es6支援不是很好，測試的話會出現很多問題，建議升級node版本，windows的使用者估計要到網站下載安裝才能升級
- 附網址：https://nodejs.org/en/download/
- 目前我用的是6.112
- 以下的所有node命令建議使用cmd命令執行，webstorm下邊的Terminal執行的時候有時候出現問題，等找到解決辦法後再更新
- 新建一個空的專案testEs6
- 常用的node命令
-
npm init 建立package.json檔案 npm install <module-name> -g/--save-dev/--save 安裝模組 npm update <module-name > 更新模組 npm uninstall <module-name > 解除安裝模組 - 安裝babel-cli
-
npm install babel-cli -g
安裝後就在命令列中使用 babel 命令
把依賴寫入 package.json
npm install babel-cli --save-dev
轉換命令：babel app.js --out-file build.js
在專案中新建一個es6資料夾，包含一個index.js檔案
轉換之前先將js檔案的編碼格式設定為es6
- 設定完之後使用命令babel ./es6/index.js --out-file ./es6/a.js
- 可以看到在es6的檔案家中新增一個a.js檔案，但是沒有轉換
- 想要轉換的話需要使用es2015
-
npm install --save-dev babel-preset-es2015 在根目錄下建一個.babelrc檔案，設定為 {"presets": ["es2015"]}
-
babel ./es6/index.js --out-file a.js 
- 轉換成功的a.js
- 自動轉化設定
- 點選這個Add watcher
- 或者在file>settings>Tools>File Watchers新增babel
- 我修改的
-
Arguments:
--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$
Qutput paths to refresh:
$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map
Working directory
$FileDir$
- 其中各個的設定的含義可以參考webstorm介紹：，下次再做介紹
- 附：https://www.jetbrains.com/help/webstorm/2016.2/new-watcher-dialog.html
- 這樣的話只要修改es6下的index.js就會轉義
