Webpack教學 (四):JavaScript 與 Babel

Mike
Mike
Sep 11, 2018 · 7 min read

自2015 年 ECMAScript 6,也就是我們說的 JavaScript ES6 發佈後,有著新的特性及語法可以更方便的使用在我們的開發上面,更在每年都推出新的ECMAScript規範,大幅提高工程師們在 JavaScript界開發的方便與優勢,更有著更簡潔的語法,可以更優雅的開發跟JavaScript有關的應用。

但是瀏覽器的支援度卻跟不上JavaScript版本的更新,所以新版本的JavaScript在現有的瀏覽器上面支援度很低,目前市面上支援度最高的版本大概就是 ECMAScript 5(ES5)了,為了要讓我們工程師可以使用新版本的JavaScript做開發又要瀏覽器可以支援,我們就需要有相對應的工具作轉換,把新版本的JavaScript轉換成 ES5 。

前面的章節提到webpack作為打包以及執行的使用,但是webpack本身並沒有提供把新版本的JavaScript轉換成 ES5的功能,所以我們需要靠神奇的轉換工具Babel~

Image for post
Image for post
Use next generation JavaScript, today.

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個指令

  1. watch : 執行編譯然後不中斷,設定成 development 版本。
  2. start : 執行一次性編譯,設定成 development 版本。
  3. deploy : 執行一次性編譯,設定成 production 版本。

然後看到安裝的工具裡面除了webpack以外也安裝了babel。

  1. babel-loader :webpack要去讀取任何檔案格式都需要靠loader這個工具去做判讀,然後再去做轉換,所以我們就會需要webpack掛載這個babel-loader。
  2. @babel/core: 程式需要調用Babel的API進行編譯。
  3. @babel/preset-env:可以使用最新版本的JavaScript然後去編譯,不用去理會哪些語法需要轉換。
Image for post
Image for post
先來看看我的資料夾結構

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屬性

這個就是webpack的laoder的設定方式

你會看到他在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

Image for post
Image for post
看到你的 js 被編譯成 index.bundle.js

然後打開你的 index.html 看看 console.log

Image for post
Image for post

你會看到結果有成功執行,代表編譯出來的code有成功被執行,我們再來看看 index.bundle.js 的檔案

Image for post
Image for post
因為我是用watch是設定development所以code不會被壓縮

你會看到原本的 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頻道,每周日不定時直播技術分享,如果對我的直播有興趣或是喜歡我的教學歡迎訂閱我


I am Mike

解決不了問題 就解決提出問題的人

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store