Offroaders123 / NBTify

A library to read and write NBT files on the web!
http://npm.im/nbtify
MIT License
42 stars 5 forks source link

Minified Build Support #44

Closed Offroaders123 closed 2 months ago

Offroaders123 commented 10 months ago

I've been curious about looking into using esbuild instead of tsc to compile the source for use in Node and the browser. Things are still a little over my head in terms of implementing it nicely in conjunction with my existing tsconfig.json settings, so I'm going to wait before committing things yet. There were a bunch of resources I found while trying to look into this, but it's still just a little over my head which route is the right way to go for NBTify.

I think my trouble is that I want to allow for multiple different ways to be able to import NBTify. In the browser, I'd like to have a fully ESM-compatible bundled build (minified, with dependencies), where you can still do (essentially) import { feature } from "https://cdn.dev/nbtify". I also want a fully-ESM compatible non-bundled (dependency-wise), maybe minified, build for Node.js (not in CommonJS). I think my current hangup is whether or not the Node.js build should be minified, as it sounds like it's less helpful for tree-shaking when used with a bundler (since you would want to import the Node ESM version when used with something like Vite, rather than the one that already has the dependencies bundled in, as for the CDN ESM build). And for another part of this, how does this all work with that I also have a CLI script for NBTify, as well as needing to use tsc to provide type definitions for the library as a whole, for any of these combinations?

So maybe it's not that the setup for it is very hard, but that I haven't fully decided yet as to which is the best way to target each of these use-cases.

And yeah, what's the proper way to manage your "bin": "./dist/bin/index.js" setup, in conjunction with regular-old library exports? What folder structure do people usually use for that? And are these two separate esbuild entry points?

Should I still provide a CommonJS-specific build output? Or is it encourage towards moving away from the dual-package setup, for new packages? I haven't personally had really any issues with needing to use NBTify in CommonJS thus far, but maybe someone else needs it for something, and they don't want to/can't migrate to ESM yet. I'd like to be able to make NBTify work for them, rather than have them need to figure out all of this on their own. Using ESM in the Electron backend is a valid issue, but I think that sounds to be less of an issue as of the last year or two, since it supports ESM now.

Lots of links related to this one https://souporserious.com/bundling-typescript-with-esbuild-for-npm/ https://github.com/souporserious/bundling-typescript-with-esbuild-for-npm https://esbuild.github.io/getting-started/#build-scripts https://esbuild.github.io/api/#outbase https://bundlephobia.com/package/nbtify@1.85.0 (Seems to be fairly similar in size to what esbuild does in my current demos for this) https://nodejs.org/api/packages.html#--input-type-flag (New find, didn't know `-e` had a flag for this! Awesome) https://medium.com/outbrain-engineering/the-hidden-power-of-package-json-a93143ec0b7c (https://github.com/sciencesakura/mutf-8/pull/17) https://dev.to/andreasbergstrom/simplify-typescript-builds-with-esbuild-and-skip-tsctsx-2124 https://github.com/vitejs/vite/issues/1585 https://news.ycombinator.com/item?id=28861433 https://www.youtube.com/watch?v=mSnDUMybZXk https://blog.logrocket.com/getting-started-esbuild/ https://esbuild.github.io/content-types/#tsconfig-json https://github.com/evanw/esbuild/issues/1343 (I noticed this with TS a while back in setting up a proper ESM build as well, I like that esbuild followed TS with this one. It's the choice to stay consistent, rather than trying to fix things on it's own) https://www.youtube.com/watch?v=z16rzIF5J40 (Unrelated, cool find) https://www.youtube.com/watch?v=alrLzBTHFH8 (current song)
Offroaders123 commented 6 months ago

I'm going to read over this issue again to see why I need to bundle it myself, it seems like it makes sense to just use a CDN to bundle it for plain-use instead? Maybe I'm forgetting part of the original concern, but what I just found through JSDelivr, it does appear to bundle dependencies for you, and it's still ESM-compatible!

https://cdn.jsdelivr.net/npm/nbtify/+esm https://www.jsdelivr.com/package/npm/nbtify

Offroaders123 commented 2 months ago

With the latest commits, you now can use NBTify over jsDelivr with an ESM bundle, so I think this solves most of the issues I was concerned with initially.

Seems like one of those cases where "the simple option is the best option", at least for the time being, until I decide to change stacks or something, since I'm still just using plain tsc for the build step. I like simple-and-to-the-point configs 🗣️