phpstorm下如何設(shè)置babel編譯

在phpstorm下使用擴(kuò)展工具直接進(jìn)行babel 編譯，主要是對(duì)jsx進(jìn)行編譯，不用再引入browser.min.js,對(duì)學(xué)習(xí)reactjs有用處，初學(xué)走了不少?gòu)澛凡排Ｍ麑?duì)初學(xué)者有所幫助，以下是配置步驟：

首先，安裝nodejs、phpstorm這個(gè)就不說(shuō)了，官網(wǎng)看；

然后，npm install babel babel-cli babel-preset-es2015 babel-preset-react
(注意 這里不用在意是否是全局安裝，nodejs也可以選在安裝在d e f盤(pán)……)

打開(kāi)phpstorm,點(diǎn)左上 file->setting->tools->External tools，然后點(diǎn)擊上邊的加號(hào)添加新的擴(kuò)展工具：

填寫(xiě)擴(kuò)展工具名稱(chēng)BABEL，不多說(shuō)，下面的配置就如上圖，配完點(diǎn)擊OK。

配置完后開(kāi)始設(shè)置babel運(yùn)行的快捷鍵：回到setting搜索 key，點(diǎn)擊keymap：

進(jìn)入External tools->BABEL(babel編譯工具的名稱(chēng))，雙擊add keyboard shortcut設(shè)置（我用的Alt+n,快捷鍵不沖突就行）
最后一步,點(diǎn)開(kāi)jsx文件，Alt+n 運(yùn)行：

生成的js文件在html頁(yè)面里引用，然后打開(kāi)瀏覽器就能看到效果，配置babel-preset-es2015 是一樣的方法，用不同快捷鍵。

對(duì)reactjs有一定了解，此文的配置方法才使用得當(dāng)(^__^) （在webstorm下一樣適用）。