使用 Yeoman 建立屬於自己的 React TypeScript 專案範本
前言
每次開發新案都要重新搭建專案,確實是有點浪費時間,因此筆者把近期開發經驗整理成一個 Yeoman 的 React TypeScript 專案範本,這樣下個專案就不用再浪費時間做一樣的事情囉!
github: react-typescript-template
涵蓋內容
基於 TypeScript 建立的 React v18 的專案範本,以 SASS 且遵循 BEM 命名方法來撰寫樣式:
- React Router: 使用 v6 版本做為網站路由
- React i18n: 多國語系
- Redux Toolkit: 全域狀態管理及 API Client (RTK Query)
- Redux Persist: 保持全域狀態於本地端
- Formik: 表單控制
- Yup: 驗證邏輯描述(整合至Formik)
- msw: Mock API (Mock Service Worker)
專案說明
請參照以下文件,會隨時進行滾動式修正:
- 專案說明 README.md
- 開發手冊 README_GUIDELINE.md
如果有可以精進的地方歡迎 PR ,若覺得不錯也可以給個 Star 鼓勵鼓勵。 謝謝。
使用方式
安裝 Yeoman 範本工具及 React 專案範本
$ npm install -g yo
$ npm install -g generator-react-typescript-template
建立 React 專案
$ npm yo generator-react-typescript-template
執行後有測試頁可以玩玩看囉
$ npm start
希望此篇文章可以幫助到需要的人
若內容有誤或有其他建議請不吝留言給筆者喔 !