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