前言
自己陆续写了 6 个开源项目，每次维护时翻看旧代码，都忍不住用最新的构建方式重构一遍，于是在想是不是可以搞一套前端开源仓库的模板，每次想写点小程序，无需考虑构建方式，直接无脑写逻辑就可以。在翻阅了多个知名开源仓库后，觉得 Vue 的项目管理逻辑相当不错，就基于 Vue 的管理逻辑，抽离出了一套通用的前端开源仓库模板：repo-temp 。
Vue 仓库是怎么设计的？
下面就借助 Vue 仓库的一些功能，介绍做一个开源仓库可以有哪些可选项。
仓库的设计模式：monorepo
在版本控制系统中，monorepo（“ mono ”意思是“单一”，“repo”是“ repository ”的缩写）是一种软件开发策略，其中多个项目的代码存储在同一个存储库中。
按照上述维基百科的描述可以简单理解为，把多个 NPM 包放到同一个仓库进行管理，Vue 就是基于这种 monorepo 进行包管理的。这样做我觉得有几个的优势：
- 统一版本管理。Vue 把核心逻辑拆分了多个包，方便按需取用，但是如果一个包是一个仓库，每次发布新的版本时，就需要跨仓库修改依赖版本，如果使用 monorepo 的形式，就可以实现一个包发布新版本，其它包的依赖版本自动更新。
- 复用构建工具。多个包使用同一套构建工具，统一了工具的使用方法和版本。
仓库的包管理工具：
常用的包管理工具为：npm ，Vue 仓库强制使用了 pnpm ，关于如何强制使用哪种包管理工具，可以参考文章 《如何判断当前的 npm 包管理器？》 ，我为团队编写的构建工具也支持了 pnpm , 我认为 pnpm 的优势主要是减少重复依赖的下载，多项目的话可以节省内存空间。
旧版的 Vue 仓库使用的是 yarn ,虽然 Vue3 仓库强制使用了 pnpm ,但 yarn 还是需要安装，原因是 npm publish 发布 NPM 包的时候还是依赖 yarn 的功能。
开源许可证
在创建仓库时，如果没有选择许可证，表示任何人都不能复制、修改你的仓库，如果允许被人修改自己的项目，可以根据以下的情况选择适合自己的许可证。
作为参考，Vue 目前使用的为 MIT 许可证。
关于各个许可证的区别，可以参考 这篇文章。
.gitignore
大家对这个文件应该不陌生，创建 .gitignore 文件，可以让 git 过滤指定的文件。
这里我提到 .gitignore ，是想解答一个疑惑，如果在 Github 创建前端仓库，需要选择哪个 .gitignore 模版？如果你也有这个疑问，可以在 这篇文章 找到答案。
项目打包格式
相信大家对于 ESM 、UMD 、AMD 、CJS 等打包格式头疼不已，这里直接给出答案，Vue 使用 rollup 主要打包出了如下格式，大家做自己的项目，以下格式也基本就满足需求了：
esm： 给其它打包器使用；iife： 给浏览器使用；cjs： 给 node.js 使用；
代码格式化
代码格式化 Vue 使用到了大家常用的 prettier 进行代码美化。
代码格式约束
Vue 使用 lint-staged 进行约束，只不过没有使用常见的 husky，而是使用了 simple-git-hooks ，在 git 提交的时候，对代码格式进行约束。
lint-staged 是用于对 git 的暂存区的文件进行操作的工具，比如可以在代码提交前执行 lint 校验，类型检查，图片优化等操作。
lint-staged 通常配合 husky 这样的 git-hooks 工具一起使用。git-hooks 用来定义一个钩子，这些钩子方法会在 git 工作流程中比如 pre-commit，commit-msg 时触发，可以把 lint-staged 放到这些钩子方法中。
单元测试
在单元测试部分，Vue 使用到了自家的 Vitest，Vitest 依赖 Vite ，适用于 Vite 基础的项目。这里我选用了 jest ，因为 jest 依赖更加简单，适用范围更广。
更新日志
在更新日志的生成与约束方面，Vue 使用到的是 conventional-changelog-cli，conventional-changelog-cli 使用的是 Angular 提交规范，对 Angular 提交信息规范陌生的同学可以在 这里 查看。
中英文 README
这里是个可选项，但建议大家写开源项目，还是准备中英文 README 文件，这对于项目的传播还是非常有帮助的。生成双语描述文件也很简单，写 2 份 README 文件，然后互相引用就可以了。
如何快速新建一个前端开源仓库
通过了解以上知识，大家就可以创建出一个和 Vue 设计模式类似的前端开源仓库了，如果你想快速上手，不想在细枝末节费时间，可以直接使用我的模板快速创建：
$ npx repo-temp init
详细的文档，点此查看 。
如何快速上手一个项目
这里我通过介绍我自己模板的使用方式，来带领大家如何快速上手一个开源项目。
package.json
没错，就是这个 package.json 文件，这个仓库不仅仅是发布 NPM 才能用到，对于大家从 0 开始使用一个开源仓库，这个文件就是说明书，如果你想详细了解 package.json 的所有参数，可以参考 这篇文章 。
想要快速上手，大家只需要查看 scripts 参数就可以了。
npm script
npm script 就是 package.json 的 scripts 参数 ，这里我摘取出来：
"scripts": {
"dev": "node scripts/dev.mjs",
"build": "node scripts/build.mjs",
"release": "node scripts/release.mjs",
"test": "jest",
"lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
"format": "prettier --write --cache --parser typescript "**/*.[tj]s?(x)"",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"preinstall": "node ./scripts/preinstall.mjs",
"postinstall": "simple-git-hooks"
},
通过以上代码，我们就可以知道：
- 如果想运行项目，则使用
npm run dev即可； - 如果想打包项目到本地，使用
npm run build即可； - 如果想发布项目，使用
npm run release即可； - 如果想运行单元测试，运行
npm run test即可； - ....
通过上面 2 个方面，就可以快速上手一个开源项目啦。
总结
本文通过分析 Vue 仓库的设计模式，来介绍要开发一个前端开源项目，需要了解哪些可选知识。如果想要快速上手搭建一个前端开源项目，可以尝试直接使用模板 repo-temp ，大家也可以根据自己的需求，搭建一套自己的开源模板，方便后续使用。
