Vue の周りで仕事をしているからか vite については結構早いうちに目にしていた。

Vue をコンパイルして使うエコシステムが vue-loader に大きく依存し、結果として Webpack を使わざるを得ない部分があるところから脱したいというのがベースのモチベーションで、その他に試したかったことを Evan 本人が遊んでいるという印象がある。同様のESモジュールベースのビルダーを探せば、Snowpack なんかが先にやっている中で、自分がコントローラブルなものが欲しかった気持ちが剥き出しで、コミュニティへの影響を除けばとても人間くさい。VuePress を出した時もそういう印象があったが、今回の vite で VuePress 自体も Webpack への依存がある故に、 VitePress というもので置き換えられようとしていて無限にコミュニティ全体を yak shaving へ引きりこんでいる様はとても面白い。

その前に Vue 3 とエコシステム全体での TypeScript サポートをどうにかして欲しいと思わなくもないが、オープソースソフトウェア専業のクリエイターこそ持続可能な意欲を優先しているなら仕方がないとも納得できる。

vite-plugin-frontmatter-markdown

vite を軽く create-vite-app を通して試してみると確かに保存後のHMRの反応が尋常じゃなく速い。Development な環境での体験は確かに全然違うものになるので、本業でぼちぼち重い Vue アプリでこれが動いたらどうなるかと期待してしまう。Production では Rollup がやるということで、ビルドの結果が異なり得るが少し気になる部分もある。

もう少し動作を見て遊ぶ一環ということで、 frontmatter-markdown-loader (FML)の同等の機能を持つつもりで、 vite-plugin-frontmatter-markdown (VFM) というプラグインをつくってみて公開した。プレーンな JSで書いてあった FML をいつかどこかで TypeScript に移行をしたいと思っていたものの上がらなかった腰を、 VFM で同様の実装を書き直して実現し、FMLに最終的に取り込む作戦に至った。

vite の環境で、

import { attributes, html } from "./something.md"

を実現できるところまで TypeScript プロジェクトとしてぱっと作ってみて npm に公開した。近いうちに

import { VueComponent, ReactComponent } from "./something.md"

みたいな機能を可能にしたら beta を剥がして、FMLの方に実装を還元するつもり。

frontmatter-markdown-loader

FML は元々、妻のポートフォリオサイトのコンテンツを Markdown で書けるようにしようと Nuxt.js 向けを想定して作り始めたのだが、今では React アプリにも使えるようになり、週1程度で作り手の気力を削ぎかねない Issue が立てられる程度には色んなところで導入されるようになった。GitHub で1,000を越えるパブリックなリポジトリに利用されていることがわかって予想しなかった使われぶりとなったのは嬉しい。

僕の元のユースケースをテンプレートにして多くの人に使われるようにした人が出てきたり、Netlify CMS のNext.js での導入例 とかで人の目に入ることが増えたおかげだろう。最近、 Vuetify の次代のドキュメンテーション で使っているらしく、困りごと を Vuetify のオーサーから連絡をもらって驚いたりもした。

Nuxt.js には Content という仕組みが公式から出てきてくれたので、FML の Issues をカスタマーサポートだとお考えの皆さんをどんどんリダイレクトしていきたい。