转发：前端组件化之Monorepo方案实战

前言

在上一篇的前端组件化方案探究中，我们研究了什么是组件化以及我们为什么需要组件化。也调研和测试了一些开源项目，并且在使用、学习、研究、对比之后最终确定了以 pnpm + workspace + changeset 为技术方向的 monorepo 多包管理方案。

• 本文主要是沿着该路线进行项目落地，是一篇聚焦于实战的文章。
• 文章的目标是能够让未接触过monorepo架构的新手也能从0到1的完成一个多包管理的前端组件化项目

细致一点的说，我们主要从这几个方面入手：

1. monorepo项目架构的搭建
2. 整个项目的工程化规范搭建
3. 子项目的配置和构建配置，包括出入口管理、webpack打包
4. 文档站点的搭建
5. 版本管理和发布

使用 pnpm 快速搭建一个 monorepo 项目

在上一篇文章中我们描述了什么是monorepo，以及pnpm的workspace工作空间概念，简单理解的话就是两个方面：

• 如何通过一个工程管理多个项目的依赖
• 如何通过一个工程管理多个项目间的相互依赖
• 如何通过一个工程管理多个项目的版本

这里，我们主要围绕这几个核心思想展开工作。

创建主项目

首先，我们先创建一个主项目，在命令行中执行：

1. mkdir my-monorepo-app && cd my-monorepo-app
2. pnpm init

接下来我们创建一个packages目录作为我们的子项目目录使用，然后再创建几个子项目，如下：

├── package.json       
├── packages           // 子项目目录
  ├── components       // UI基础组件
  ├── pro-sqltiptree   // 高级业务组件
  ├── utils            // 工具类
复制代码

在主目录下简单配置下.gitignore：

/**/node_modules/
复制代码

因为是多包项目，存在主和子关系的嵌套结构，过滤规则需要考虑子目录下的情况（**/node_modules）

准备工作差不多了，接下来我们配置下工作空间（workspace），为安装npm包和依赖管理做准备。

其实对于使用pnpm的项目来说，还是比较简单的，我们只需要在主目录下创建一个pnpm-workspace.yaml 文件即可开启pnpm的工作空间功能。

pnpm 内置了对单一存储库（也称为多包存储库、多项目存储库或单体存储库）的支持， 你可以创建一个 workspace 以将多个项目合并到一个仓库中。

Workspace 协议更多的是对一个项目下多子项目的管理以及依赖管理。

我们先把packages目录添加到工作空间中，pnpm-workspace.yaml配置如下：

packages:
  - packages/*
复制代码

这样的话，所有在 packages 目录下的项目都会被工作空间统一接管，该目录下的子项目可以相互引用依赖，而不必重复安装，尤其是针对本地开发包的管理使用，提供了极大的方便，具体细节我们继续往下看~

安装依赖

monorepo最主要的功能就是对于依赖的管理