blackbox をなるべく少なくしつつ typescript や jsx を快適に使いたい。 jsx は html template として、とてもいいような気がしている。 vite を使うと自然に促進される esmodule もよい。

最初は vite + react + typescript でノーフレームワークだったのだけど、 blog の markdown 記事を変換する段階でやり方がわからなかった。 vite-plugin でできそうなものを探したのだが、その時はレベルが足リなくて頓挫してしまいました。フレームワークを使って解決することにした。 astro, minista, docusaurus, sveltekit を少しやって、実際にサイトに組みこんでみました。 next.js, vue.js はまだやってない。 あと、別件でちょっとだけ express とか websocket とかサーバー要素があるものと vite を組みあわせて使うのに四苦八苦していました。 express にライブラリーモードの vite を組みこんだりしていたのだけど、vite-plugin で完結させたいのです。

わりと慣れてきて、 viteimport.meta.glob とちょっとした vite-plugin を組み合わせればシンプルな仕組みで構成できそうな気がしてきました。 あるいは vite-plugin 自作できるのでは? sveltekit じゃなくて svelte もしくはフレームワーク無しの react でいいんでないか。

vite 調べる

ということで、vite そのものと rollup を調べ初めた。

いい記事発見。

350行でつくるVite⚡
この記事はtraP新歓ブログリレー2022 [https://trap.jp/tag/welcome-relay-2022/] 41日目(4/18)の記事です。 こんにちは、19Bの翠(sappi_red)です。 普段はSysAd班 [https://trap.jp/sysad/]で活動しています。 この記事ではVite [https://vitejs.dev/] -likeなウェブフロントエンドツールをつくっていきながら、Viteの大まかな仕組みを説明していきます。 できる限り細かく手順を書いたので、ぜひ実際に追ってみてください! 実際に完成したものはこのリポジトリ(sapphi-red/micro-vite [https://github.com/sapphi-red/micro-vite])にあります。名称は愚直にMicroViteにしました。 ある程度Viteに近い実装にはなっていますが、そこそこいろんな箇所が異なります また、動作確認はNode.js v16.14.2で行っています。(がおそらくv12以降なら動くと思います) 準備 とりあえず動作確認用のごく単純
350行でつくるVite⚡ favicon https://trap.jp/post/1549/
350行でつくるVite⚡
Viteでの開発中のSSR対応の仕組み
この記事は新歓ブログリレー2023 37日目(4/14)の記事です。 こんにちは、19B/22Mの翠(sappi_red)です。SysAd班 [https://trap.jp/sysad/]で活動していました。Vite [https://vitejs.dev/]のチームメンバー [https://vitejs.dev/team.html]だったりもします。 この記事ではViteでの開発中のSSR対応の仕組みがどう実装されているか、どうしてそうなっているかについて紹介します。 前提知識 特筆すべき点のみを取り上げたざっくりとした説明です。 Webフロントエンド Web上のサービス・アプリケーションのユーザー側に近い開発領域のことを指します。「ボタンを押したときにどうなるか」や「ページ内のどこに何が表示されるか」をプログラムするなど、主にユーザーの端末上で動作するプログラムの部分を指します。 Vite Webフロントエンド開発において使われているツールの一つです。フロントエンドのプログラムを構成するファイルを各実行環境(ブラウザ、Node.jsなど)が効率よく利用・実行できるよう
Viteでの開発中のSSR対応の仕組み favicon https://trap.jp/post/1863/
Viteでの開発中のSSR対応の仕組み

レベル高いなーと思ったら、vite の contributer だった。 読む。

minista 読む

どのように vite を使っているのかソースを読んでみる。

minista/packages/minista/src/cli/develop.ts at main · qrac/minista
Static site generator with 100% static export from React and Vite. - qrac/minista
minista/packages/minista/src/cli/develop.ts at main · qrac/minista favicon https://github.com/qrac/minista/blob/main/packages/minista/src/cli/develop.ts#L42
minista/packages/minista/src/cli/develop.ts at main · qrac/minista

vite をライブラリーモードで使うのではなく、 まとめて設定を追加して起動するスタイルだった。

minista/packages/minista/src/cli/build.ts at main · qrac/minista
Static site generator with 100% static export from React and Vite. - qrac/minista
minista/packages/minista/src/cli/build.ts at main · qrac/minista favicon https://github.com/qrac/minista/blob/main/packages/minista/src/cli/build.ts#L66
minista/packages/minista/src/cli/build.ts at main · qrac/minista

build も同様なのだけど、だいぶややこしい。