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

更新於 發佈於 閱讀時間約 5 分鐘
為何大公司都使用Nx ? Monorepo工具五分鐘快速建

為何大公司都使用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

留言
avatar-img
留言分享你的想法!
avatar-img
Hogan|軟體工程師沙龍
18會員
13內容數
希望能透過「React框架白話文運動」系列文章,利用口語化語表以及簡單的程式碼範例,能讓讀者更明白React的各種應用。 系列文章會講述以下: 1. 了解 ES6 JavaScript 語法 2. 了解 React 的運作原理 3. 了解 React 的狀態管理 4. 使用 React Hook管理狀態並且存取資料
2023/12/30
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
2023/12/30
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
2023/12/14
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
2023/12/14
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
2023/12/11
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
2023/12/11
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
為何大公司都使用Nx ? Monorepo的工具五分鐘快速建置 簡介:Nx 一個快速、有效、有相當好延展性的Monorepo工具 理念:Nx 與知名程式編輯器Visual Studio Code有著相同的設計哲學,以Nx核心來說,擁有著簡潔、不模糊、明瞭的特性。
Thumbnail
為何大公司都使用Nx ? Monorepo的工具五分鐘快速建置 簡介:Nx 一個快速、有效、有相當好延展性的Monorepo工具 理念:Nx 與知名程式編輯器Visual Studio Code有著相同的設計哲學,以Nx核心來說,擁有著簡潔、不模糊、明瞭的特性。
Thumbnail
Create React App 提供了快速建立React App環境的方法: 1. 安裝node.js 2. 建立React project: $ npx create-react-app my-app 3. 啟動app $ cd my-app $ npm start npm start之後即打
Thumbnail
Create React App 提供了快速建立React App環境的方法: 1. 安裝node.js 2. 建立React project: $ npx create-react-app my-app 3. 啟動app $ cd my-app $ npm start npm start之後即打
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
Thumbnail
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News