Webpack教學 (四):實用的轉換工具Babel

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

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

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

1_4X1sxaHuXBaqxfqY5kFEMg.png

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。

螢幕快照 2018-11-15 下午3.28.21.png

首先你會看到我在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然後去編譯,不用去理會哪些語法需要轉換。

1_EqGFGcgzdAVDU3oAtZWWiA.png

先來看看我的資料夾結構

js的資料夾裡面放的就是我寫的新版本的 JavaScript ,其他的之前章節都有提到所以這邊就不先一一介紹了……

我們先來看webpack.config.js檔案

螢幕快照 2018-11-15 下午3.31.02.png

因為我這次只要轉換js而已,所以就不像之前說的那樣的還要一個src資料夾打包到dist資料夾,我就直接把output設定在原本的js資料夾,將編譯的檔案重新命名加上個 bundle 字樣

index.js => index.bundle.js

然後在 html 引入 index.bundle.js

http://”./js/index.bundle.js””

好了到這邊你可能會發現我雖然下載了Babel但是在webpack裡面還沒有設置任何跟Babel有關的設定,我們現在來設:

我們需要設定 loader 的話我們需要在webpack.config.js裡面加上module屬性

螢幕快照 2018-11-15 下午3.32.33.png

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

1_Ln1DCkmbGooBw1o-vBGZyw.png

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

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

1_hIvLmRdtR3jYBtExoXkUAA

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

1_E6Q1nF_BbRmfYa2HUykc9A.png

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

你會看到原本的 const 變成了var,然後原本的 =>變成了function,console.log前面也幫你補了return ,字串模板也幫你組了字串!

由此可知我們的code有成功被編譯成ES5版本,這樣我們開發者就可以放心的寫新版本的JavaScript。

但是你要正式上專案的時候還是要記得跑一次npm run deploy,因為production 編譯會幫你壓縮還有優化你的code,所以這點要特別注意!

完成的整包範例我放到我的GitHub上,想要參考的歡迎來看看,也可以多給我個星星感謝XD

螢幕快照 2018-11-15 下午3.37.23

參考

Babel 官網 : https://babeljs.io/

Babel GitHub : https://github.com/babel/babel

babel-loader : https://github.com/babel/babel-loader

 

工商時間

線上課程 —超越入門!Webpack 前端自動化開發

線上課程 — JavaScript & TweenMax 動態特效速成實戰

 

本文轉載自 Mike ,原文標題為:Webpack教學 (四):JavaScript 與 Babel

 

作者: YOTTA

YOTTA是台灣擁有最多專業老師的線上募資課程平台。當你對生活感到不足、覺得自己還有更多可能,卻苦無更多充分的時間進修額外專長、自我提升,YOTTA 提供了通往不同領域的階梯,讓你用最短的時間,創造最大的可能。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s