輕量的前端打包工具 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 了。