Earlier this week I needed to make some changes and re-deploy an old Vue app. I hadn’t touched the codebase in over a year, and my experience with the rate of change in the front-end web space made me dread what would happen if I tried to re-awaken this thing.
Sure enough, after running a yarn install and launching the app using the scripts in package.json, a number of errors were displayed about Node/Webpack/Vue incompatibilities, and I didn’t really know where to start. I don’t use Vue on a daily basis these days, and so I don’t usually need to make an effort to keep fully up-to-date on its developments, but I knew I was several versions behind on vue, vue-loader, as well as all the sass and babel toolings. This wasn’t going to be a quick fix.
From the errors displayed on the console, I could see that the problem was largely related to the relationships between the various build tools. When I worked on this project more full-time (or even still today?) the vue-cli would manage the build process for you, and would create a number of files and directories containing various loader configuration setups and Webpack build files.
The problem was probably to do with something in those files no longer working - which is frustrating given the version-locked dependencies that are supposed to stop this kind of thing from happening. I didn’t have the time, expertise, or energy to try and debug this complex setup, and I couldn’t find many resources that helped me in migrating the build tools.
Could Parcel help?
In another project, I had recently used Parcel to manage webapp build processes. The tool promises to be “zero config” out of the box and - in my experience - it had been.
I saw that Parcel supports Vue and thought I’d see if it could help me solve my problems. I made a few tweaks in the codebase structure and small changes to make the app Vue 3 compatible (this was relatively straight forward) and I bumped a couple of other packages (such as the router).
I added the Parcel dependency and also removed a number of other dependencies, such as Webpack and babel-related ones, along with the various -loaders needed by Webpack. I launched the app using parcel and… it built! I got a hot-reloading development environment without any fuss. Awesome.
I was able to make the changes I needed to the app, build, and deploy it as a static webapp - all using Parcel and now with a cleaner and leaner project structure and dependency list.
Alternatives
I understand that, these days, Webpack 5 is supposed to also be “config-less” for most setups, but their docs explain that this is only the case for js and json files. If you want anything else, such as images or stylesheets, you’ll need extra loaders in your dependencies and extra configuration files to write and maintain.
More recently, I’ve heard great things about Vite too, but I’ve not yet had a chance to test this out.
Either way, if you want to build and manage your web projects without a fuss, then I can certainly recommend taking Parcel for a spin.