Zenn
🐣

Nx勉強し始めた

2024/10/27に公開
Node.js
Nx
tech

Nxなんもわからん->何回か動画見て分かったかも？

node.jsは実行環境、Nxはビルドシステム（ツール・テクニックの集合体）。
Developer Productivityを上げるためのもの。

get started

環境はWindows 11（wsl）
まずnode, npmはここからインストール

nxのインストール

npm install -g nx

Nxのセットアップ

  1. Nxの初期設定
  • 目的: プロジェクトにNxを導入する。
  • コマンド:
npx create-nx-workspace@latest

→ コマンドを実行し、プロジェクト名を入力。

  1. ワークスペースの設定
  • 目的: Nxのワークスペースを作成し、アプリケーションとライブラリの管理を始める。
  • 説明: ワークスペースはプロジェクトの中でアプリやライブラリを整理する「フォルダ」のような役割を持つ。

workspaceの設定ファイルnx.json/package.json

package.json

devDependenciesにインストール済みパッケージが書いてある。
scriptsにコマンド定義が書いてある。npm run <command-name>で実行できる。

nx.json

わからん

nxの利点

  • workspace内でいろいろできる（run, test, ...）
  • 速くなる。キャッシュと並列化
  • scaffoldingできる
  • workspace analysisで構造化してくれる

利点の深堀り

速さ

scriptsにはキャッシュがあり、2回目以降速い。

npx nx run-many -t <command-name1> <command-name2>
exapmle:
npx nx run-many -t build test lint

で並列化でき速い。

可視化

npx nx graph

でworkspaceを可視化できる。

技術スタック

各技術スタック用のpluginが用意されている。

npx create-nx-workspace@latest

で技術スタックを選択する。
stack -> None/React/Angular/Node
Reactを選んだ場合、framework -> None/Next.js/Expo/React Native
のように選べる。

npx nx generate @nx/react:lib <lib-name>

でライブラリ周りで使うスタックを選択する。
unit test runner -> jest/vitest/none
vitestを選んだ場合、bundler -> none/vite/rollup
のように選べる。
これによりtsconfig.base.jsonも追記される。

Tailwind CSS frameworkを入れるには、

npx nx generate @nx/react setup-tailwind

のようなコマンドを実行する。

NX-CONSOLEというvscodeの機能で、多少ビジュアルに操作可能。設定画面が出てきてそこに入力していく感じ。

scaffolding

スキャフォールディングとは工事現場の足場を整えるように、開発のための足場となるコードや設定ファイルを自動生成すること。

workspace直下には以下のファイルが自動生成された

apps/
libs/
node_modules/
tools/
.editorconfig
.eslintignore
.eslintrc.json
.prettierignore
.prettierrc
nx.json
package-lock.json
package.json
tsconfig.base.json

構造化

自動的にtypescript project referenceを作ってくれる。
https://www.typescriptlang.org/docs/handbook/project-references.html

migration

npx nx migrate latest

で自動アップグレードができる。セキュリティ上重要。

参考

https://www.youtube.com/watch?v=-_4WMl-Fn0w

nx.dev/docs

Discussion