仕事でReactと一緒に使い始めるのでどんなことができるのか調査したことをまとめておく。最高っぽい。

---

Nxとは

https://nx.dev/

• lernaやyarn workspaceのようなJSのmonorepo支援ツールの一つ
• CLIやeditor pluginによってdev experienceが向上する
• コード共有の制御とコード生成ができる
• コードの変更による影響範囲を把握しておくことで、コミットの度に必要なものだけをビルド＆テストできる
• キャッシュを使うことで全てのコードをスクラッチビルド、テストしないことで時間を大幅に削減する
• TypeScript, React, Angular, Cypress, Jest, Prettier, Nest.js, Next.js, Storybook, Ionixなどをサポートしておりツールに関わらず一貫したDXを提供する
• 元はAngularからサポートからReactに派生しているのでAngularのCLIの影響を受けていそう

使い方

普段よく使うコマンド

nx affected:test --base=origin/master

• origin/masterとの差分を見て影響のある部分のみテストする
• build, lintなどもaffected:をつかて影響範囲のみ実行できる

nx run project:target

• projectはpackage名でtargetはコマンド（ nx run myapp:build のような使い方)
• build, test, lintなどは nx build myapp でも同じことができる
• 各パッケージでpackage.jsonのscriptsを書くかわりに、workspace.jsonに定義されているコマンドを実行する

nx generate <collection:schematic>

• schematicから新しいpackageを生成する
• 後述のNx Consoleを使うことでschematic名やオプションを覚える必要はなくなる

nx dep-graph

• 各package間の依存グラフを生成する

Nx Console

https://nx.dev/react/cli/console

• Nxを専用UIでサポートするVS Code拡張
• Schematic（generateコマンドなどの設定値を定義したやつのこと）のカスタム要素を一覧し見やすくしてくれる
• フラグやパスの入力を補完してくれる
• 適切なNxの拡張を見つけやすくする

Nx Cloud

• Nxを使ったサービスで、ビルドやテストのキャッシュをクラウドに保存しておくことで、メンバーはローカルで0からビルドしなくても、そのキャッシュをダウンロードすることでより高速なDXを得られるというものらしい

10x開発者は神話かもしれないが、10xビルドパフォーマンスは現実です (10x Developers May Be a Myth, but 10x Build Performance is Real)

なるほど