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

Monorepo 簡介

前端技術近幾年快速演變，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工具來去管理多個專案。以我個人來說，使用上覺得相當方便，除了可以提升程式碼的重複使用性以外，也有更多的機會與其他團隊的工程師協作與討論。

引用

 

https://github.com/nrwl/nx