# monorepo --- ## 概念 一個包含多個項目的版本控制儲存庫（repository） 項目可能有關聯，但通常邏輯上是獨立並由不同團隊運行 ---  --- ## 結構 ``` ├── packages | ├── pkg1 | | ├── package.json | ├── pkg2 | | ├── package.json ├── package.json ``` ex: [babel ](https://github.com/babel/babel) - [Why is Babel a monorepo?](https://github.com/babel/babel/blob/main/doc/design/monorepo.md=200x200) --- ## 優點 - 統一管理 configs 和 tests - 管理依賴容易 - 單一的事實來源 - 易於代碼重用 --- ## 缺點 - 代碼庫龐大 - 不利於權限管理 --- ## 參考文章 - [Guide to Monorepos for Front-end Code](https://www.toptal.com/front-end/guide-to-monorepos) - [What is monorepo? (and should you use it?)](https://semaphoreci.com/blog/what-is-monorepo) - [為什麼前端工程越來越愛使用 Monorepo 架構](https://medium.com/hannah-lin/%E7%82%BA%E4%BB%80%E9%BA%BC%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E8%B6%8A%E4%BE%86%E8%B6%8A%E6%84%9B%E4%BD%BF%E7%94%A8-monorepo-%E6%9E%B6%E6%A7%8B-661afa90910a) - [What Is a Monorepo?](https://www.perforce.com/blog/vcs/what-monorepo) - [wiki-Monorepo](https://en.wikipedia.org/wiki/Monorepo) --- # pnpm vs Lerna --- ## pnpm `Fast, disk space efficient package manager` - 節省磁碟空間，提升安裝速度 - 建立非扁平化node_modules - 範例：[Vue 3.0](https://github.com/vuejs/core) --- ## Lerna `A tool for managing JavaScript projects with multiple packages.` 管理有多個packages的JavaScript 專案 - 搭配yarn使用管理底層依賴（[lerna/bootstrap](https://github.com/lerna/lerna/tree/main/commands/bootstrap#readme)） - [yarn v1-workspace](https://classic.yarnpkg.com/en/docs/workspaces) - [yarn workspace](https://yarnpkg.com/features/workspaces) - 沒有支援yarn2新增的 `workspace:` - `Unsupported URL Type "workspace:": workspace:^` --- ## pnpm優勢 - 減少管理設定檔 - 不會有幽靈依賴的問題 - 支援相對路徑引用workspace版本 - Lerna不被積極維護 --- ## cli指令 - 增加依賴 ``` // lerna lerna add [packageName] lerna add [packageName] --scope [workspaceName] lerna add [workspaceName] --scope [workspaceName] // pnpm pnpm install [packageName] -w pnpm --filter [workspaceName] add [packageName] pnpm --filter [workspaceName] add [workspaceName] ``` --- - 減少依賴 ``` // lerna lerna exec 'yarn remove [packageName/workspaceName]' --scope [workspaceName] // pnpm pnpm remove [packageName] -w pnpm --filter [workspaceName] remove [packageName] pnpm --filter [workspaceName] remove [workspaceName] ``` --- ### 參考文章 - [pnpm vs Yarn: monorepo node_modules](https://medium.com/pnpm/pnpm-vs-yarn-monorepo-node-modules-6c025d50b9bd) - [Moorepo Javascript Projects with Yarn Workspaces and Lerna](https://www.honeybadger.io/blog/monorepo-yarn-workspace-lerna/) - [Replacing Lerna + Yarn with PNPM Workspaces](https://www.raulmelo.dev/blog/replacing-lerna-and-yarn-with-pnpm-workspaces) - [JSDC 2020 回顧 - Lerna](https://ithelp.ithome.com.tw/articles/10254160) - [Why should we use pnpm?](https://www.kochan.io/nodejs/why-should-we-use-pnpm.html) - [pnpm-doc](https://pnpm.io/motivation) - [Replacing Lerna + Yarn with PNPM Workspaces](https://www.raulmelo.dev/blog/replacing-lerna-and-yarn-with-pnpm-workspaces)