Nx v15 に更新する

なにかとおしごとの場面を中心に、最近 Nx へ触れる機会が多々存在しており、先日リリースされた v15 について書かせていただきました。

Nx v15

先日 Nx v15 がリリースされました。

手元の Nx 環境を v15 に更新する場合は、まず npx nx migrate を実行してください。

依存関係を取り込んだ後に npx nx migrate --run-migrations を実行することで Nx v15 への更新を完了させられます。

# npx nx migrate
npx nx migrate 15

npm i

# npx nx migrate --run-migrations
npx nx migrate --run-migrations

yarn をお使いの方は、適宜読み替えてください。

基本的にこれだけで完了させられます。

続いて Nx v15 の主な特長を下に示します。

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

ドキュメントの改善

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Describing things clearly is hard.

We spent the whole morning refining 2 options shown in a prompt. We examined every word, the symmetry of the options, how abstract they are, how they relate to our docs, to the language of other tools.

A lot of work but the result is good.</p>— Victor Savkin (@victorsavkin) <a href="https://twitter.com/victorsavkin/status/1580283233916186624?ref_src=twsrc^tfw">October 12, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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]があります。

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