- Convert a set of imports from your
node_modules/directory into a fresh, new 100% ESM install directory.
- Import your new ESM dependencies in any ESM-only environment (websites, Deno, Node.js v14).
npm install esinstall
;await;// Result: Creates `preact.js` and `preact/hooks.js` inside a `web_modules/` directory in your current directory.
The core install logic of this library is considered well-tested and production-ready (1+ years of active use & development!). The JS interface is new, however, and may contain smaller bugs. We'll be working to stabilize the API over the next month, with a
1.0.0 release planned for October.
Before Snowpack was a frontend build tool, it was a CJS->ESM package converter.
snowpack install would read your package.json "dependencies" and re-install every frontend package from your "node_modules/" directory to a new "web_modules/" directory. "web_modules/" was guarenteed to be 100% ESM regardless of how each package was originally written. This dramatically simplified the minimum tooling required to build a website by removing a whole class of problem for the frontend basically summarized as "oh no this package was written for Node.js, it will never run in the browser, what do we do???"
Our hope is that now others can build on top of this too. And while today we're focused on the web use-case, we're seeing a growing need for a CJS->ESM story for Node.js as well.
How it Works
To simplify things a ton, here's what esinstall does internally when you run
- Resolves the given package specifiers to exact file paths in your "node_modules/" directory.
- Runs Rollup with those file paths as entrypoints, essentially "bundling" your dependency tree into as few JS files as possible.
- Writes the result to a new, fully ESM output directory.
If you check out the code, you'll see it's not as easy as it sounds. But at a high level, that's what esinstall is all about.
;// Feature: Handle CJS packages with ease, converting everything to ESM!await ;// Feature: Handle CSS!await ;// Feature: Handle Non-standard packages!await ;// Feature: Print detailed install stats to the console, including installed file sizes.const success stats = ;if success;// Feature: Tree-shaking! Get a smaller final build by providing more detailed install targets.await;
Still TODO: Adding more detailed descriptions about each
A huge thanks to all the contributors of Snowpack (and now esinstall) over the years. This wouldn't have been possible without you!
Also, it can't be stressed enough: this tool would never have existed without Rollup. If you can, consider donating to their team: https://opencollective.com/rollup