iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

組裝前端開發工具箱,從 NX 入手 系列

最近剛認識了 NX 這套 monorepo 工具,就想將一直以來開發各個專案時使用到的工具做個整合,順便摸熟 monorepo 的架構,主要會以 NX + NextJS 做基礎,也想試試能不能在一個資源庫中搭配多種框架(Vue , React Native 等)。

DAY 11

NX Dependencies

上一篇提到了 NX 可以顯示專案間的依賴關係,這邊的依賴關係分兩種,project 跟 target 。 project 之間的依賴關係主要由 NX 掃描整個程...

2023-09-12 ‧ 由 Jasper 分享
DAY 12

NX Task pipeline & Cache

NX 可以同步執行多個 target ,並且會依據這些 target 的 dependency 依序執行,這個行為也被稱作 task pipeline,圖解會像...

2023-09-13 ‧ 由 Jasper 分享
DAY 13

部署 Vercel

把 Next.js 專案部署上 Vercel 非常簡單,註冊帳號後選擇連動的 Github 帳號,然後建立 project 選擇要部署的 Repo ,搭配 Ve...

2023-09-14 ‧ 由 Jasper 分享
DAY 14

Next App Router 其一

開始來仔細研究 Next.js 13 的 App router 功能。 首先是基本的定義方式,route 結構是根據 app 目錄底下的內容去定義的,會跟據資...

2023-09-15 ‧ 由 Jasper 分享
DAY 15

Next App Router 其二

繼續介紹一些除了 page 以外 App Router 會識別的特殊文件名稱。 loading 現在 Next.js 預設 page 都是 Server Com...

2023-09-16 ‧ 由 Jasper 分享
DAY 16

Next App Router 其三

介紹 App Router 其他比較奇巧型的路由(?)定義。 Parallel Router 除了定義 page 作為路由的主要頁面外,也可以定義額外的頁面區塊...

2023-09-17 ‧ 由 Jasper 分享
DAY 17

介紹 TanStackQuery

來介紹最近喜歡的 API 串接工具 TanStackQuery。 主要用來解決幾個問題: 管理 API 前端快取,包含自動重取過期的快取,以及更新資料後手動更...

2023-09-18 ‧ 由 Jasper 分享
DAY 18

在 NX 中建立 Nuxt 專案

來試試看在 NX 中加入 Vue 框架的 Nuxt 專案。 首先目前 NX 還沒有針對支援 Nuxt 的擴充,所以大多步驟要手動進行。 要將 Nuxt 專案建立...

2023-09-19 ‧ 由 Jasper 分享
DAY 19

在 NX 中建立 Vue 元件庫

來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣,目前官方沒有支援 Vue 的擴充,所以要手動設定。 首先建立一個基於 Vite 的 js...

2023-09-20 ‧ 由 Jasper 分享
DAY 20

NX 自定義 plugin 建立客製化的 generator

NX 有提供擴充工具幫助快速生成專案或是元件庫的架構,像是: pnpm exec nx generate @nx/next:application 利用擴充工...

2023-09-21 ‧ 由 Jasper 分享