Angularアドベントカレンダー #2の24日目代打記事です。
Web Bundlesとは、現在標準化が検討されている新しいWebの仕様です。Webページとそれに紐づくサブリソースをひとつのバンドルとしてパッケージ化することができます。
この記事ではWeb Bundlesを手元のAngularアプリケーションで試してみたい人向けの手順を紹介します。
CLI Builderのインストール
lacolaco/ngx-web-bundlesというパッケージで、Angular CLI向けのBuilderを作っています。 次のコマンドを実行するだけで、Web Bundleをビルドする準備が整います。
$ ng add @lacolaco/ngx-web-bundleインストールできたら、 任意のプロジェクトでgen-bundleコマンドを実行します。
$ ng run <project name>:gen-bundleビルドが終わるとindex.htmlが出力されるdistディレクトリと同じ階層に out.wbn というファイルが生成されているはずです。このファイルをGoogle ChromeのCanary版で Web Bundlesを有効にしてから開くと、バンドルを展開できるはずです。
How it works
ngx-web-bundleがやっているのは２つのことです。
-
ng addされたときにangular.jsonを更新し、gen-bundleコマンドを定義する -
gen-bundleコマンドが実行されたときに処理する
ng-add時の動き
ng-add時に動くのは次のngAdd関数です。
やっていることは次の2つです。
- 対象とするプロジェクトを特定する
- プロジェクトの
architectsにgen-bundleを追加する
gen-bundle時の動き
gen-bundleコマンドで動くのは次のbuild関数です。
やっていることは次の3つです。
-
executeBrowserBuilderを使って、アプリケーションのビルドをおこなう（ng buildと同じ処理を実行する） - ビルド後の生成物を
wbnパッケージを使ってバンドル化する - アプリケーションの生成物を同じ場所にバンドルを出力する
バンドル化の処理は次の関数に記述されています。特別に配慮が必要なのはindex.htmlだけで、それ以外はファイルごとに同じ処理をしています。
ひとつひとつのやっていることはシンプルです。それらを組み合わせてルールに従って配置すれば簡単にAngular CLI経由で動かせるスクリプトを作成できます。
Takeaways
- AngularでWeb Bundlesを試すなら
@lacolaco/ngx-web-bundleをどうぞ - 自作のスクリプトを
ng addやng runに対応させるのは意外に簡単です- デバッグはちょっと面倒です
- Web Bundlesについては web.dev/web-bundles/ を参照してください