babel是一個js編譯器
能夠把瀏覽器不支持的代碼編譯成瀏覽器的代碼（把不支持的ES6特性編譯為ES5）
babel官網 https://www.babeljs.cn/
演示1
演示2
要安裝babel，首先需要安裝node.js
我之前已經安裝過了，cmd里輸出node -v即可查看
安裝node時會把npm也給裝了，npm國內使用比較慢，因此我使用了淘寶鏡像cnpm
如何進入想要的檔案夾，假設桌面上有個project目錄
1、cmd打開，輸入cd desktop，cd project
2、滑鼠打開進入project目錄，shift+右鍵-選擇-在此處打開powershell視窗
dir可以查看當前目錄里有多少目錄和檔案
. 當前目錄
.. 上級目錄
安裝配置程序：
1、使用cnpm init 初始化package.json 組態檔（所有選項直接回車選擇默認）
完成后專案檔案夾里就多了這個組態檔
當然你也可以使用 cnpm -y ，這樣就不會每一步都詢問你，而是直接使用默認配置
2、安裝babel
cnpm install --save-dev @babel/core @babel/cli
如果安裝失敗，有可能是因為權限的原因，
mac用戶就在代碼前面加上sudo，windows用戶就使用管理員身份打開cmd
安裝成功后會發現package.json多了一項配置內容
3、在package.json中添加一段代碼，作用是在cmd輸入cnpm run build，默認就會執行entry.js中的腳本
在entry.js中輸入一些ES6語法的代碼用于測驗
在cmd中輸入cnpm run build
4、我們可以發現，ES6代碼并沒有成功編譯為ES5，這是因為我們沒有定義轉換規則，缺少一個包preset-env
來安裝一下這個preset-env
cnpm install --save-dev @babel/preset-env
查看package.json發現已經安裝成功
5、下一步就是創建一個規則，來告訴babel要怎么編譯ES6代碼
創建一個檔案.babelrc（必須是這個命名）
代碼如下（注意是遵循json格式的語法）
需要注意的是，這里填寫的內容不是固定的，可以參考在package.json中是怎么寫的
然后再次進行編譯，可以看到代碼已經編譯為了ES5的語法
6、配置可以做的更詳細些
下面這段代碼的意思是，把ES6語法編譯成瀏覽器支持的上一個版本，即ES5
7、實作編譯后的代碼輸出到檔案中，修改package.json，把代碼輸出到index.js中
cnpm run build
專案中自動生成了index.js
8、每次手動編譯是比較麻煩的，修改package.json
-w會讓程式處于掛起狀態，保存后會更新代碼
下面是測驗：修改entry.js
新建index.html，引入index.js
編譯檔案
在瀏覽器訪問index.html
成功實作監聽的效果
9.嘗試一下ES6還在提案中的一些特性
修改entry.js代碼
查看編譯結果，有語法錯誤，報錯
安裝插件來支持這種語法
轉換類屬性的插件 @babel/plugin-proposal-class-properties
cnpm install --save-dev @babel/plugin-proposal-class-properties
安裝成功后在.babelrc.json中添加代碼
修改entry.js
瀏覽器查看結果
說明babel通過插件讓我們成功體驗到了ES6的新特性（還未被很好的支持）
最后，需要注意，由于版本更新，代碼都是會發生改變的，具體怎么操作看官方檔案！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/138819.html
標籤：JavaScript
上一篇：ES6中class的繼承