Zenn
Open5

Nx 15.x to 16.x / 17.x / 18.x / 19.x メモ

Nx
monorepo
jiyuujin | YUMA Kitamurajiyuujin | YUMA Kitamura

Nx 15.x

https://blog.nrwl.io/whats-new-in-nx-15-7e14e1ff282d

  • ドキュメントの改善
  • タスクパイプラインで新しい構文
  • ESBuild サポート
  • Cypress v10 サポート
  • Nx Graph

ドキュメントの改善

https://twitter.com/victorsavkin/status/1580283233916186624

2 つの新しい パッケージベース の 統合スタイル チュートリアル に加え 2 つの全く新しい作り直されたチュートリアルもあります。

タスクパイプラインで新しい構文

nx.json のプロパティ指定で、簡単に targetDefaults を定義できます。詳細は、是非 Task Pipeline Configuration をご確認いただければ幸いです。

{
  "targetDefaults": {
    // 最初に全ての依存パッケージのビルドを実行する
    "build": {
      "dependsOn": ["^build"]
    },
    "dev": {
      "dependsOn": ["^build"]
    },
    // publish を実行する前に、パッケージのビルドを実行する
    "publish": {
      "dependsOn": ["^build"]
    }
  }
}

また @nrwl/workspace:run-commands として書かれている表記を nx:run-commands に書き換える必要があります。こちら @nrwl/workspace:run-commands は Nx v16 で deprecated の扱いとなります。

こういった変更点もあります、日常的に project コマンドで実行した際吐き出される warning エラーに気をつけておきましょう。

ESBuild サポート

JavaScript / TypeScript パッケージが合理化されました。今回、新たに ESBuild 専用バンドラが用意されています。

  • nrwl/webpack
  • nrwl/rollup
  • nrwl/esbuild -> new

新たに local generator を使用して nrwl/js:lib のパッケージを生成できるようになりました。

Cypress v10 サポート

既存の Cypress を v10 (最新バージョン) に移行できます。

# @nrwl/cypress to v10
npx nx g @nrwl/cypress:migrate-to-cypress-10

Nx Graph

Nx Graph は、ブラウザまたは VS Code 内で直接、視覚化できるようになりました。

# nx graph
nx graph

左ペインに[Show all projects]があります。

それをクリックすることで、プロジェクトの全体像を可視化できます。

jiyuujin | YUMA Kitamurajiyuujin | YUMA Kitamura

Nx 19.x

まずビルド時に環境変数を使用している場合は NX_toNX_PUBLIC_ の扱いが変わる点に注意する必要があります。

https://nx.dev/blog/2024-05-08-nx-19-release

  • @nx/gradle の発表
  • Nx アトマイザーの機能強化
  • タスクに追加された関連テクノロジー
  • Project Crystal に変換するジェネレーターの発表