{"id":28395774,"url":"https://github.com/vic428-human/big-react","last_synced_at":"2026-05-18T07:35:10.336Z","repository":{"id":295678164,"uuid":"990876878","full_name":"Vic428-human/big-react","owner":"Vic428-human","description":"此為 React monorepo 架子 ，可以同時管理多個相關專案或元件，提高開發效率與維護性，為未來大型專案或團隊協作做好技術準備。","archived":false,"fork":false,"pushed_at":"2025-06-02T23:14:59.000Z","size":56,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-03T12:32:52.391Z","etag":null,"topics":["eslint","eslint-config-prettier","eslint-plugin","eslint-plugin-prettier","globals","prettier","typescript-eslint"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Vic428-human.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-26T19:25:51.000Z","updated_at":"2025-06-02T23:15:02.000Z","dependencies_parsed_at":"2025-05-26T20:50:22.054Z","dependency_job_id":null,"html_url":"https://github.com/Vic428-human/big-react","commit_stats":null,"previous_names":["vic428-human/big-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Vic428-human/big-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vic428-human%2Fbig-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vic428-human%2Fbig-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vic428-human%2Fbig-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vic428-human%2Fbig-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vic428-human","download_url":"https://codeload.github.com/Vic428-human/big-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vic428-human%2Fbig-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33169371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T05:43:36.989Z","status":"ssl_error","status_checked_at":"2026-05-18T05:43:19.133Z","response_time":71,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","eslint-config-prettier","eslint-plugin","eslint-plugin-prettier","globals","prettier","typescript-eslint"],"created_at":"2025-05-31T20:37:01.888Z","updated_at":"2026-05-18T07:35:10.330Z","avatar_url":"https://github.com/Vic428-human.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 專案當前進度 (最近一次更新:2025/05/27)\n\n- 已配置eslint 跟 prettier 所需\n- 已測試過可以正常檢查 代碼風格跟規範\n- 預計下次更新=\u003e 處理 husky\n\n## 前言\n\n1. 多個 React 應用或元件庫可以放在同一個倉庫，直接引用彼此的程式碼，無需經過發佈 npm 套件等繁瑣流程，修改共用元件後所有依賴專案可同步受益。\n\n2. 依賴與版本一致性，所有子專案（如多個 React 應用、元件庫）都能使用同一份 React 及相關依賴，避免「A 用 React 18、B 用 React 17」導致的衝突與難以維護。\n\n3. 統一開發流程與工具設定，測試、打包、Lint、CI/CD 等工具與設定可以集中管理，減少重複設定與維護成本，提升團隊協作效率。\n\n4. 更容易的重構與透明度，程式碼集中於一處，跨專案重構、修 bug、追蹤依賴關係更直接、透明。\n\n5. 團隊協作與溝通提升，多個團隊在同一倉庫協作，程式碼風格、流程容易統一，溝通成本降低。\n\n6. 建構與部署效率提升，可以利用 monorepo 工具（如 Lerna、Nx、Turborepo）只針對變更過的部分建構與部署，提升效能。\n\n補充說明\nMonorepo 也有其缺點，例如倉庫規模大時 Git 操作效能下降、權限細緻度較難控制等。\n\n### pnpm 優點\n\n1. 安裝得比較快\n2. 處理不同依賴時，是以link形式\n3. 沒有幽靈依賴:(yarn 跟 npm 歷史遺留問題)\n\n### 幽靈依賴 說明\n\n沒有在依賴中顯示聲明，套件 A 可能因為其他套件 B 的依賴而間接獲取套件 C，\n儘管套件 A 並沒有在它的 package.json 中明確聲明套件 C 為其依賴。\n這會導致未來的某次依賴更新或重新安裝時，因為套件 C 的版本變動或不存在而出現問題。\n\n```\n// 範例：\n// 假設有以下依賴關係：\npackageA 依賴 packageB\npackageB 依賴 packageC\n```\n\n### npm 和 yarn 的扁平化依賴管理方式\n\n在扁平化依賴管理下， packageC 可能被安裝在根目錄的 node_modules 中，\n而不是嵌套在 packageB 的 node_modules 中\n\n```\nproject-root/\n├── node_modules/\n│   ├── packageA/       # 提升到頂層\n│   ├── packageB/\n│   └── packageC/\n```\n\n這樣 packageA 也能夠訪問到 packageC，即使它並沒有在 package.json 中聲明 packageC 為依賴。\n這樣的使用方式是危險的，因為如果將來 packageB 移除或更新了它對 packageC 的依賴，\npackageA 也會因找不到 packageC 而發生錯誤。\n\n```\n// packageA 的文件中\nconst functionC = require('packageC'); // 沒有在 packageA 的 package.json 中聲明 packageC\n```\n\n### 當時配置\n\n```\nnpm install -g pnpm // 先確定有安裝 pnpm\npnpm -v // 10.11.0\npnpm init // 生成package.json\n```\n\n### Eslint 代碼規範\n\n```\n// -d 是 --save-dev ,\n// --workspace 的縮寫，這個參數用在 npm 支援的 monorepo 專案（例如包含多個子專案的 workspace 結構），\n// 指定要在哪個 workspace 裡安裝這個套件。如果你在 monorepo 根目錄下執行並加上 -w，可以指定要安裝到哪個子專案；\n// 如果沒指定，預設就是當前目錄\npnpm i eslint -d -w\nnpx eslint --init // eslint.config.mjs\n\u003c!-- Flat Config 支援多種副檔名\neslint.config.mjs，是因為 ESLint v9 以後預設使用 Flat Config\n根據官方文件，Flat Config 可以是 eslint.config.js、eslint.config.mjs、eslint.config.cjs 等。eslint.config.mjs 就是這種新格式的其中一種 --\u003e\n\n\u003c!-- 新舊格式的差異\n舊的 .eslintrc.json 屬於物件型設定，新的 Flat Config 則是以 JavaScript 模組方式匯出設定陣列，彈性更高，也更容易整合現代化的 Node.js 專案。 --\u003e\n```\n\n#### npx eslint --init 會報錯\n\n1. 因為之前 pnpm i eslint 的時候後面有加 -w，所以接下來的套件安裝也都要加\n\n```\n// ESLint 对 TypeScript 的解析，使用了 @typescript-eslint/parser\n// parser 字段指定让 ESLint 使用自定义的解析器 @typescript-eslint/parser\n\n\npnpm i -d -w @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest\n\n```\n\n#### 加了 -w 之後 @typescript-eslint/eslint-plugin@latest 仍然會下載失敗\n\n參考 C-1 錯誤描述\n原因: @latest 這個寫法是 pnpm 不能解析的，刪除掉就可以了\n\n```\n\u003c!-- 安裝ts-eslint插建 --\u003e\npnpm i -d -w @typescript-eslint/eslint-plugin\n```\n\n#### 如果出現 missing peer typescript@'\\*'\n\n代表很多庫依賴了其他庫，但這些其他庫，又沒必要安裝。\n既需要依賴，又不需要安裝，就把它也裝起來就好了。\n\n```\npnpm i -d -w typescript\n```\n\n### prettier 代碼風格\n\n```\npnpm i prettier -d -w\n```\n\n#### 新建.prettierrc.json 配置文件\n\n```\n{\n  \"printWidth\": 80,\n  \"tabWidth\": 2,\n  \"useTabs\": true,\n  \"singleQuote\": true,\n  \"semi\": true, // 最後一行加分號\n  \"trailingComma\": \"none\",\n  \"bracketSpacing\": true\n}\n\n```\n\n#### 由於 eslint也可以做風格檢查，所以可能跟prettier會產生衝突\n\n所以需要將 prettier 集成到 eslint 中\n\n```\n// https://juejin.cn/post/7239987776552714300\npnpm i eslint-config-prettier eslint-plugin-prettier -d -w\n```\n\n#### package.json\n\n```\n--quiet // 不輸出反饋的形式\n```\n\n#### 到這個階段，會發現還是有缺少一些套件\n\n1. globals\n2. typescript-eslint\n   這兩個都是接下來 `pnpm run lint` 時會產生的套件缺失報錯，記得都按照 `pnpm i xxx -d -w` 方式補下載即可\n\n#### 錯誤訊息查詢\n\n- [C-1]ERR_PNPM_SPEC_NOT_SUPPORTED_BY_ANY_RESOLVER  @typescript-eslint/eslint-plugin@latest, isn't supported by any available resolver.\n\n#### 安装 husky\n\n```\npnpm add --save-dev husky\n```\n\n#### 初始化 Husky\n\n```\npnpm exec husky init\n```\n\n#### 想讓它在 commit 前執行 pnpm lint\n\n.husky\\pre-commit 直接在路徑中覆script命令，之後每次執行 git commit 前，Husky 就會自動執行 pnpm lint，效果等同 id .husky/pre-commit \"pnpm lint\"，這樣確保了每次commit前都是在規範下才上傳至codebase。做到了即時檢查的效果。\n\n```\npnpm lint\n```\n\n#### 對commit規範訊息進行檢查\n\n只要安裝 @commitlint/cli 和 @commitlint/config-conventional 就能正常運作，不需要再安裝 commitlint\n.commitlintrc.js 和 commitlint.config.js 其實都是 commitlint 支援的設定檔案格式，兩者都可以用來設定 commitlint，沒有本質上的差異\n\n```\npnpm install commitlint @commitlint/cli @commitlint/config-conventional --save-dev -w\n```\n\n#### 把 commitlint 集成到husky 中\n\ncommit-msg 檔案中可以配置在 git commit 時對 commit 註解的校驗指令可手動創建檔案再輸入檔案內容，但是建議使用命令創建，命令如下:\n\n- npx 是一個 Node.js 工具，用於執行本地或遠端的 npm 包。\n- --no-install 表示不自動安裝缺失的依賴，直接使用當前環境中已安裝的版本。\n- commitlint 是一個用於檢查 Git 提交訊息格式的工具。\n- -e 是 commitlint 的選項，表示從環境變數中讀取提交訊息（通常是 GIT_PARAMS 或 HUSKY_GIT_PARAMS ）。\n- $HUSKY_GIT_PARAMS ：\n  這是 husky 提供的一個環境變數。\n  它指向一個臨時文件，該文件包含了當前提交的提交訊息。\n  在 commit-msg Hook 中，這個文件路徑會被傳遞給相關工具（例如 commitlint），以便讀取和檢查提交訊息。\n- 棄用原因 ：Husky 7.x 引入了新的配置方式，不再使用 husky add 命令來添加 Git hooks。\n\n```\nnpx husky add .husky/commit-msg \"npx --no-install commitlint -e $HUSKY_GIT_PARAMS\"\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvic428-human%2Fbig-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvic428-human%2Fbig-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvic428-human%2Fbig-react/lists"}