Getting started with ParcelJS and Laravel

One of my side-projects that is built on Laravel, we use mix that gets shipped by default for all things webpack. Mix is one awesome piece of software, simplifies a lot of things I have to do with webpack. After using Mix for the past two years. I decided to try out ParcelJS. This came in as a part of a cleanup project that I did during a few off days I had on the codebase. After successfully upgrading the design to Bootstrap 5 / tabler from the older version. And removing some of the older jQuery dependencies and limiting it to the specific components like the WYSIWYG for the moment, because I didn't want to go down a different rabbit hole trying to change that. It's a lot of code changes that have less ROI.

My move to ParcelJS was pretty straight forward.

I got started by installing the dependencies, I use node-sass and purgecss as additional dependencies. But it's not required if you are simply using CSS files and don't want to remove unused CSS from the final CSS build.

yarn add parcel-bundler parcel-plugin-purgecss node-sass --dev

Then I added the config files for purgecss and node-sass.

// purgecss.config.js

module.exports = {
    content: ["./resources/views/**/*.blade.php"],
    whitelistPatterns: [/selectize-.*/, /trumbowyg.*/, /item/],
};

// .sassrc

{
  "includePaths": ["node_modules"],
    outputStyle: "nested",
}

I modified the app.js Laravel ships to act as one of the entry point for parcel-bundler.

// app.js

import "trumbowyg/dist/ui/trumbowyg.css";
import "./../sass/app.scss";

import "bootstrap"
import "tabler/js/tabler.js";

Then in order to get the build kicked off,

// package.json

"build": "parcel build resources/assets/js/*.js resources/assets/js/admin/*.js resources/assets/js/admin/rewards/*.js --out-dir public/dist --public-url ./"