首頁 > 開發工具 > PHPstorm > phpstorm下如何設定babel編譯

phpstorm下如何設定babel編譯

藏色散人
發布: 2021-03-18 18:18:49
轉載
2040 人瀏覽過

下面由phpstorm教學專欄跟大家介紹phpstorm下如何設定babel編譯,希望對需要的朋友有幫助!

phpstorm下如何設定babel編譯

phpstorm下設定babel 編譯

在phpstorm下使用擴充工具直接進行babel 編譯,主要是對jsx進行編譯,不用再引入browser.min.js,對學習reactjs有用處,初學走了不少彎路才弄懂,希望對初學者有所幫助,以下是配置步驟:

首先,安裝nodejs、phpstorm這個就不說了,官網看;

然後,npm install babel babel-cli babel-preset-es2015  babel-preset-react
(注意這裡不用在意是否是全域安裝,nodejs也可以選在安裝在d e f碟…)

開啟phpstorm,點左上file->setting->tools->External tools,然後點選上邊的加號新增新的擴充工具:

phpstorm下如何設定babel編譯

填入擴充工具名稱BABEL,不多說,下面的設定就如上圖,配完點擊OK。

配置完後開始設定babel執行的快速鍵:回到setting搜尋key,點選keymap:

進入External tools->BABEL(babel編譯工具的名稱),雙擊add keyboard shortcut設定(我用的Alt n,快捷鍵不衝突就行)
最後一步,點開jsx文件,Alt n 運行:

phpstorm下如何設定babel編譯

產生的js文件在html頁面引用,然後開啟瀏覽器就能看到效果,設定babel-preset-es2015 是一樣的方法,用不同快捷鍵。

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

以上是phpstorm下如何設定babel編譯的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板