Viteのメモ

npm create vite@latest で作成したプロジェクトを npm run build した場合の index.js のサイズ。
2023/04/05時点。

emscripten でビルドした commonjs モジュールを参照する際、
当該パッケージを file:.. で参照したり npm link するなど node_modules 配下にシンボリックリンクが出来る形でインストールすると、npm run dev 時にそのパッケージのファイルが見つからなくなる。

対策は、vite.config.ts に resolve: { preserveSymlinks: true } オプションを付けること。これで一応動くように鳴るが、当該パッケージのソースを編集した後、最新のソースの自動読み込みが行われなくなる。
反映させるためにはビルドキャッシュ（node_modules/.vite）を消す必要があり、毎回 npm run dev --force する必要がある。

これは大変めんどくさい。別解としては emscripten 側を esmodule にしてしまうこと。
これは emscripten で ES6_MODULE=1 オプションを付ければすぐできる。
ただこれも問題があって npm run dev は問題なく動くのだが、
npm run build すると rollup がクラッシュする。

何が起こるかというと、emscripten 側のモジュール内で node の "module" が import されており、それはブラウザでの実行時には実際には実行されない場所にあるのだけども、rollupはそれを強制的に browserify しようとする。そして以下の警告を出す。

[plugin:vite:resolve] Module "module" has been externalized for browser compatibility, imported by "/Users/username/my-package/lib/my-emscripten-module.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

で、警告だけなら良いのだけれども、次のエラーで Rollup がクラッシュする。

RollupError: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

出力フォーマットにIIFEが指定されているが、コードスプリットが効かせられないので落ちましたという説明。Vite のビルド時のオプションは何も設定されていなければ esmodule になるのかと思っていたのでちょっ意外だが Firefox の worker が esmodule 読めなかったと思うので、それで Worker だけ IIFE に自動でなるのかな？

"module" の警告とこのエラーは因果関係がよくわからないが、試しに emscripten 側のコードから ENVIRONMENT_IS_NODE のときだけ await import("module") を行っているブロックを丸ごと削除すると、ビルドが通るので、何が起きてるのかまったく分からない。

分かった。import("module") 自体は警告のみ。問題は dynamic import だったことで、どうやら Worker で dynamic import を使うと Rollup がクラッシュするっぽい。
Firefox の Worker が import に対応してないので、ここだけ iife 形式でビルドしようとして、落ちているのかな？？

わかったので記事化。https://qiita.com/okaxaki/items/5224fc10087ce9541c53