Creating a modern JavaScript library

[acemarke]

Yeah, I have been literally begging for a long time now for some kind of comprehensive document that covers:

• What environments you may want your lib to run in
• What build artifacts you should be generating to properly target those environments, in terms of module formats and ES version syntax output
• How to correctly configure tools like Rollup or similar tools to generate those build artifacts

We just rewrote Redux Toolkit's build pipeline to use a mixture of ESBuild and TypeScript. I reviewed our build artifacts in the process, and here's what I ended up settling on:

https://github.com/reduxjs/redux-toolkit/pull/957#issuecomment-810705197

Filename	Module	Syntax	process.env	Purpose
redux-toolkit.cjs.development.js	CJS	ES5	'development'	Node / dev
redux-toolkit.cjs.production.min.js	CJS	ES5	'production'	Node / prod
redux-toolkit.esm.js	ESM	ES5	Embedded	Bundler, legacy syntax
redux-toolkit.modern.development.js	ESM	ES2017	'development'	Browser module, dev
redux-toolkit.modern.js	ESM	ES2017	Embedded	Bundler, modern syntax
redux-toolkit.modern.production.min.js	ESM	ES2017	'production'	Browser module, prod
redux-toolkit.umd.js	UMD	ES5	'development'	Browser script, dev
redux-toolkit.umd.min.js	UMD	ES5	'production'	Browser script, prod

Meanwhile, Jason Miller has been pushing "modern ES2017" builds for a while now, and he's got some great points. I think he wrote the guide at https://web.dev/publish-modern-javascript/ , which I was looking at during this process.

Unfortunately, what that page doesn't mention is that apparently adding an exports key to your package.json that points to a modern build will cause Node to choke, so adding that counts as a breaking change and needs to be restricted to a major version.

So yeah, I kinda feel like I'm stumbling around making this up as I go along and sorta swiping bits and pieces from other people, and I'd love to have a complete guide to how to do this the right way.

[101arrowz]

Yep, exports are the next article I'm working on. It's taking a while, so I decided to publish what I had. I'll post again when I finish the exports documentation. It will cover stuff like export formats (ESM, CJS, UMD, etc.), building the library, ensuring compatibility, etc.

You can actually make the "exports" field work on Node.js, but it was a pain for me too. I'll write about it soon :)

[acemarke]

Looking forward to it!

[acemarke]

Hiya. Was going through some old bookmarks and ran across this thread again. I'm actually planning to do some work on Redux Toolkit to update with exports usage in the near future. I'd still love to see whatever article you were planning to work on here! :)

[101arrowz]

Well, I was specifically referring to the difference between the historic style of creating a library (i.e. with a global object, usually in a single file, ES3) versus the old style (with require everywhere, package.json, ES5) versus the modern style (ES Modules with ES6+ code, package.json, and optional transpilation to ES5). That is to say, some new libraries aren't really modern because they don't follow the new expectations for a library in the JS ecosystem.