這次帶給大家WebStorm ES6怎麼使用babel，WebStorm ES6使用babel的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、語法支援設定
Preferences > Languages & Frameworks > JavaScript
#
二、Babel安裝
1、全域安裝
npm install -g babel-cli
2.目前項目，適用於使用不同babel版本的情況
npm install --save-dev babel-cli
# 三、Babel基本用法
# 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 babel example.js --out-file compiled.js # 或者 babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 babel src --out-dir lib # 或者 babel src -d lib # -s 参数生成source map文件 babel src -d lib -s
# 四、webstorm中使用babel
# 0、新建一個test.js文件，用作測試案例
input.map(item => item + 1);
1.專案中需要增加一個檔案： package.json
{ "name": "application-name", "version": "0.0.1"}2.目前專案中，安裝babel
npm install --save-dev babel-cli
3.使用WebStorm自帶的File Watcher功能
Preferences > Tools > File Watchers ，點選右側的 號，選擇babel，直接點選OK即可。
操作完成後，這時候修改JS程式碼，就會發現同步產生了一個test-compiled.js 文件，開啟後發現程式碼和test.js程式碼一致。
還需要設定轉碼規則，繼續往下看。 ↓↓↓
#
4、新增設定檔 <span style="color:#000000;font-family:NSimsun;">.babelrc</span>
Babel的設定檔是<span style="font-family:NSimsun;">.babelrc</span>，存放在專案的根目錄下。使用Babel的第一步，就是設定這個檔案。
# 該檔案用來設定轉碼規則和插件，基本格式如下。
{ "presets": [], "plugins": []}5.設定轉碼規則
<span style="font-family:NSimsun;">presets</span>欄位設定轉碼規則，官方提供以下的規則集，你可以依照需求安裝。
# ES2015转码规则 npm install --save-dev babel-preset-es2015 # react转码规则 npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则（共有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
咱們需要安裝es2015，指令如下：
npm install --save-dev babel-preset-es2015
6、更新設定檔 .babelrc
# 將相應的規則，儲存至設定檔中。
{
"presets": [
"es2015"
],
"plugins": []
}7、完成，查看效果
以上步驟操作完成後，即可實現修改程式碼後，自動將ES6程式碼轉換為ES5。
五、使用指令，手動編譯程式碼
# 1.更改package.json檔案
{
"name": "application-name",
"version": "0.0.1",
"devDependencies": {
"babel-cli": "^6.26.0"
},
"scripts": {
"build": "babel src -d lib"
}
}2.使用指令，產生ES5程式碼
npm run build
3、效果
會將src目錄下的程式碼，編譯到lib目錄下。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
建議閱讀：
以上是WebStorm ES6怎麼使用babel的詳細內容。更多資訊請關注PHP中文網其他相關文章！
