Runtime Module
Summary
The bundler will attach some runtime code to keep the bundler code running successfully.
Interop Runtime Module
Summary
Because the ecosystem package has lots of commnjs packages. The rollup provider @rollup/plugin-commonjs transforms commonjs to esm, but it is complex becuase commonjs can't static analyzer at some edge cases. So rolldown will treat commonjs as first-class citizens and support it by following esbuild implementation.
The esbuild introduce __toESM __commonJS __toCommonJS __esm for commonjs/esm interop.
__commonJS
If a module is commonjs and it is imported by esm. The module will wrap a __commonJS closure and return a require() function, the require function will return module.exports. See a example
// index.js
import value from './commonjs.js'
value;
// ./commonjs.js
module.exports = 1
It will compiled to
var require_commonjs = __commonJS({
"./commonjs.js"(exports, module) {
module.exports = 1;
}
});
var import_util = __toESM(require_commonjs());
console.log((0, import_util.default)());
__toESM
Converts the module from CommonJS to ESM. The interop esbuild following webpack implementation to compat node.js mode & babel mode.
- In an ".mjs" file or package.json has "type: module", use node.js compat mode.
- detect
__esModule to compat babel mode.
__toCommonJS
Converts the module from ESM to CommonJS. It will add __esModule to support babel compat mode.
__esm
This is for lazily-initialized ESM code.
How to inject runtime module
Esbuild
The esbuild will generate a runtime file as normal module, collect the usage symbols and link it at module graph, so unused symbols will be deleted at tree shaking.
But the implementation will generate a runtime chunk at multiple entries and it is smaller.
Webpack
The webpack use lots of RuntimeGlobals and sets their dependency information manual. You can see here for detailed at
web-infra-dev/rspack#1049.
Rolldown
Rolldown will fllowing the esbuild implementation because it is simple and clear for runtime architecture.
Implementation Step
Runtime Module
Summary
The bundler will attach some runtime code to keep the bundler code running successfully.
Interop Runtime Module
Summary
Because the ecosystem package has lots of commnjs packages. The rollup provider
@rollup/plugin-commonjstransforms commonjs to esm, but it is complex becuase commonjs can't static analyzer at some edge cases. So rolldown will treat commonjs as first-class citizens and support it by following esbuild implementation.The
esbuildintroduce__toESM__commonJS__toCommonJS__esmfor commonjs/esm interop.__commonJS
If a module is commonjs and it is imported by esm. The module will wrap a
__commonJSclosure and return a require() function, the require function will returnmodule.exports. See a exampleIt will compiled to
__toESM
Converts the module from CommonJS to ESM. The interop esbuild following webpack implementation to compat node.js mode & babel mode.
__esModuleto compat babel mode.__toCommonJS
Converts the module from ESM to CommonJS. It will add
__esModuleto support babel compat mode.__esm
This is for lazily-initialized ESM code.
How to inject runtime module
Esbuild
The esbuild will generate a runtime file as normal module, collect the usage symbols and link it at module graph, so unused symbols will be deleted at tree shaking.
But the implementation will generate a runtime chunk at multiple entries and it is smaller.
Webpack
The webpack use lots of
RuntimeGlobalsand sets their dependency information manual. You can see here for detailed atweb-infra-dev/rspack#1049.
Rolldown
Rolldown will fllowing the esbuild implementation because it is simple and clear for runtime architecture.
Implementation Step