how to deal with commonjs & esm

[jerrykingxyz]

Summary

In this discussion, we will discuss how to handle commonjs and esm in rspack with reference to processing in webpack and babel.

Issues

#1211

Since we injected helpers, the input cjs code is converted to esm and cjs hybrid state. the interop inject only depends on import and export keywords, so the result code format is converted to esm.

From this issue, we need to care about these problems

• How to keep source and result codes in the same format after inject helper.
• How to deal with code that has both cjs and esm (whether to inject __esModule).

How Webpack does it

Inject helper

Inline helper is no problem, but not what we need. We only discuss the injected helper case.

• typescript
  typescript can use importHelpers: true to enable inject.

export function fn(arr: number[]) {
  const arr2 = [1, ...arr];
}
// -----
import { __read, __spreadArray } from "tslib";
export function fn(arr) {
    var arr2 = __spreadArray([1], __read(arr), false);
}

typescript will check the module config. If the output format is esm, it will be injected using import, otherwise require.

• babel

babel preset env will inline inject helpers. We can use @babel/plugin-transform-runtime to make helpers external, babel will inject with import or require by moduleType.

• swc
  Swc alway using import when inject helpers.

Input mix code

Webpack will inject __esModule when source code has import and export keywords.
Webpack will inject hmd check when source code is esm and use module.exports.

Conclusion

• inject helpers
  plan 1: Check code format when inject. esm use import, cjs use require.
  plan 2: Transform code to cjs when parse.
  plan 3: Transform esm to cjs with __esModule when source code is esm
• Runtime need inject hmd when source code both have esm keywords & module.exports