文章目录
- 1. 以 pnpm 构建 monorepo
- 1.1 全局安装 pnpm
- 1.2 配置 pnpm 的 monorepo 工作区
- 1.3 仓库项目内的包相互调用
- 1.4 TypeScript 初始化配置文件
- 2. 通用配置文件
- 2.1 添加 .editorconfig 编辑器格式配置文件
- 2.2 添加 .gitignore git 忽略文件
- 2.3 添加 .npmrc npm配置文件
- 2.4 工作区配置
- 2.5 添加 .gitattributes 配置git 使用的文件和路径的属性
- 3. play 项目搭建
- 3.1 使用 Vite 来创建项目
- 4. TypeScript 的 Monorepo 设置
- 4.1 TypeScript 项目引用
- 4.2 TypeScript 的类型检查
- 4.3 串行/并行执行脚本
1. 以 pnpm 构建 monorepo
monorepo 是一个项目仓库，里面可以存放多个项目，每个项目可以独立管理，并且可以共享依赖。
pnpm 全称 performant npm，意思为高性能的 npm。pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。
1.1 全局安装 pnpm
npm install -g pnpm
然后在项目下使用 pnpm init 进行 package.json 的初始化,得到 package.json 初始内容，然后把 package.json 中的 name 属性删掉，并且添加一个 “private”: true 属性，因为它是不需要发布的。
为了减少因node的版本的差异而产生开发环境错误，在package.json中增加engines字段来限制版本
为项目指定使用指定版本的node.js，在package.json中增加peerDependencies字段来限制版本
{"private": true,"scripts": {},"peerDependencies": {"vue": "^3.2.0"},"engines": {"node": ">=16"},}
1.2 配置 pnpm 的 monorepo 工作区
在这个仓库下，我们需要管理多个项目，就可以采用 pnpm 的 monorepo。在仓库的根目录下创建一个 pnpm-workspace.yaml 文件，可以在 pnpm-workspace.yaml 配置文件中指定这个仓库中有多少个项目。
packages:- packages/*- docs- play- internal/*
play 目录是示例项目，在开发的时候可以知道效果是否达到预期；
docs 目录是文档项目，展示组件的使用方法；
internal 目录是内部项目，存放一些私有组件，比如：打包方法、等；
packages 目录是所有组件的项目目录了，在 packages 目录中又可以放很多包的项目目录，比如，组件包目录：components、主题包目录：theme-chalk、工具包目录：utils 等。
然后每一个包目录里面也需要一个 package.json 文件进行声明这是一个 NPM 包目录。所以需要进入每个包目录进行初始一个 package.json 文件。
以 components 包为例，进入到 components 目录底下初始化一个 package.json 文件，更改包名：@vision-ui-vue/components。文件内容如下：
{"name": "@vision-ui-vue/components","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}
其他两个的包名则分别为：@vision-ui-vue/theme-chalk 和 @vision-ui-vue/utils，创建过程同上。
至此一个初步搭建的项目目录结构如下：
├── docs
├── packages
│ ├── components
│ │ └── package
)
