Hogan ｜軟體工程師隨筆
成大電機畢業，現職外商產品工程師，我的工作內容 與全端軟體開發和手機app開發相關。主要分享一些程式碼、軟體教學、經驗交流。IG : hogan.tech
檢舉內容為何大公司都使用Nx ? Monorepo工具五分鐘快速建置
檢舉內容
2022/08/07閱讀時間約 4 分鐘
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 [email protected]
當建立完成之後，也需要選擇前置設定，以下也提供幾種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工具來去管理多個專案。以我個人來說，使用上覺得相當方便，除了可以提升程式碼的重複使用性以外，也有更多的機會與其他團隊的工程師協作與討論。
引用
贊助支持創作者，成為他繼續創作的動力吧！
留言0
查看全部
領取見面禮
只要設定追蹤作者，即可享有 48小時
Premium 閱讀權限
Premium 閱讀權限