使用 PNPM 从 0 搭建 monorepo，测试并发布

server/2024/11/15 8:31:29/

1 目标

通过 PNPM 创建一个 monorepo（多个项目在一个代码仓库）项目，形成一个通用的仓库模板。

这个仓库既可以用于公司存放和管理所有的项目，也可以用于将个人班余的所有积累整合其中。

2 环境要求

核心是 PNPM 和 Node.js，没有特殊的版本要求，只要他俩能对应上即可。
在这里插入图片描述
除了以上两个，项目中也使用到以下工具或插件，都是按需添加，如不使用则不用考虑其环境要求。
Storybook：
Changeset：

3 仓库搭建

3.1 新建项目

新建一个文件夹作为项目容器。

这里起名叫 ease-life，意为轻松生活，所有的学习、工作都是为了更好地、更轻松的生活。

3.2 创建目录

3.2.1 apps

在项目根目录下创建 apps 文件夹。
在 apps 下创建 storybook 文件夹。用于测试和展示 web components。

apps 文件夹主要存放应用程序，如：Storybook、VitePress，还可以加上 vue-test、react-test 来对 web components 做测试。

3.2.2 packages

在项目根目录下创建 apps 文件夹。
在 packages 下分别创建 config（配置信息）、web-components（实现组件与框架无关）文件夹。

在 config 文件下创建 eslint、stylelint、commitlint 以及 typescript，用于存放对应的配置
在 web-components 创建 text 文件夹，实现一个简单的文本组件。

packages 底下主要包含插件、组件、命令行、类库等，除了以上的内容还可以按需加上 vue-components、react-components、cli、map-library 等等。

3.3 添加文件

在项目根目录下添加文件：pnpm-workspace.yaml，定义 PNPM 的工作空间：

packages:# 匹配 packages 目录下（任意文件夹下）的所有模块- 'packages/**'# 匹配 apps 直接子文件夹下的所有模块- 'apps/*'

这里的模块，说的是：包含 package.json，可以被发布到 NPM 远程仓库的项目

ease-life
|-- apps
|   |-- storybook
|   └── ...     
|-- packages|-- cli|   └──  package.json|-- code-quality|   |-- eslint-config|   |-- stylelint-config|   └── typescript-config|-- map-library|   └── package.json|-- vue-components|   |-- emap|   |   └── package.json|   |-- utils|       └── package.json└── web-components
|-- .npmrc
|-- package.json
|-- pnpm-lock.yaml
└── pnpm-workspace.yaml

未完持续～