輕量的前端打包工具 parcel.js 安裝教學

近年前端在開發的時候往往都需要使用一些打包工具,方便我們在使用新的開發方式後可以在瀏覽器正常運作,其中最熱門的就是 webpack,但 webpack 本身很大也很複雜,如果想要感受打包工具威力的話,這邊我們可以先使用 parcel.js 這隻打包工具來幫助我們專案的開發。

parcel.js 官網

安裝的方式如下:

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

 

建立 package.json 檔案:

yarn init -y

npm init -y

 

接著建立一個 index.html 還有 index.js 的檔案,建立完後輸入指令

parcel index.html

 

然後我們就可以在 http://localhost:1234 看到網頁了。

接著我們建立一支檔案叫做 style.scss,並在 index.html 把它讀入:

<link rel="stylesheet" href="src/css/style.scss">

用 SCSS 撰寫一些樣式:

$main-color: purple;
$light-gray: #ddd;

body{
    background: $light-gray;
}

當我們再打包一次:

parcel index.html

就可以看到 parcel 幫我們把 scss 轉成 css 了。

 

 

課程推薦

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。