pnpm + monorepo

概念 #

Mono-repo #

Monolithic Repository，mono = one/single，多个项目代码存储在一个库里

Multi-repo #

Multiple Repositories，multi = many，每个项目都有一个单独的库

图：Muti-repo and Menorepo

常用命令 #

• pnpm - pnpm官网

# 生成package.json
pnpm init

# 强制使用pnpm
"scripts": {
  "preinstall": "npx only-allow pnpm"
}

# -w：安装到根目录下
pnpm add/i vitepress -w

# 为 www-note 包安装 VitePress
pnpm --filter www-note i vitepress

遇到问题 #

依赖提升问题 #

npm 由于依赖扁平化处理，使得我们原本可以访问 @vueuse/**。
切换为 pnpm 后，在默认情况下不允许访问未声明的依赖，因此我们需要补充安装 @vueuse/**。

• publicHoistPattern
• shamefullyHoist

公用组件/子包 ⌛️ #

1. git直接引用 #

• 直接通过 npm install <git remote url>

2. npm私有库 #

一般私有化的 npm 仓库有以下几种方法实现：

1. 通过 npm 购买私有服务
   • 个人：7美元/月
   • 团队：7美元/人/月
2. 通过开源项目直接搭建
   • cnpm：阿里出的 npm 私有方案，权限控制较为全面但是配置复杂，需要自己搭建 mysql 之类的数据库存储。
   • sinopia：基于 Node.js 实现的一个开源 npm 库，年久失修。
   • verdaccio：基于 sinopia 继续开发

参考 #

• 企业级 npm 私有仓库部署方案 - 微信公众号文章

3. git子库 #

• git submodule 和 git subtree，你会选择哪个来管理子项目？ - 知乎文章

参考 #

• pnpm - using-changesets - pnpm官网
• 万字长文手摸手带你从 0 到 1 搭建一个 monorepo 前端组件化项目 - 掘金
• 【从 0 到 1 搭建 Vue 组件库框架】0. 系列导论 - 掘金 - 系列文章
• 如何使用 Monorepo 实现跨项目共享组件和模块 - 掘金
• 为什么 pnpm+monorepo 是组件库项目的最佳实践 - 微信公众号文章
• 开源项目都在用 monorepo，但是你知道居然有那么多坑么？ - 掘金