Vue3源码解析：构建流程搭建 - monorepo 篇章一

2023-11-13 21:46:15

一、搭建 monorepo

monorepo 是一个包含多个项目的单一代码库，它可以帮助我们集中管理和构建多个项目，提高开发效率。

1. 安装项目依赖

首先，我们需要安装 yarn 包管理器。如果还没有安装，可以使用以下命令安装：

npm install -g yarn

然后，进入项目根目录，使用 yarn 安装项目依赖：

yarn install

这将安装所有项目所需的依赖包，包括 Vue3、monorepo 管理工具、以及其他开发工具。

2. 目录结构

monorepo 项目的目录结构通常如下：

- root-package.json
- packages/
  - package-a/
  - package-b/
  - ...

其中，root-package.json 是根目录下的 package.json 文件，packages 目录下存放着所有项目包。

3. 根 package.json 的配置

根 package.json 文件中需要配置一些字段，以便于管理和构建 monorepo 项目。

{
  "name": "monorepo",
  "private": true,
  "workspaces": ["packages/*"],
  "scripts": {
    "build": "yarn workspace packages build",
    "start": "yarn workspace packages start",
    "test": "yarn workspace packages test"
  }
}

"private": true 表示这是一个私有包，不会发布到 npm 上。
"workspaces": ["packages/*"] 指定了工作空间，表示 packages 目录下的所有子目录都是工作空间。
"scripts" 字段定义了一些脚本命令，以便于管理和构建所有项目包。

4. 使用 workspace 指定工作空间

在每个项目包的 package.json 文件中，我们需要使用 workspace 字段指定工作空间，以便于 yarn 知道该项目包属于哪个工作空间。

{
  "name": "package-a",
  "workspace": ".",
  "scripts": {
    "build": "vue-cli-service build",
    "start": "vue-cli-service serve",
    "test": "vue-cli-service test"
  }
}