自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 職人之路｜中階實戰篇
