I have miniscule experience of bundling frontend library but I got started by copy paste'd a whole repo from library idb-keyval (rollup) since I want a ready-to-be-used typescript frontend package template. I did this to mostly figure out the "basic" structure of popular library that is heavily used in real world.
Don't know if this gonna add to something, but as my fine grain of salt opinion, here what the most notable lessons I learned by doing that:
The very first mistake that I made is that I assume bundler controls the package entry, but it is done in package.json -> main (that should be pointing out to main output file). It kinda obvious but looking back it is easy to miss for someone who mostly made apps with bundler and only have to worry about npm run in package json.
Providing TS types is kinda important with people migrating to TypeScript nowadays. I don't want to be that one library author who gives devs headache to declare types any for my library because lack of type support (though I'm still suck in static typing and writing TS documentation).
Personally, I found rollup to be better and simpler for authoring frontend library since most of the time a frontend package wouldn't need webpack's elaborate build pipeline.
A frontend library for my taste would be:
Have typescript + babel + jest ready with babel plugins optional chaining and nullish coalescing operator added in.
One .ts file as bundler entry that only contains TS export, eg export { myFunc } from "./other-script.ts";. Keeping the entry .ts file clean with export only makes it easier to see which functions are being exposed when being imported in apps, with benefits of easier refactor IMO.
Publish with to npm with tools like np. Till this day, I haven't learned how to make github release manually since np did it all for me.
Thanks for all this, and sorry I didn't see it sooner. Yeah I think rollup of ESM module code for the front-end will ultimately be the way I go here. Not even doing typescript — all vanilla JS but breaking up a 1500 line monolith seems like it'll make everything so much easier to work with, especially as an open source project.
And yeah good call looking at an existing project. Made some progress on the research front but hands-on learning for this one seems a lot easier/faster.
So I have following on Snowpack recently, though still not dipping my toes on it. In recent major update they have their own bundler now. I still haven't figured out whether it is good enough for a frontend library project, but I think it's a good project to keep a tab on.
For further actions, you may consider blocking this person and/or reporting abuse
I have miniscule experience of bundling frontend library but I got started by copy paste'd a whole repo from library idb-keyval (rollup) since I want a ready-to-be-used typescript frontend package template. I did this to mostly figure out the "basic" structure of popular library that is heavily used in real world.
Don't know if this gonna add to something, but as my fine grain of salt opinion, here what the most notable lessons I learned by doing that:
A frontend library for my taste would be:
export { myFunc } from "./other-script.ts";. Keeping the entry .ts file clean with export only makes it easier to see which functions are being exposed when being imported in apps, with benefits of easier refactor IMO.Thanks for all this, and sorry I didn't see it sooner. Yeah I think rollup of ESM module code for the front-end will ultimately be the way I go here. Not even doing typescript — all vanilla JS but breaking up a 1500 line monolith seems like it'll make everything so much easier to work with, especially as an open source project.
And yeah good call looking at an existing project. Made some progress on the research front but hands-on learning for this one seems a lot easier/faster.
So I have following on Snowpack recently, though still not dipping my toes on it. In recent major update they have their own bundler now. I still haven't figured out whether it is good enough for a frontend library project, but I think it's a good project to keep a tab on.