Skip to content

Instantly share code, notes, and snippets.

@NightJar
Created March 28, 2023 08:49
Show Gist options
  • Save NightJar/effa61ead57d30e4a96ff2beca9389a1 to your computer and use it in GitHub Desktop.
Save NightJar/effa61ead57d30e4a96ff2beca9389a1 to your computer and use it in GitHub Desktop.
I tested various JS & CSS build systems for the purpose of building a Silverstripe CMS module

All tests were in relation to building ConfigCodes

As the Silverstripe Admin ecosystem is severely out of date (WebPack 2), and I've also never learnt to configure a build system from scratch. It was time to up my game. Although these musings might not be entirely accurate, they are my experience, and the thoughts on that particular use case at that time.

The headings are in chronological order of testing.

Attempt to use Vite instead of Webpack

It seems not great for this purpose. Development is assumed to be on an entirely self-contained library or project. Development is only accessed via an index.html - this doesn't allow for dependency SCSS being pulled from another project (even just to be able to test via index.html).

Our situation relies on testing being done within the target environment, the Vite system doesn't seem well set up for plugin or peerDependency development. It can probably do it, but might not be the best tool for the job.

E.g. directly defining scss files to process doesn't seem to be a thing. They can be listed in build options, but this precludes dev time functionality and we may as well just use Rollup directly. Plus it leaves nonsense js files (from transpilation) in the output.

Configuration of sass is also quite direct, controlling the outfile seems difficult.

Importing dependencies from admin is troublesome as they often include jsx syntax and Vite does not expect this (causing Rollup to error). I do not see documentation on being able to set .js files to be parsed as .jsx

The tool is probably great if one sets up the expected project structure, it is very opinionated and stepping outside this expectation results in a lot of manual configuration to the point one may as well just use the underlying tools directly. The Vite layer on top is essentially bypassed, so this tool is not great for our purpose.

Building full webapp projects - probably great. Building pure JS libraries - probably alright. Building a sub-product for an existing webapp ecosystem - terrible.

Try Parcel instead of Webpack

Another "Zero Conf" bundler. Except this one isn't a bundler. And again the zero configuration claim means "build a webapp or simple library, otherwise be prepared for myriad of configuration".

I think I'll quit before I get too deep in it. It looks like the tool can be configured to do what we want, but the documentation focusses on capability/ethos, not technical specifics, which makes it very hard to follow.

Try Rollup instead of Webpack

Seems like quite a logical tool. Better than other recent "minimal configuration" tools I've tested. Documentation is good, plugins are listed with examples of when you'd need to use them which makes configuration much easier.

Does the compilation out of the box using the documentation, complete wiht common issues and plugins to fix (e.g. loading common js via node modules featuring JSX). Great easy first steps.

But now it's basically at the same point we got with Vite. The sass plugin is weird - seems to only support legacy options, and output is in JS that then gets converted... which seems to be a limitation of how rollup loads files for processing rather than the sass plugin.

The sass system seems to be anchored around importing stylesheets into javascript components directly, which the scss plugin would gather up, process, and produce a combined output file of. We could restructure the project to support this... but it seems like extra, extra hassle.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment