Readying JavaScript packages for better future

Modern web applications consist of hundreds and thousands of files of different kinds. To manage this complexity and streamline app delivery developers started using the same approach as on desktops: compile & link. In relation to a web application compilation usually means transpiling, while linking means bundling.

Same goes for libraries and other packages that web applications depend on and install from registries like npm. But the actual code in these registries is almost always exists in a form of the old ES5. It is harder to read and debug such code, it may run worse on modern engines, and it will be down compiled one more time during the app build process.

Publishing ES5 code isn't that necessary anymore and may be avoided. An app could rely on the code in it's original form while providing better efficiency, dead code elimination, and easier debugging experience.

Babel became a de facto tool for down compiling JavaScript code to older versions and could be used as an integration point. Combining it with ECMAScript Modules and staged JavaScript development process governed by TC39 group it is possible to define a set of rules for how to publish and consume packages in their original form.

Raw Module Specification or RMS does exactly that. It is a convention for modern JavaScript packages and modules aiming to avoid excess code recompilation and deoptimization, retaining code readability and ease of debugging.

Specification

Package requirements

• Package MUST follow Node.js ESM package format and have the module type in its package.json.
• Package MUST contain valid ESM modules.
• Package MUST NOT contain any code using features unsupported in the latest stable @babel/preset-env or core-js. Usually this means simply not using unfinished proposals.
• Upgrading to a newer major Babel version IS a breaking change.

Installing a package

• Install the latest stable @babel/preset-env and core-js.
• Install the package.
• At build time compile the package with Babel using @babel/preset-env preset and load stable polyfills from core-js (this could be done in preset options setting corejs and useBuiltIns props).

Upgrading the package

• Upgrade @babel/preset-env and core-js to their latest stable versions.
• Upgrade the package.

If you're interested in this approach and want to help with developing and improving the specification, please join the discussion here or open an issue on GitHub.

* Photo by Kelli McClintock on Unsplash