開發累積了些經驗後已經有一些用著趁手的套件，也做了一些將這些套件封裝後的工具，開了新專案的時候可以用 fork 或是將工具發布到 npm 上的方式來重用這些工具，但當在舊專案上修改或優化這些工具的時候，要將修改套用到共用這些工具的其他專案上時總要多費點功夫。

在看到 NX 這個工具的介紹後覺得能用來改善上面遇到的情況，就趁這機會多瞭解學習。

首先列一下想要達成的效果：

• 想要有一個空間陳列常用的套件，包含將這些套件封裝過後的常用工具。
• 能快速啟動專案並直接使用這些工具。
• 當這些工具有更新的時候可以套用到所有專案上並測試。

基本上會是個邊摸邊學的過程，有什麼錯誤或可以改善的地方都請不吝指教。

先直接動手，過個幾篇再來統整知識點跟觀念。

用指令啟動一個 NX 專案：

npx create-nx-workspace@latest --pm pnpm

pm 選項可以指定使用的套件管理工具，預設 npm 其他可選得有 yarn 、 pnpm

直接使用指令的話會有選項可以選擇起始模板的設定，不過也可以直接指定模板跳過選項

npx create-nx-workspace@latest --preset=react-standalone

以上指令會建立一個 react 模板的 standalone 模式專案，standalone 具體是什麼之後再說明，這次要做的是 nextjs 模板的 integrated 專案，所以不指定模板而經由選項設定專案。

✔ Where would you like to create your workspace? · ironman-nextjs
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · nextjs
✔ Integrated monorepo, or standalone project? · integrated
✔ Application name · ironman-nextjs
✔ Would you like to use the App Router (recommended)? · Yes
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · css                            
✔ Enable distributed caching to make your CI faster · No

選 nextjs 模板的話會再額外問說要不要使用 nextjs 的 App Router 結構，想著這次順帶學習下所以這邊是選擇使用的。

另外 Enable distributed caching to make your CI faster 這一問，要使用的話要註冊 NX Cloud 才可以，所以不選。

看一下產生的結構：

.
├── apps
│   ├── ironman-nextjs
│   │   ├── ...
│   │   └── project.json
│   └── ironman-nextjs-e2e
│       └── ...
├── libs
├── tools
│   └── tsconfig.tools.json
├── jest.config.ts
├── jest.preset.js
├── nx.json
├── package.json
├── pnpm-lock.yaml
├── README.md
└── tsconfig.base.json

apps 放的是專案，像是網頁專案或後端專案都放這，也可以放測試專案，像這次的模板就自動產生了 cypress 的 e2e 測試專案。

NX integrated 架構下的 app 不會用 package.josn ，而是用 project.json ，具體的作用之後說明。

libs 放的是組件，想要跨專案使用的組件都可以放這。

tools 放的是不會直接在專案程式中運作的工具，像是 bash 檔案。

來讓專案跑起來，指令：

pnpm nx serve ironman-nextjs

今天先開好專案，明天開始把套件給裝進來。