📌

Nx の generatePackageJson に、libsの依存パッケージも含ませる

2022/06/06に公開

Nxで管理しているアプリをbuildした際、通常は packages.json は生成されない。
しかし、Firebase functionsなどは deployの際に packages.json が必要なので困る。

このような場合、 project.json の @nrwl/node:webpack のオプションに "generatePackageJson": true を追加すると、build時に packages.json を生成してくれる。

{
  "sourceRoot": "apps/your-app-name/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nrwl/node:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        ...
        "generatePackageJson": true
      },
  ...

ref: https://nx.dev/packages/node/executors/webpack#generatepackagejson

生成されるpackages.jsonは、そのappが依存しているパッケージのみで構成されるので、最小限のものとなっており便利。

しかし、Nxでは各種libraryを生成してappからimportすることが多いのだが、そのlibraryで依存しているnpmパッケージが packages.json に記載されなくて困ってしまった。

そんなときは、 project.json の "implicitDependencies" に依存ライブラリ名を記載すると良い。

{
  "sourceRoot": "apps/your-app-name/src",
  "projectType": "application",
  ...
  "implicitDependencies": ["util-common"]
}

このように依存ライブラリ名「 util-common 」と明示的に記載すると、 util-common 内で使用しているパッケージも packages.json に含めてくれる。

ちなみにMonorepo全体の依存関係的なものを調べたい場合はCLIでチェックできる。
方法はいくつかあるが、例えば ts-node などを使用して、

$ ts-node
> import { readCachedProjectGraph } from '@nrwl/devkit';
> const depGraph = readCachedProjectGraph();
> depGraph.dependencies['your-app-name']
[
  { source: 'your-app-name', target: 'util-common', type: 'implicit' },
  { source: 'your-app-name', target: 'npm:graphql', type: 'static' },
  { source: 'your-app-name', target: 'npm:dayjs', type: 'static' },
  { source: 'your-app-name', target: 'npm:@sendgrid/mail', type: 'static' },
  {
    source: 'your-app-name',
    target: 'npm:firebase-functions',
    type: 'static'
  }
]

このようにProjectGraphを見ることができる。

type: 'static' はそのアプリが直接依存しているパッケージで、type: 'implicit が今回の記述で増えた、依存ライブラリを明示的に指定したもの。

うまく packages.json が生成されない場合は、このように依存グラフをチェックするのも一つの手段として有効。

参考

同じ話題のIssue:
https://github.com/nrwl/nx/issues/6840

generatePackageJson の実装:

参考

Discussion