搭建vue3组件库(一):Monorepo架构搭建

embedded/2024/9/23 19:44:25/

文章目录

- 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