NPM library best practices?
I was creating my own NPM library, @menglinmaker/soundfont3 but there are so many technical decisions:
- So many bundlers to choose from: esbuild, webpack, rollup, snowpack, tsup...
- Do I bundle to 1 file? Tree-shake?
- So many testing frameworks too: jest, vitest...
- So many eslint plugins.
- How do I even test if ESM and CJS imported correctly?
Attempt:
I decided to take inspiration from a few GitHub repos like vuejs/core, solidjs/solid, mrdoob/three.js.
This is what I pickup up on:
- Use script "preinstall" to force the use of "pnpm" for development. Very opinionated decision, but improves consistency with setup and CI.
- Use script "postinstall" to ensure git hooks are installed.
- Lint and format at least every pre-commit.
- Use "eslint-plugin-compat" to detect browser compatibility issues for web apis.
Areas for improvement in JS ecosystem:
- Lack of runtime compatibility linting - does api exist on Node, Deno, Bun, Cloudflare worker...?
TLDR:
Mostly unsure what bundler + config and testing library to use.
Eg: Apparently it's possible to unit test on a browser?
Boilerplate repo:
https://github.com/MengLinMaker/npm-library-boilerplate
GitHub
GitHub - MengLinMaker/npm-library-boilerplate: Boilerplate for crea...
Boilerplate for creating NPM library with CJS, ESM and DTS output. - MengLinMaker/npm-library-boilerplate
9 Replies
shipping to jsr is simple, send the ts files and thats it
Interesting idea with only ESM support. Sounds like JSR bundles TypeScript to ESM and d.ts for you. Then users download your package from @jsr/PackageName.
Cross runtime support is an interesting feature. Are they adding polyfills/ponyfills?
However, I don't see this working well with WASM based libraries generated from Emscripten, which is usually in CommonJS without TypeScript.
i think unjs did something to better build stuff
GitHub
GitHub - unjs/unbuild: 📦 An unified javascript build system
📦 An unified javascript build system. Contribute to unjs/unbuild development by creating an account on GitHub.
Ah yes, I saw that: unbuild. Tried it briefly before.
Docs aren't great though, but easy to use. Compiles to a .js + d.ts file.
Not easy to debug? - like how do you map from an error in that one file to the original source code?
If I could figure out how to preserve folder structure, I would definitely consider. Or if there are alternative debugging methods.
i didnt use it, i only know it exists
GitHub
unbuild/examples/2.mkdist at main · unjs/unbuild
📦 An unified javascript build system. Contribute to unjs/unbuild development by creating an account on GitHub.
maybe this example should do it
looks like it preserves the structure
Alright, I don't think I know what I'm doing. But unbuild definitely sounds like a good solution created by someone who is heavily involved in open source. So I'll just use the most basic config.
Debugging might be more difficult for consumers.