為何大公司都使用Nx ? Monorepo工具五分鐘快速建置

目前文章已移至 為何大公司都使用Nx ? Monorepo工具五分鐘快速建置

未來文章一併更新於此網站 Hogan.B Lab

觀看分類：React 白話文運動、其他系列

Nx簡介

Nx 一個快速、有效、有相當好延展性的Monorepo工具，並且有以下特色。

1. 支援前端三大框架：Vue、React、Angular

2. 支援後端框架：Express、Nest、Next

3. 為Monorepo框架

4. 支援各類型測試：Cypress、Jest

Nx理念

Nx 與知名程式編輯器Visual Studio Code有著相同的設計哲學，在VSCode之中，即便不下載任何擴充，也可以有相當好的產出。Nx也是相同的，以Nx核心來說，擁有著簡潔、不模糊、明瞭的特性。且以Nx 外掛套件（plugin）來說，可以根據不同的專案去做不同的選擇。

那們接下來就來試試看建立簡單的Nx專案吧！

Nx建置

建立新的Nx環境

讀者可以透過以下指令建立一個新的Nx工作環境

npx create-nx-workspace@latest

當建立完成之後，也需要選擇前置設定，以下也提供幾種Nx前置設定讓讀者參考

Workspace(Typescript)

npx create-nx-workspace --preset=core

React

npx create-nx-workspace --preset=react

Next.js

npx create-nx-workspace --preset=next

Angular

npx create-nx-workspace --preset=angular

FullStack - Angular & Nest.js

npx create-nx-workspace --preset=angular-nest

Backend - Express

npx create-nx-workspace --preset=express

在現有的專案，建立Nx環境

如果一個已存在的專案之中，已有Lerna或是Yarn monorepo，可以透過以下指令來去做建立

npx add-nx-to-monorepo

如果已有一個React App 專案，也可以透過以下指令來去建置Nx

npx cra-to-nx

安裝Nx CLI

如果想要提申開發者的體驗，也建議安裝全域的Nx CLI

npm install -g nx

Nx 專案中，資料夾結構

這邊快速的使用Nx官方文件的範例來做舉例

一個Nx專案大致上會有以下資料夾

myorg/
├── apps/
├── libs/
├── tools/
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.base.json

1. myorg/ 為自己的大型Nx專案名稱

2. /apps/ 會存放各種專案，也是所有專案中主要的進入點。會建議所有此資料夾中的專案應該要越輕量越好，反之檔案比較大的程式且可重複利用的程式碼應該要放在Libraries之中，並且在各個專案中進行載入

3. /libs/ 會包含所有的library 專案。以我自己工作為例，我們會將一些常見的功能模組化並且存放於此，例如：PWA

4. /tools/ 會包含一些常使用的程式碼腳本，也可以將參數放置於此資料夾。例如：資料庫的設定與腳本

5. /workspace.json 會列出在你這個大型Nx專案中的所有小型專案

6. /nx.json 會根據Nx CLI去做配置，也會透過此檔案告知Nx有哪些需要進行快取，或是如何執行

7. /tsconfig.base.json 設定全域TypeScript，並且在每個library 之中建立別名（aliases），協助不管是TypeScript 或是JavaScript 的載入

結語

以上為Nx的快速簡介，說明Nx除了是一個Monorepo框架的工具以外，也支援了哪些東西，另外透過指令來根據當前使用者的情境去做Nx環境建置。

目前任職於外商公司，工作上也使用Nx工具來去管理多個專案。以我個人來說，使用上覺得相當方便，除了可以提升程式碼的重複使用性以外，也有更多的機會與其他團隊的工程師協作與討論。

引用

Nx:Smart, Fast and Extensible Build System