當我們使用的 JavaScript 語法瀏覽器不支援時,大家想到的第一個解決方案可能就是 Babel ,那麼說歸說,到底要怎麼跟先前提到的 Webpack 做結合,實際運用在開發上呢?讓我們繼續看下去~
環境設置
- 可以使用 npm 的指令
- 有安裝 Webpack 並有 package.json 、webpack.config.js
如果不知道這些是什麼,可參考
需求描述
現在有一支 all.js 的檔案為主要進入點,因為我們模組化管理 JavaScript 檔案的關係,所以在這支檔案內 import 了一些寫好的 JavaScript 檔案。
但這些 JavaScript 檔案有些是使用 ES6 以上的語法完成,因此可能在較低版本的瀏覽器會有不支援的情況發生,因此希望結合 Babel 把 ES6 以上的語法轉換成比較舊版本的寫法,並且透過 Webpack 打包輸出至 build 資料夾。
使用 npm 將 babel 下載回來
為了達成這個需求,我們要下載以下的檔案
- @babel/core :程式需要調用 Babel 的 API 進行編譯
- @babel/preset-env :告訴 babel 幫我們轉換成什麼版本的 JS 語法
- babel-loader: webpack 中要去讀取任何檔案格式都需要靠 loader 這個工具去做判讀,接著去做轉換。
因此我們可以利用 npm 把語法通通組起來:
- --save :代表希望把安裝的資訊寫到 package.json 依賴內,這個部份在比較高版本的 npm 已經是預設值了,但我還是習慣加上。
- -dev :有特別寫上的話,代表這是開發時才會用到的依賴項目
若是成功安裝,package.json 內會長得像這樣:
寫上自訂的指令
接著要在 package.json 內的 script 內自訂一些指令方便使用:
- test:是之前使用 Jest 進行測試的指令,與本次無關
- build:當專案完成時,使用這個指令將專案打包發布
- dev:開發時使用的指令
參數說明
- --mode:可設置開發版本( development ) 及產品版本( production ),差別在於有沒有進行最小化壓縮。
- --watch:持續監控編譯後的檔案,當來源檔案有變動時立即重新編譯,職行後若想終止監控,則按下 ctrl + c 終止。
調整 package.json 檔案
- 調整程式的進入點以及要輸出的目的地
- 加上 module 屬性
準備一段含有 ES6 語法的程式
在 all.js 內使用 let 以及 const 來宣告變數
試著編譯
先使用 npm run dev 觀察是否有透過 babel 並且由 Webpack 編譯輸出:
看起來是有順利輸出,來看看長什麼樣子
產生了一大堆的程式碼,而我們也可以發現原本使用 let 以及 const 來宣告的變數都被換成 var 了。
而瀏覽器的部分也順利運行編譯後的程式碼。
我們為了觀察而使用 npm run dev ,這會使編譯後的檔案並不是以優化的方式編譯,因此若做為正式發布,應該使用 npm run build ,這點要特別注意哦。