自2015 年 ECMAScript 6,也就是我們說的 JavaScript ES6 發佈後,有著新的特性及語法可以更方便的使用在我們的開發上面,更在每年都推出新的ECMAScript規範,大幅提高工程師們在 JavaScript界開發的方便與優勢,更有著更簡潔的語法,可以更優雅的開發跟JavaScript有關的應用。
但是瀏覽器的支援度卻跟不上JavaScript版本的更新,所以新版本的JavaScript在現有的瀏覽器上面支援度很低,目前市面上支援度最高的版本大概就是 ECMAScript 5(ES5)了,為了要讓我們工程師可以使用新版本的JavaScript做開發又要瀏覽器可以支援,我們就需要有相對應的工具作轉換,把新版本的JavaScript轉換成 ES5 。
前面的章節提到webpack作為打包以及執行的使用,但是webpack本身並沒有提供把新版本的JavaScript轉換成 ES5的功能,所以我們需要靠神奇的轉換工具Babel~
Babel是一個目前被廣泛使用的編譯工具,可以運行在許多自動化工具上面,我們這次就要搭配webpack + Babel來把新版本的JavaScript編譯成 ES5。
一樣我們透過npm指令來安裝webpack。
> npm install webpack webpack-cli --save-dev
再來安裝Babel( 這邊我們安裝最新的Babel7 )。
npm install babel-loader @babel/core @babel/preset-env --save-dev
這些都安裝好了後我們來看看 package.json。
首先你會看到我在Script裡面加入了3個指令
- watch : 執行編譯然後不中斷,設定成 development 版本。
- start : 執行一次性編譯,設定成 development 版本。
- deploy : 執行一次性編譯,設定成 production 版本。
然後看到安裝的工具裡面除了webpack以外也安裝了babel。
- babel-loader :webpack要去讀取任何檔案格式都需要靠loader這個工具去做判讀,然後再去做轉換,所以我們就會需要webpack掛載這個babel-loader。
- @babel/core: 程式需要調用Babel的API進行編譯。
- @babel/preset-env:可以使用最新版本的JavaScript然後去編譯,不用去理會哪些語法需要轉換。
js的資料夾裡面放的就是我寫的新版本的 JavaScript ,其他的之前章節都有提到所以這邊就不先一一介紹了……
我們先來看webpack.config.js檔案
因為我這次只要轉換js而已,所以就不像之前說的那樣的還要一個src資料夾打包到dist資料夾,我就直接把output設定在原本的js資料夾,將編譯的檔案重新命名加上個 bundle 字樣
index.js => index.bundle.js
然後在 html 引入 index.bundle.js
<script src=”./js/index.bundle.js””></script>
好了到這邊你可能會發現我雖然下載了Babel但是在webpack裡面還沒有設置任何跟Babel有關的設定,我們現在來設:
我們需要設定 loader 的話我們需要在webpack.config.js裡面加上module屬性
你會看到他在loader上面設定了babel-loader,然後Babel上面調用了@babel/preset-env,好讓我們可以直接使用編譯最新版本的JavaScript,我們實際來看看編譯結果,我先在寫了一段 code 在 index.js
const Name = [“Mike”, “Jacky”, “Andy”, “Scars”]Name.forEach((obj, idx)=> console.log(`${idx} => ${obj}`))
這個裡面我使用了好幾個ES6的語法,包含 const、字串模板、箭頭函示,然後執行 npm run watch
然後打開你的 index.html 看看 console.log
你會看到結果有成功執行,代表編譯出來的code有成功被執行,我們再來看看 index.bundle.js 的檔案
你會看到原本的 const 變成了var,然後原本的 =>變成了function,console.log前面也幫你補了return ,字串模板也幫你組了字串!
由此可知我們的code有成功被編譯成ES5版本,這樣我們開發者就可以放心的寫新版本的JavaScript。
但是你要正式上專案的時候還是要記得跑一次npm run deploy,因為production 編譯會幫你壓縮還有優化你的code,所以這點要特別注意!
完成的整包範例我放到我的GitHub上,想要參考的歡迎來看看,也可以多給我個星星感謝XD
參考
Babel 官網 : https://babeljs.io/
Babel GitHub : https://github.com/babel/babel
babel-loader : https://github.com/babel/babel-loader
最後
Babel 不只轉換新版本的JavaScript,也可以轉換React 的 jsx 還有TypeScript等等,這邊只是做個初步的介紹跟使用,不過已經可以應付大部分的工作需求,再來只要花點時間整合其他功能即可!如果有任何問題跟想法歡迎留言給我~
我有經營小小的youtube頻道,每周日不定時直播技術分享,如果對我的直播有興趣或是喜歡我的教學歡迎訂閱我
工商時間
線上課程 — 職人必修的 RWD 網頁入門班
線上課程 — JavaScript & TweenMax 動態特效速成實戰
線上課程 — 超越入門!Webpack 前端自動化開發
線上課程 — 現代 JavaScript 職人之路|入門篇
線上課程 — 現代 JavaScript 職人之路|中階實戰篇