內容目錄
ToggleMonorepo 簡介
前端技術近幾年快速演變,ES6,、SCSS 前處理、npm,、前端框架、CI/CD、Docker… 等等。如果要完成一個小型的應用程式,除了上述列舉的技術以外,可能還需要維護比較大型且複雜的平台。
Monorepository 是一個架構的概念,從字面上的意思來看Mono(one)repo(repository),可以得知這樣的(Monorepo)架構是將大量的程式碼全部放在同一個 Code base 下做管理,不同於舊有的分離式概念,Google 是優先採用Monorepo 的公司之一。
想了解更多,請參考以下文章:
你真的懂Monorepo?五分鐘帶你認識前端大型架構
Nx簡介
Nx 一個快速、有效、有相當好延展性的 Monorepo 工具,並且有以下特色。
1. 支援前端三大框架:Vue、React、Angular
2. 支援後端框架:Express、Nest、Next
3. 為Monorepo框架
4. 支援各類型測試:Cypress、Jest
Nx 前端框架理念
Nx是一個前端框架,其設計哲學與知名的程式編輯器Visual Studio Code非常相似。在Visual Studio Code中,即使不安裝任何擴充,也能夠獲得優秀的開發體驗。Nx也遵循了相似的原則,它的核心特性簡潔而清晰,不模糊,使開發變得更加明確。
Nx的核心特性包括專案管理、任務執行、程式碼生成和依賴分析等。這些功能使開發團隊能夠更有效地協作,管理大型前端專案,並確保程式碼的品質和一致性。通過Nx,你可以輕鬆地創建、維護和擴展前端專案,而不必擔心配置和工具的混亂。
與Visual Studio Code的擴充類似,Nx還支援外掛套件(plugins),這使得你可以根據專案的不同需求來選擇合適的外掛套件。這種靈活性使Nx適用於各種不同類型的前端專案,從小型應用到大型企業級應用。
接下來,讓我們嘗試創建一個簡單的Nx專案。首先,你需要安裝Nx並創建一個新專案。然後,你可以使用Nx的命令列工具來生成元件、服務和其他程式碼檔案。Nx還提供了一些預定義的專案模板,以加速專案的啟動過程。你可以輕鬆自訂專案結構和配置,以滿足特定需求。
Nx還提供了強大的任務執行功能,可以幫助你自動化建置、測試和部署流程。這有助於確保專案的可靠性和穩定性,並提高開發效率。
總之,Nx是一個強大而靈活的前端框架,它的設計理念注重簡潔性和可定制性,使開發團隊能夠更輕鬆地管理前端專案,並提供優秀的開發體驗。無論是個人開發者還是大型團隊,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專案大致上會有以下資料夾
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工具來去管理多個專案。以我個人來說,使用上覺得相當方便,除了可以提升程式碼的重複使用性以外,也有更多的機會與其他團隊的工程師協作與討論。