Readying JavaScript packages for better future
spyke
Posted on November 30, 2020
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 itspackage.json
. - Package MUST contain valid ESM modules.
- Package MUST NOT contain any code using features unsupported in the latest stable
@babel/preset-env
orcore-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
andcore-js
. - Install the package.
- At build time compile the package with Babel using
@babel/preset-env
preset and load stable polyfills fromcore-js
(this could be done in preset options settingcorejs
anduseBuiltIns
props).
Upgrading the package
- Upgrade
@babel/preset-env
andcore-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
Posted on November 30, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.