4 ms·

This seems like a great place to ask how the ever-loving shit you get a front-end project with simple NPM-fetched libraries to bundle into either a single .js f

This seems like a great place to ask how the ever-loving shit you get a front-end project with simple NPM-fetched libraries to bundle into either a single .js file ready to go in a <script> tag, or a block of <script> tags with all the referenced .js files in a directory and ready to serve. Ideally with typescript support, but surely (ha. ha. ha. ha.) I can just tack that on top and point whatever-this-is at typescript's output directory and my package.json, so that shouldn't be a problem (yeah, right...). I've written JS professionally for probably 12 or 13 out of the last 22 years, but I skipped the first couple iterations of frontend bundlers and tooling (kept rocking it old-school and just including plain .js files with script tags) until React, so I seem to have missed that intermediate phase, and now I cannot find it. I've lost probably 3 to 4 hours to trying to figure this out, last couple times I looked.

SahAssar 4y ago
For me esbuild has worked pretty well. Given a index.js as the entrypoint for your app: npx esbuild index.js --bundle --sourcemap --minify --outfile=out.js --format=esm esbuild is also pretty quick and does not have a lot of npm depencencies thanks to being a go binary. npx should download and run the binary for you and npx is almost always installed with node automatically.
- corrral 4y ago
  Thank you. It was really hard to figure out which tools even could do this so I knew which one I ought to deeply "RTFM" for, which was really frustrating to me because it seemed like the most obvious default behavior for any JS build/bundle tool, which should be what it did if you just typed "some-build-tool build" or "bundle" or whatever, from your project root with nothing but a package.json containing a "main" entry.
  - SahAssar 4y ago
    I agree that this is really not a good experience. I prefer js projects that don't rely on build tools at all for this reason, but most devs, frameworks and libraries don't support such a use-case. When I have to use build-tools I usually go for esbuild.

SahAssar 4y ago

For me esbuild has worked pretty well. Given a index.js as the entrypoint for your app: npx esbuild index.js --bundle --sourcemap --minify --outfile=out.js --format=esm esbuild is also pretty quick and does not have a lot of npm depencencies thanks to being a go binary. npx should download and run the binary for you and npx is almost always installed with node automatically.

corrral 4y ago
Thank you. It was really hard to figure out which tools even could do this so I knew which one I ought to deeply "RTFM" for, which was really frustrating to me because it seemed like the most obvious default behavior for any JS build/bundle tool, which should be what it did if you just typed "some-build-tool build" or "bundle" or whatever, from your project root with nothing but a package.json containing a "main" entry.
- SahAssar 4y ago
  I agree that this is really not a good experience. I prefer js projects that don't rely on build tools at all for this reason, but most devs, frameworks and libraries don't support such a use-case. When I have to use build-tools I usually go for esbuild.