速習vite
michihiko karinozennのscrapつかったことがないので速習まとめに使ってみる
michihiko karinoそもそもNativeESMを動かしている経験がなかったので色々まとめる
ESMとは
export, importで実現しているモジュールの仕組みのこと
NativeESMとは
ESMをネイティブにサポートしているという意味
IEではexport/importが使えないのでNativeESMが使えない、みたいな表現として使う
実装コードとしてはESMを使っているが、Webpack/Babelなどでバンドルやトランスパイルされた実行コードでは別のモジュールシステムを使っていることがあった。そんな感じで実装コードと実行コードでモジュールシステムが違うという前提があり、その上で実行時にもESMを前提にしているよ、みたいな意味合いも含まれた表現でもある
（曖昧な表現なのは許して）
ブラウザでのESM
この文書がブラウザ上でのESMについて詳しく書かれている
ブラウザから読み込む時はscriptタグにtype="module"が付くだけだが、遅延して読み込まれたり色々な違いがある
michihiko karinoviteでは開発中はHMRでガンガン開発させて、本番では事前ビルドさせアセットバンドルさせる方針
デフォルトでは特定のhtmlファイルから依存関係を読み取ってビルドしてくれる
MPAの場合はRollupのオプションを渡すことで対応できる
例ではhtmlファイルをエントリーポイントにしているがJSファイルでも問題ない
Railsなどと一緒に利用したい時はエントリーポイントとなるJSファイルを起点にするといい感じ
↑ではRailsやLaravelでViteを使うプラグインなどが紹介されているがJSビルド周りをブラックボックスにするのはちょっと怖い…という時は↓を参考にするといいかも
michihiko karinoJS以外のアセット周りについて
TSソース上では以下の手順に従うことでJSソースからの解決が可能
読み込む型↓
もちろんCSS上のurl()のモジュール解決もやってくれる
Workerもいい感じに読み込んでくれる