当前位置：首页 > article >正文

多包单仓库（monorepo）实现形式

article 2025/1/17 20:55:21

背景

需求和方案

从0开始搭建一个Monorepo项目

创建

配置全局公共样式

配置全局公共组件

方式1：不需要独立发布的组件包，只在当前项目的子项目中使用

方式2：需要独立发布和版本维护的包

子项目的独立构建和部署

总结

Monorepo优势

便于代码维护、管理

支持多目录结构

优化开发流程、提升开发效率

Monorepo缺点

权限管理问题

代码管理

背景

随着业务不断增加，公司项目越来越多、沉淀的功能组件、工具包、UI、业务组件等内容越来越多，模块不断增长，一个组件一个仓库（Mulitrepo）虽然从业务逻辑上解耦，但是也增加了管理难度：

依赖关系不清晰、管理复杂
配置无法共享
代码共享流程复杂，每次发布之后需要在项目中手动更新版本进行测试，效率低

在现代前端开发中，Monorepo是一种越来越流行的代码管理方式，它通过将多个相关包集中在一个仓库中进行管理，带来了更高效的开发体验和更简单的依赖管理。

需求和方案

需求：

多项目整合与独立运行
公共组件和样式共享

方案：

pnpm 是一种高效的包管理工具，它通过去重存储依赖和工作空间功能，为 Monorepo 项目提供了强大的支持。

上述需求可以通过在pnpm配置workspace工作空间（官网链接）来实现。

从0开始搭建一个Monorepo项目

创建

1.新建一个workspace文件夹，初始化

pnpm init

生成一个package.json文件

2.删除package.json 文件中的main、test字段

由于工程根目录 package.json 不需要发包，需要配置 "private": true。

{
  "name": "workspace",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {

  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3.根目录下新建pnpm-workspace.yaml文件（更多）

packages:
# packages/ 直接子目录中的所有包
- 'packages/*'

4.新建多包目录，例如workspace下新建一个文件夹packages，用于存放后续的各个项目

5.packages文件夹下新建2个vue项目

// 创建第一个
pnpm create vite app-first --template vue

// 创建第二个
pnpm create vite app-second --template vue

找到这2个子项目的vite.config.js文件，配置2个项目不同的端口号，避免端口冲突

  server: {
    port: 3000,
  }

6.workspace根目录下执行安装依赖

pnpm i

执行之后根目录和2个子项目下都会生成各自的node_module文件。

7.配置根目录下package.json下子项目启动和构建脚本

  "scripts": {
    "dev:first": "pnpm run -C packages/app-first dev",
    "dev:second": "pnpm run -C packages/app-second dev",
    "build:first": "pnpm run -C packages/app-first build",
    "build:second": "pnpm run -C packages/app-second build"
  },

若需要同时启动2个项目，需要安装依赖concurrently