什麼是 babel

babel 官方展示與文件頁面 https://babeljs.io/
babel 用來處理高 (新) 版本 JavaScript 處理舊版相容性編譯。

webpack 安裝 babel 處理套件 (babel-loader、@babel/core、@babel/preset-env)

webpack 分別安裝 babel-loader、@babel/core、@babel/preset-env，安裝指令如下

webpack 的套件 babel-loader、@babel/core、@babel/preset-env 簡介

babel-loader webpack 取用高版本 JS 引入處理

babel 用來處理高 (新) 版本 JavaScript 處理舊版相容性編譯，在 webpack 的中使用 babel-loader 取得 高 (新) 版的 JS 程式碼後，處理降版於舊版的相容性處理。

@babel/core 程式需要調用 Babel 的 API 進行編譯

babel-loader 取得 JS 程式碼後，透過 babel 的核心 @babel/core，將程式以調用 Babel 的 API 進行編譯。

@babel/preset-env 使用最新版本的 JavaScript 去編譯，不理會哪些語法需要轉換

指定 babel 版本，透過 @babel/preset-env 來處理最新版的 JavaScript 進行編譯與處理。

webpack.config.js 針對 babel 設定

webpack 套件 babel-loader、@babel/core、@babel/preset-env 下載完成後設定 webpack.config.js 檔，在 module.exports = {} 裡的 module: { rules: []} 加入 babel-loader 針對專案中的 .js 設定。

專案資料夾加入 .babelrc 檔與設定

在專案根目錄下新增 .babelrc 檔。

.babelrc 檔裡面加入下面內容。

webpack 執行 babel-loader 時讀取 .babelrc，而上面內容是在讀取 .babelrc 檔時取用 @babel/preset-env 的編譯器來處理新版的 JavaScript 程式碼，透過 babel 核心 @babel/core 進行新版 JavaScript 的相容性轉換，轉成舊版的 JavaScript 的寫法。

babel 轉譯 JS 新版語法降轉處理

修改 src/index.js 檔，查看 babel 降轉 JS ES6 處理

以上內容都設定好後，開啟 src/index.js 檔，加入 JS ES6 的程式碼，讓 webpack 進行編譯 babel 轉換。

以下是 babel 處理的 JS ES6 內容

JS ES6 程式碼主要是 let 變數與 => 箭頭函式的轉換，加入於 src/index.js 檔中，加入後存檔並執行指令 npm run watch。

webpack 執行開發模式後，會於 dist/js/index.js 檔中使用搜尋關鍵字 arr，接著可查看到 let arr 的部份轉換成 var arr，而箭頭函式轉成為傳統函式並帶 return 回傳內容。

為何要透過 babel 降轉 JS 新版語法

在某些瀏覽器或是舊版瀏覽器並不支持 JS 新的語法，以目前主流的瀏覽器都會有支援 JS ES6，但像是 ES 7, 8, 9 等等新版 JS 語法就無法支援，透過 babel 轉譯後轉換成 JS ES5 版本，讓主流瀏覽器能都支援。

babel 官網與文件設定與使用

babel 官網文件與設定說明

babel 官網中的相關設定與內容都會在 babel Docs 中可以查到。

以 babel 的 Presets (預設設定) 來說，在文件左方選單可見到 stage-0~3 的項目內容，這是針對比較舊的 JS 語法的設定，另外還有 react 與 typescript 的其他 JS 版別處理。

目前 babel 官方文件中沒有 stage-0~3 的項目內容，只有在 @babel/preset-env 文件中的 How Does it Work? 與 shippedProposals 中簡單提到。

在需要 babel 新版時，可參考官方文件來安裝與設定寫法，像是查尋新 JS 語法的處理，都可在文件中查到。
在使用 babel 需設定時，前往 Using Babel 來對應分類查詢。

babel Try it out 線上即時查看降轉

如果線上要直接撰寫新版的 JS 語法或程式碼，也可以使用 Try it out 輸入程式碼，查看降轉後的 JS 結果。