iT邦幫忙

nx相關文章
共有 29 則文章
鐵人賽 Security DAY 7

技術 [Day7] Stack 攻擊手法 - ret2sc & 保護機制 - NX

在上一篇文章中,我們學會了如何利用 Stack Buffer Overflow 在未啟用 Canary 和 PIE 保護機制的情況下,透過執行後門函數獲取程式的...

技術 【Day35】ChatGPT請教教我:UI文件與測試!Storybook!

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

技術 【Day32】ChatGPT請教教我:E2E測試!Cypress!(上)- 安裝&設定

上個章節探討了單元測試是針對單個function、或是局部小功能的測試這一篇要來了解&學習關於E2E測試是什麼、要怎麼運行 E2E測試簡介 E2E測...

鐵人賽 自我挑戰組 DAY 30

技術 【Day30】ChatGPT請教教我:Jest 單元測試(上) - 基本介紹&起始安裝

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 自我挑戰組 DAY 29

技術 【Day29】ChatGPT請教教我:React 進階(七)- Nx 框架!Monorepo 架構!

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 Modern Web DAY 30

技術 NX 概觀整理

用了一陣子 NX 後瞭解了些這組工具的基本功能與一些限制,這邊做個整理。 指令工具幫助執行操作與建立元件 NX 提供的 executor 與 generator...

鐵人賽 Modern Web DAY 28

技術 React Module Fedaration

NX 的 React 擴充有提供建立 Module Federation 架構專案的功能,來試試看。 首先簡介一下 Module Federation 架構,相...

鐵人賽 Modern Web DAY 27

技術 NX 搭配 Laravel

目前為止加入工具箱的專案都是 javascript 框架,不曉得 NX 有沒有辦法搭配非 javascript 體系的框架。 來實驗看看吧,嘗試在 NX 中加入...

鐵人賽 Modern Web DAY 26

技術 Astro 集成 React 元件

Astro 的特點之一,就是可以使用各家框架的元件,像是 React, Vue, Svelte 等,能夠將不同來源的元件拼合到一頁上,在 Monorepo 的架...

鐵人賽 Modern Web DAY 25

技術 NX 加入 Astro 專案

Astro 最近更新了 3.0 版本,來加到這個玩具箱裡試試看吧。 目前 NX 沒有官方支援的 Astro 擴充,雖然有社群版本的但還沒升級到 Astro 3....

鐵人賽 Modern Web DAY 24

技術 Monorpeo 架構比較 Package-based vs Integrated

NX 構成的 monorpeo 主要有兩種不同類型的結構,分別是 package-baed 跟 integrated ,這邊來簡介兩者的區別。 Package-...

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

技術 在 NX 中建立 Vue 元件庫

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

鐵人賽 Modern Web DAY 18

技術 在 NX 中建立 Nuxt 專案

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

鐵人賽 Modern Web DAY 13

技術 部署 Vercel

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

鐵人賽 Modern Web DAY 12

技術 NX Task pipeline & Cache

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

鐵人賽 Modern Web DAY 11

技術 NX Dependencies

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

鐵人賽 Modern Web DAY 10

技術 NX Console

NX 提供了很多的工具,相應的有很多指令,到目前為止建立 project 、添加 storybook 功能、測試,這些都有不同的指令跟選項,而且 NX 可以配合...

鐵人賽 Modern Web DAY 9

技術 測試工具 Jest 跟 Cypress

NX 的 Next 模板在建立時已經預設有 Jest 跟 React Testing Library ,可以直接寫測試。 import { render } f...

鐵人賽 Modern Web DAY 8

技術 加入 husky

為確保程式碼的格式一致,並且 typescript 的型別都有好好定義跟參照,打算加上 husky 在提交時用 prettier, eslint 跟 tsc 做...

鐵人賽 Modern Web DAY 7

技術 表單工具 react-hook-form

網頁常見的功能之一就是表單,像是註冊、輸入個人資料、後臺建立管理資料等都需要有表單輸入的功能,另外最好還有前端能事先對表單的輸入內容進行檢查,通過後才發給後端。...

鐵人賽 Modern Web DAY 6

技術 整合 MUI 跟 Tailwind 樣式設定

MUI 有自己的樣式主題系統,tailwind 也有,為了防止之後再套用樣式的時候兩邊出現偏差,要來想辦法同步兩邊的設定。 首先建立好 MUI 的自訂主題。 /...

鐵人賽 Modern Web DAY 5

技術 加入 Tailwind

現在有了 MUI ,還有跟其相搭配的 emotion,樣式的調整上已經很方便了,但是目前 NextJS 已經開始預設使用 React Server Compon...

鐵人賽 Modern Web DAY 4

技術 添加 Storybook

現在是把元件從專案中獨立出來了,但還只能從專案上去看到元件所呈現的結果,為了之後開發元件方便,來給元件庫加上 storybook 吧。 可以直接將剛剛建好的...

鐵人賽 Modern Web DAY 3

技術 架設元件庫

目前的元件還放在 ironman-nextjs 這個 app 底下,也只有這個 app 能取用到這些元件,為了讓之後的專案可以一起運用這些元件,接下來要把他們抽...

鐵人賽 Modern Web DAY 2

技術 加入元件庫

首先是元件庫,目前用的最順手的是 MUI ,先把會用到的部分安裝。 pnpm add @mui/material @emotion/react @emotion...

鐵人賽 Modern Web DAY 1

技術 建立 NX 專案

開發累積了些經驗後已經有一些用著趁手的套件,也做了一些將這些套件封裝後的工具,開了新專案的時候可以用 fork 或是將工具發布到 npm 上的方式來重用這些工具...

鐵人賽 Modern Web DAY 4

技術 DAY4 - 認識Nx

在上一篇,建立起一個Angular+Nestjs的Nx專案,那麼這一篇就要來好好介紹什麼是Nx。 安裝Nx擴充套件 在認識Nx之前,建議安裝Nx官方的vs co...

鐵人賽 Modern Web DAY 3

技術 DAY3 - 開始寫程式吧,建立 monorepo

前幾篇講的大多都是想法與概念,都還沒有講到跟程式面有關的東西。接下來進入工程的世界了。 在聊到想法與構想的時候,可以非常天馬行空,什麼樣的問題跟什麼樣的解決方案...