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がやっているのは2つのことです。
-
ng add
されたときにangular.json
を更新し、gen-bundle
コマンドを定義する -
gen-bundle
コマンドが実行されたときに処理する
ng-add時の動き
ng-add時に動くのは次のngAdd
関数です。
https://github.com/lacolaco/ngx-web-bundles/blob/master/schematics/ng-add/index.ts#L15
やっていることは次の2つです。
- 対象とするプロジェクトを特定する
- プロジェクトの
architects
にgen-bundle
を追加する
gen-bundle
時の動き
gen-bundle
コマンドで動くのは次のbuild
関数です。
https://github.com/lacolaco/ngx-web-bundles/blob/master/index.ts#L51
やっていることは次の3つです。
-
executeBrowserBuilder
を使って、アプリケーションのビルドをおこなう(ng build
と同じ処理を実行する) - ビルド後の生成物を
wbn
パッケージを使ってバンドル化する - アプリケーションの生成物を同じ場所にバンドルを出力する
バンドル化の処理は次の関数に記述されています。特別に配慮が必要なのはindex.htmlだけで、それ以外はファイルごとに同じ処理をしています。
https://github.com/lacolaco/ngx-web-bundles/blob/master/index.ts#L24
ひとつひとつのやっていることはシンプルです。それらを組み合わせてルールに従って配置すれば簡単にAngular CLI経由で動かせるスクリプトを作成できます。
Takeaways
- AngularでWeb Bundlesを試すなら
@lacolaco/ngx-web-bundle
をどうぞ - 自作のスクリプトを
ng add
やng run
に対応させるのは意外に簡単です- デバッグはちょっと面倒です
- Web Bundlesについては web.dev/web-bundles/ を参照してください
Top comments (0)