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

在phpstorm下使用擴展工具直接進(jìn)行babel 編譯，主要是對jsx進(jìn)行編譯，不用再引入browser.min.js,對學(xué)習(xí)reactjs有用處，初學(xué)走了不少彎路才弄懂，希望對初學(xué)者有所幫助，以下是配置步驟：

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

立即學(xué)習(xí)“PHP免費學(xué)習(xí)筆記（深入）”；

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

打開phpstorm,點左上 file->setting->tools->External tools，然后點擊上邊的加號添加新的擴展工具：

填寫擴展工具名稱BABEL，不多說，下面的配置就如上圖，配完點擊OK。

配置完后開始設(shè)置babel運行的快捷鍵：回到setting搜索 key，點擊keymap：

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

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

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