Thursday 24 October 2019

How can I reduce the boilerplate for my UI projects? (Webpack+Pug+SCSS/LESS+...)

Sometimes I need to write some GUI for my node projects. It's beautiful how easy it is to integrate software written in node in a Web environment.I prefer to stay vanilla, and not use any big web framework. I'm usually writing my HTML with Jade or Pug, my styles with SCSS or LESS and manipulate the DOM using the standard browser JS API. I build all the JS code (including the node stuff and the dependencies) into a single JS file for the web using Webpack. I absolutely love this environment and the workflow.I'm a bit bothered by the amount of boilerplate that goes into every project with an UI though. In fact I always end up with:many many extra dependencies (e.g. css-loader, node-sass, style-loader, to-string-loader, webpack, webpack-cli, webpack-dev-server, usually even more).a 50+ lines webpack.config.js.several NPM scripts in package.json to start, build or test the web assets.I usually just copy and paste all these things from previous project, and only modify what's needed. That takes several minutes, feels very repetitive, the package.json becomes all cluttered and I hate how much code is duplicated between my various UI projects. This happens even with the tiniest UI projects, while it never happens in pure Node.Would anybody have any ideas on how to remove all this boilerplate?​I've considered the idea of creating a metapackage that installs all the dependencies I usually need and offers a precooked webpack configuration that I can just require and, if needed, tweak. This solution seems quite hacky though... What's gonna happen if I decide to start use something else instead of Pug and SCSS, if I want to update some dependencies or if I start preferring different defaults? My metapackage would quickly become bloated with tons of dependencies even though each specific project only needs a few. The defaults would either become obsolete, or would break older projects...

Submitted October 24, 2019 at 03:49PM by RedditWideWeb

No comments:

Post a Comment