架构-单一代码库-monorepo-pnpm-workspace：基本使用 / 一个代码仓库中包含了多个软件包（package）并进行开发

原创已于 2023-12-13 14:08:42 修改 · 8.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #monorepo #pnpm-workplace

于 2023-03-22 00:02:04 首次发布

前端专栏收录该内容

320 篇文章

订阅专栏

本文介绍了如何使用pnpm创建和管理monorepo，包括初始化workspace、配置pnpm-workspace.yaml、创建项目、设置端口、安装依赖以及部署组件库。同时提到了组件在项目中的引用和部署策略，以及gitmodules作为替代方案的可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、官网文档

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

一个 workspace 的根目录下必须有 pnpm-workspace.yaml 文件，也可能会有 .npmrc 文件。

工作空间（Workspace） | pnpm

https://www.pnpm.cn/pnpm-workspace_yaml

二、pnpm-workspace环境搭建

2.1、创建目录

monorepo-pnpm-workspace-base

2.2、初始化项目

pnpm init

2.3、package.json 删除 main、test

去掉后

2.4、创建 pnpm-workspace.yaml 文件

packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'
  # all packages in subdirs of components/
  - 'common/**'
  # exclude packages that are inside test directories
  - '!**/test/**'

2.5、创建目录common、packages

2.6、package.json增加"private": true,

2.7、进入packages创建项目

cd packages

pnpm create vite app-base --template vue-ts

pnpm create vite app1 --template vue-ts

2.8、根目录下package.json增加如下红框内容

2.9、packages目录下app-base、app1、app2的package.json删除如下图红框内容

2.10、在整个项目根目录下（monorepo-pnpm-workspace-base）安装依赖

pnpm i

2.11、app-base、app1、app2分别在vite.config.ts中设置端口号

server: {
    port: 5173
}

2.12、根项目package.json配置

2.13、启动项目

pnpm run dev-base

启动成功，同理启动 app1、app2

三、pnpm公共组件库

3.1、创建common目录及文件如下

3.2、common/components/snow/index.vue

<template>
    <div>snow components index</div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

3.3、common/components/index.js

export * from "./snow"

3.4、common/components/package.json

{
  "name": "@common/components",
  "version": "1.0.0",
  "description": "pnpm-workspace-common-components",
  "pricate": true,
  "keywords": [],
  "author": "",
  "license": "MIT",
  "main": "index.ts"
}