3KBのReact互換ソフトウェア@preactjsの作者であるJason Miller氏は先頃、WMRの最初のイテレーションをリリースした。WMRは、最新Webアプリのためのコンパクトなオールインワン開発ツールを自称するソフトウェアだ。2MBのファイルひとつに収められ、依存関係をまったく持たないWMRは、事前インストールの不要なnpmパッケージのインポートに加えて、開発や運用に関して開発者が慣例とする多くの機能(ホットモジュールローディング、JSX/TSX、CSSモジュール、TypeScriptなど)をサポートする。
WMRは、最新のWebアプリケーションに特化することでWeb開発の合理化を目指す、新世代ツーリングのひとつである。Miller氏は先日のchangelog.comのインタビューの中で、WMRの位置付けを次のように説明している。
[最新の]Webアプリにおいて [...] 開発者として念頭に置くこと、心に留め置くべき制約は、最新のブラウザ、最新のUX、最新の依存関係、[最新のJavaScript] ... […]
[WMRは]奇妙なほどWebPackに酷似していますが、そのような比較自体が無意味かも知れません。既存ツールの中ならば、Vueの新しいバンドラであるViteやSnowpackに最も近いものです。さらにはes-dev-serverにも [...] WMRはESMファーストのようなバンドラ/非バンドラの空間に存在するのです。[…]
WMRは本当に、本当に、開発者としてのあなたの視野からそれ自身を取り去ろうとしているのです。[...] その意味では、Parcelに最も近い存在です。一般的に、WebPackやRollupといったバンドラを使ってプロジェクトを始める時、最初に行う作業はバンドラの設定です。[...] 実際にプロジェクトを始めるような場合には、これらがすべてのステップになります。[...] 何かを2時間でプロトタイプしようとする時に、その最初の1時間をバンドラの設定に費やしたいとは思わないでしょう。私は実際に、この理由でハッカソンで負けたことがあります。
Preactチームが提供しているWMRが、特にPreactコンポーネントとのインターフェースが優れているのは当然のことだ。しかしPreactに縛られている訳ではなく、他のフロントエンドフレームワークやバニラJavaScriptでも使用可能で、例えばAngularアプリケーションのフレーム内でも使用することができる。
WMRのおもな機能は次のようなものだ。
- インストールせずにNPMからパッケージをインポート
- モジュール、Preactコンポーネント、CSSからのホットリローディング
- ブラウザデバッグを含む超高速JSXサポート
- アセットのリローディングを含む静的ファイルの提供
- 静的HTMLのビルド時事前レンダリング
CSSのインポートやCSSモジュールの使用も可能だ。TypeScriptも標準でサポートする。さらに、既存のRollupプラグインを使用することができる。このRollupプラグインの再利用について、ある開発者が自身のブログに肯定的なコメントをしている。
PreactチームはWMRをリリースすることで、[Web開発ツーリングへの新たなアプローチを]確立し、新しいアイデアを提示しました。特に、Rollupプラグインをベースにした汎用プラグインフォーマットは、彼らと他の開発者に対して、開発時と構築時の変換コードの共有を可能にしています。
既存のRollupプラグインを、例えばHTML出力の最小化に使用することができる。その他にも、ファイルシステムベースのルーティングの実装やサービスワーカの追加などのプラグインやレシピが提供されている。
WMRではwmr.config.js(またはwmr.config.mjs)というコンフィギュレーションファイルがサポートされており、動作をカスタマイズ(WMR-optionsの設定やRollupプラグインの実行)することができる。
npm init wmr your-project-nameを実行すれば、テンプレートアプリケーションを使って開発をすぐに始めることも可能だ。このコマンドによってアプリケーションシェルが生成されるので、コンテンツを自身のアプリケーションロジックに置き換えればよい。
(出典: WMR GitHub)
WMRはMITライセンス下でリリースされたオープンソースプロジェクトである。コントリビューションとフィードバックの提供は、プロジェクトのガイドラインに従うことが必要だ。