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

閱讀時間約 4 分鐘
為何大公司都使用Nx ? Monorepo工具五分鐘快速建
未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文英文日文簡體中文

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

引用

為什麼會看到廣告
希望能透過「React框架白話文運動」系列文章,利用口語化語表以及簡單的程式碼範例,能讓讀者更明白React的各種應用。 系列文章會講述以下: 1. 了解 ES6 JavaScript 語法 2. 了解 React 的運作原理 3. 了解 React 的狀態管理 4. 使用 React Hook管理狀態並且存取資料
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
大型是一個有點模糊的詞彙,什麼是大型呢? 是100人以上的前端大型開發專案? 還是超過一千個頁面的大型專案?或是跨國部門的前端大型開發專案呢? 為了解決上述的問題,Monorepo前端大型架構就這樣誕生了。
大型是一個有點模糊的詞彙,什麼是大型呢? 是100人以上的前端大型開發專案? 還是超過一千個頁面的大型專案?或是跨國部門的前端大型開發專案呢? 為了解決上述的問題,Monorepo前端大型架構就這樣誕生了。
你可能也想看
Google News 追蹤
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil