zennのscrapつかったことがないので速習まとめに使ってみる

そもそもNativeESMを動かしている経験がなかったので色々まとめる

ESMとは

export, importで実現しているモジュールの仕組みのこと

NativeESMとは

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules

ESMをネイティブにサポートしているという意味
IEではexport/importが使えないのでNativeESMが使えない、みたいな表現として使う
実装コードとしてはESMを使っているが、Webpack/Babelなどでバンドルやトランスパイルされた実行コードでは別のモジュールシステムを使っていることがあった。そんな感じで実装コードと実行コードでモジュールシステムが違うという前提があり、その上で実行時にもESMを前提にしているよ、みたいな意味合いも含まれた表現でもある
（曖昧な表現なのは許して）

ブラウザでのESM

この文書がブラウザ上でのESMについて詳しく書かれている
https://ja.javascript.info/modules-intro

ブラウザから読み込む時はscriptタグにtype="module"が付くだけだが、遅延して読み込まれたり色々な違いがある

viteでは開発中はHMRでガンガン開発させて、本番では事前ビルドさせアセットバンドルさせる方針

デフォルトでは特定のhtmlファイルから依存関係を読み取ってビルドしてくれる

MPAの場合はRollupのオプションを渡すことで対応できる
https://vitejs.dev/guide/build.html#multi-page-app

例ではhtmlファイルをエントリーポイントにしているがJSファイルでも問題ない
Railsなどと一緒に利用したい時はエントリーポイントとなるJSファイルを起点にするといい感じ
https://rollupjs.org/guide/en/#input

https://github.com/vitejs/awesome-vite#integrations-with-backends
↑ではRailsやLaravelでViteを使うプラグインなどが紹介されているがJSビルド周りをブラックボックスにするのはちょっと怖い…という時は↓を参考にするといいかも
https://ja.vitejs.dev/guide/backend-integration.html

JS以外のアセット周りについて

TSソース上では以下の手順に従うことでJSソースからの解決が可能
https://ja.vitejs.dev/guide/features.html#typescript

読み込む型↓
https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts

もちろんCSS上のurl()のモジュール解決もやってくれる

Workerもいい感じに読み込んでくれる