Lately I’ve been feeling that NPM has had a small negative impact on web development workflows. It feels very difficult to have a dev environment without a bundler. What I’d like to do is just rely on ECMAScript modules (ESM) imports in development because I’m not worried about the network latency and chained requests in development. Then for production I can bundle everything for performance.
Ideally I’d use a package manager to download a bundled ESM version of a library into an arbitrary directory that I can than import in my JavaScript.
Why an arbitrary directory?
Because I’m building an app with Flask, and it only allows me to specify one folder for serving static files.
So in order for Flask to find the libraries I import, they have to be in that folder.
This is the kind of thing we used to be able to do with Bower, but Bower is no more.
They recommend using Yarn or NPM, except that Yarn and NPM don’t work this way.
The next thing I thought I’d try is to just curl the libraries into static/js/vendor myself.
But D3 doesn’t bundle any of its packages as ESM; the bundles are all immediately-invoked function expressions (IIFE).
The NPM package has a dist/ folder with the IIFE bundles, and a src/ directory with all of the constituent JavaScript files as modules.
The assumption probably being that if you need an import you’re using a bundler and NPM, so there’s no reason to provide a downloadable bundle as a module.
So if I want to vendor the ESM version of D3 myself, I have fetch the directory of all of those files instead of just getting one JavaScript module.
I don’t much care for this idea because it will make upgrading libraries more difficult and error prone since stale files might linger in our repo if we’re not careful.
So all of this leaves me with having to use a bundler in development.
It’s not the end of the world, I guess, but it does make starting up the environment more difficult because now you have to start two processes instead of just one: a Node process for the bundler and the Python process for the application.
It also means I probably want to keep my JS out of Flask’s static directory because that’s where the bundler will need to write to, so I’ll need to add static/js to .gitignore, which is also annoying.
It kinda bums me out that this is where we’ve ended up. Not because I think workflows relying on NPM and bundlers are bad, just because I’d like more options for projects. I wish Bower—or something like it—was still around. And I wish libraries would provide bundles both as IIFEs and modules.