Skip to content

runtime module #35

Description

@underfin

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions