Vite 3 が採用した CJS Proxy による Dual Package 構成

2022 年現在、Node.js 界隈は ESM (ES Module) への移行の過渡期であり、特に既存プロジェクトにおいては CJS (CommonJS) 構成であることがまだまだ多い。また、Pure ESM な npm パッケージは、CSJ プロジェクトからの利便性が悪く、dynamic import が必須で非同期化を強いられたり TypeScript の設定変更が必要だったりと面倒が増える。 そんな状況のため、広く使われたい npm パッケージを公開する場合、importでもrequireでも利用できるよう dual package 構成を取りたくなるが、定番手法が確立しているとは言えず、意外と面倒が多い。よく見るのは、tscやesbuild等で ESM 用と CJS 用の設定ファイルを用意してそれぞれ別ディレクトリに出力し、パッケージに両方同梱して conditional ex

[shun9167]

Viteでnpmパッケージ開発し始めたけどexport周りの挙動がよく分からなかったので勉強になる。

[efcl]

Viteが利用してるCJSとESMをdual packagesに対応する手法について。 CJSからESMを扱うために、非同期な関数のexportはDynamic Importsを含むラッパーを公開し、同期的な関数のexportはesbuildなどでbundle済みのものを公開する

[teppeis]

書いた