WebStorm ES6 語法支持設置&babel使用及自動編譯(詳解)
一、語法支持設置
Preferences > Languages & Frameworks > JavaScript
二、Babel安裝
1、全局安裝
npm install -g babel-cli
2、當前項目，適用于使用不同babel版本的情況
npm install --save-dev babel-cli
三、Babel基本用法
# 轉(zhuǎn)碼結(jié)果輸出到標準輸出 babel example.js # 轉(zhuǎn)碼結(jié)果寫入一個文件 # --out-file 或 -o 參數(shù)指定輸出文件 babel example.js --out-file compiled.js # 或者 babel example.js -o compiled.js # 整個目錄轉(zhuǎn)碼 # --out-dir 或 -d 參數(shù)指定輸出目錄 babel src --out-dir lib # 或者 babel src -d lib # -s 參數(shù)生成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 ，點擊右側(cè)的+號，選擇babel，直接點擊OK即可。
操作完成后，這時候修改JS代碼，就會發(fā)現(xiàn)同步生成了一個test-compiled.js 文件，打開后發(fā)現(xiàn)代碼和test.js代碼一致。
還需要配置轉(zhuǎn)碼規(guī)則，繼續(xù)往下看?！?/span>
4、添加配置文件 .babelrc
Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。
該文件用來設置轉(zhuǎn)碼規(guī)則和插件，基本格式如下。
{ "presets": [], "plugins": []}
5、設置轉(zhuǎn)碼規(guī)則
presets字段設定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。
# ES2015轉(zhuǎn)碼規(guī)則 npm install --save-dev babel-preset-es2015 # react轉(zhuǎn)碼規(guī)則 npm install --save-dev babel-preset-react # ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有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
將相應的規(guī)則，保存至配置文件中。
{
"presets": [
"es2015"
],
"plugins": []
}
7、完成，查看效果
以上步驟操作完成后，即可實現(xiàn)修改代碼后，自動將ES6代碼轉(zhuǎn)換為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目錄下。
以上這篇WebStorm ES6 語法支持設置&babel使用及自動編譯(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于JavaScript中事件與異常捕獲的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-02-02
this,this,再次討論javascript中的this,超全面(經(jīng)典)
在JavaScript中，this 的概念比較復雜。除了在面向?qū)ο缶幊讨?，this 還是隨處可用的。這篇文章介紹了javascript中的this相關知識，對javascript this相關知識感興趣的朋友一起學習吧2016-01-01
這篇文章主要介紹了threejs?模型添加文字的幾種方式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)自定義拍攝組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
js中flexible.js實現(xiàn)淘寶彈性布局方案
這篇文章主要為大家詳細介紹了js中flexible.js實現(xiàn)淘寶彈性布局方案，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JS三級可折疊菜單實現(xiàn)方法,以實例形式分析了asp.net結(jié)合JavaScript實現(xiàn)三級折疊菜單的相關技巧,涉及JavaScript節(jié)點操作實現(xiàn)方法,需要的朋友可以參考下2016-02-02
在前端開發(fā)過程中,通過使用JS的正則表達式來校驗輸入的郵箱或者手機號是否正確,這也是一個非常常見的業(yè)務情景需求,下面這篇文章主要給大家介紹了關于利用JS正則表達式驗證郵箱和手機號的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)拍照打卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
在 JavaScript 中，對象是引用類型的數(shù)據(jù)，其優(yōu)點在于頻繁的修改對象時都是在原對象的基礎上修改，并不需要重新創(chuàng)建，這樣可以有效的利用內(nèi)存，不會造成內(nèi)存空間的浪費，對象的這種特性可以稱之為 Mutable，中文的字面意思是「可變」2016-05-05
forms 返回一個集合包含了了當前文檔中的所有form元素，下面通過示例為大家介紹下document.forms用法,需要的朋友可以參考下2014-06-06