工作中，我们可能会同时维护多个项目的情况，有时候，多个项目又会存在一些跟业务逻辑无关的公共逻辑。当然，我们又不想把代码复制多次的话，往往会考虑 lib 的开发。如果有时，又会遇到多框架的情况，我们当然不希望相同的逻辑在不同的框架重复实现，又会涉及跨框架的逻辑共享。
下面，我们以一个具体的实例来实现一个简单的多框架的 lib 开发。首先，我们来创造一个需求：
- 实现一个页面，输入框的 first name, last name, 显示 full name 的页面。
- 需要实现多框架，angular, react, vue
- 需要尽可能复用代码，纯逻辑部分，不希望重复实现
- 能够利用 github 自动发布
需要实现不同的框架，肯定是不同的 package, vue, react, angular。这里我们考虑 mono-repo 来进行管理。考虑到对于 mono-repo 的支持，我们使用 pnpm 来管理 package（yarn2 也是一个比较好的选择）。
目录结构
我们要考虑的就是文件的目录形式。考虑到需要按照不同的框架来排列，每一种框架又可能会存在多个 package 的情况。可以考虑以下目录结构：
- angular
- ngx-name-maker
- react
- react-name-maker
- vue
- vue-name-maker
- vanilla
- vanilla-name-maker
package.json
pnpm-workspace.yaml
接下来，我们分别用 angular-cli 和 vite 创建这几个空的 project。当然，为了方便测试，我们往往会创建一个 demo project 来做本地的页面测试。你可以选择 demo 跟 lib 分开，也可以选择放在相同的文件夹下面。
- angular
- ngx-name-maker
- react
- react-name-maker
- vue
- vue-name-maker
- vanilla
- vanilla-name-maker
- demos
- ngx-demo
- react-demo
- vue-demo
- vanilla-demo
package.json
pnpm-workspace.yaml
commitizen commit
作为 lib, 规范的 commit 记录可以方便我们维护和生成 change log, 这里我们选择 commitize。这里，我们安装在根目录
pnpm install commitizen -D --filter=name-maker
