水無瀬のプログラミング日記

プログラムの勉強した時のメモ

Bazel + Ivyを試してみる

はじめに

話題に上がるし、触ろ触ろうと思って触ってなかったBazelとIvyを試してみる。
どちらもAngularのドキュメントを参考に進める。

導入の前に

CLIのバージョンが7から上がってなかったので、CLIのバージョンを上げるところから。

# グローバルを更新する場合
# 今入っているものを削除する
$ npm uninstall -g @angular/cli
# キャッシュ削除
$ npm cache verify
# 再インストール
$ npm install -g @angular/cli

# 既存プロジェクトを上げる場合
$ ng update @angular/cli @angular/core

導入方法

Bazel

Bazel自体のインストール

$ brew install bazel
$ bazel version
> Build label: 0.28.1-homebrew
> Build target: bazel-out/darwin-opt/bin/src/main/java/com/google/devtools/build/lib/bazel/BazelServer_deploy.jar
> Build time: Fri Jul 19 16:09:50 2019 (1563552590)
> Build timestamp: 1563552590
> Build timestamp as int: 1563552590

プロジェクト作成前に入れる場合

$ npm install -g @angular/bazel
$ ng new <プロジェクト名> --collection=@angular/bazel

途中から入れる場合

$ ng add @angular/bazel

Ivy

$ ng new <プロジェクト名> --enable-ivy

どっちも入れる

今回はどっちも入れたいので、下記のように指定した。

$ ng new <プロジェクト名> --collection=@angular/bazel --enable-ivy

ビルドしてみる

エラーにならなければOK。何か色々生成されると思う。
ちなみにファイルパスに日本語が含まれるとビルドに失敗するっぽい。
気づかずに数時間ハマった。

$ ng build
> INFO: Analyzed target //src:prodapp (4 packages loaded, 65 targets configured).
> INFO: Found 1 target...
> Target //src:prodapp up-to-date:
>   dist/bin/src/prodapp
> INFO: Elapsed time: 23.606s, Critical Path: 0.70s
> INFO: 0 processes.
> INFO: Build completed successfully, 1 total action

実行したい場合

普段と同じくng serveでOK。
問題なければURL表示されると思うので、アクセスしてページが表示されれば問題なし。
ちなみにこっちも日本語ダメ。

$ ng serve
> Starting...
> Triggering live reload
> requesting reload: reload
> Serving livereload script from http://localhost:35729/livereload.js?snipver=1
> Server listening on http://hogehoge.local:4200/

まとめ

今回は何かと話題になるBazelとIvyを試してみた。
Bazelは動いているからわかりやすいけど、Ivyはわかりにくいと思う。
多分動いていると思うので、今回は導入するまで。
それでは今回はこの辺で。

参考サイト