Rushで、Angularのようなパッケージジェネレーター型のフレームワークを扱うには

Microsoft社製のモノレポ構成管理ツールRushを触り始めたため、勉強の記録も兼ねてここに書いていくことにしました。記念すべき第一回目は、以下。

• Rushを使い始めた - ARTICLES

前回、Rush で、依存パッケージを追加するには、各パッケージで$ rush add REPO_NAMEを実行しますと書きました。

一からパッケージを作っていく場合はいいかもしれませんが、フレームワークが独自のジェネレーターを持っているようなタイプの場合はどうすればいいのでしょうか。よくあるのは、パッケージのディレクトリをジェネレータコマンドが自動生成し、依存管理もパッケージ生成時に行うため、勝手にnode_modulesもできてしまうというパターンです。

以下は、ひょっとしたら別の方法もあるのかもしれませんが、僕なりの解決方法を書いてみます。

Angularのようなパッケージジェネレーター型のフレームワークをmonorepoに組み込む

前回紹介したように、以下のような構成のRushリポジトリがあるとします。

• common/
• packages/
  • package_A/
    • src/
    • package.json
    • node_modules
  • package_B/
    • src/
    • package.json
    • node_modules
• rush.json

ここに、Angularベースのプロジェクトmy-angularを追加してみましょう。

Angularは、ngというCLIツールがあり、これを使ってパッケージを自動生成することができます。新規にアプリケーションを作成する場合は$ ng new APP_NAMEという感じで使います。

さて、この方法で従来通りパッケージを作成すると、以下の問題が発生します。

• Git関係の初期化が行われる
• 自動で依存パッケージのインストールが行われるため、node_modulesが生成される

そこで、上記を新規パッケージ時に実行されないように指定しましょう。--skipInstall=trueと--skipGit=trueのオプションをつけて生成します。

$ cd packages
$ ng new my-angular --skipInstall=true --skipGit=true

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE my-angular/README.md (1030 bytes)
CREATE my-angular/.editorconfig (274 bytes)
CREATE my-angular/.gitignore (631 bytes)
CREATE my-angular/angular.json (3718 bytes)
CREATE my-angular/package.json (1257 bytes)
CREATE my-angular/tsconfig.base.json (458 bytes)
CREATE my-angular/tsconfig.json (426 bytes)
CREATE my-angular/tslint.json (3184 bytes)
CREATE my-angular/.browserslistrc (853 bytes)
CREATE my-angular/karma.conf.js (1026 bytes)
CREATE my-angular/tsconfig.app.json (292 bytes)
CREATE my-angular/tsconfig.spec.json (338 bytes)
CREATE my-angular/src/favicon.ico (948 bytes)
CREATE my-angular/src/index.html (298 bytes)
CREATE my-angular/src/main.ts (372 bytes)
CREATE my-angular/src/polyfills.ts (2835 bytes)
CREATE my-angular/src/styles.scss (80 bytes)
CREATE my-angular/src/test.ts (753 bytes)
CREATE my-angular/src/assets/.gitkeep (0 bytes)
CREATE my-angular/src/environments/environment.prod.ts (51 bytes)
CREATE my-angular/src/environments/environment.ts (662 bytes)
CREATE my-angular/src/app/app-routing.module.ts (245 bytes)
CREATE my-angular/src/app/app.module.ts (393 bytes)
CREATE my-angular/src/app/app.component.scss (0 bytes)
CREATE my-angular/src/app/app.component.html (25757 bytes)
CREATE my-angular/src/app/app.component.spec.ts (1083 bytes)
CREATE my-angular/src/app/app.component.ts (219 bytes)
CREATE my-angular/e2e/protractor.conf.js (869 bytes)
CREATE my-angular/e2e/tsconfig.json (299 bytes)
CREATE my-angular/e2e/src/app.e2e-spec.ts (647 bytes)
CREATE my-angular/e2e/src/app.po.ts (301 bytes)

こんな感じで、新規パッケージ作成時にnode_moduleの生成が行われませんでした。

このあとは、前回のようにrush.jsonを編集して、プロジェクトに追加をします。

{
  ...
  "projects": [
    ...
    {
      "packageName": "my-angular",
      "projectFolder": "packages/my-angular"
    },
    ...
  ],
  ...
}

編集が完了したら、プロジェクトのルートに戻り、updateコマンドを実行するようにしましょう。

$ rush update

これで、Angularのパッケージがリポジトリ内に登録されました。