架构-单一代码库-monorepo-pnpm-workspace：基本使用

Love The Way You Lie 2024-03-25 22:51 52阅读 0赞

**一、官网文档**

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

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

[工作空间（Workspace） | pnpm][Workspace_ _ pnpm]

[https://www.pnpm.cn/pnpm-workspace\_yaml][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

![0f467415a00f4fa082292af0e612611f.png][]

去掉后

![45abc681f1fa4668a1da40568c8d936d.png][]

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.4、创建目录common、packages

![f774c1dcb7d242fc8c2cb3c09f3dbb33.png][]

2.5、package.json增加"pricate": true,

![4b8a7d251497461e87885e8cc2e4d98d.png][]

2.6、进入packages创建项目

> cd packages

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

> pnpm create vite app1 --template vue-ts

![31ad554c806349c2a494cccd0af5857a.png][]

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

![fb77621715a44dd78b698d080274a972.png][]

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

![211c9b89ba724f6cab35c533e74f8a5e.png][]

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

> pnpm i

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

server: {
        port: 5173
    }

![23d7d1ea0dbc48dabfe40036dc11f1b4.png][]

2.11、根项目package.json配置

![a3a98dc3cb57439a978690cfdf8b208e.png][]

2.12、启动项目

> pnpm run dev-base

![d5962b2a250c43dcacdb4720cd8c37db.png][]

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

![8b7663bb432d46dfaaee4182df0d9194.png][]

**三、pnpm公共组件库**

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

![56e5fbf2236a42b0b2801fe2ab0dee14.png][]

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"
    }

3.5、 安装workspace依赖

下边命令式packages下所有项目都安装，也可以指定项目安装见3.8

> pnpm i @common/components -w

![1123c40ffe7a4b49b4c9729ca3087b65.png][]

package.json 增加内容如下![a417b60039ac43d697f20646bd83354d.png][]

3.6、app-base/src/App.vue引入使用组件snow

![cb771af8b38b4c9394f7421e1de6ef83.png][]

3.7、启动项目 pnpm run dev-base，运行成功，组件内容已使用成功。

![3ccc245a120c470bb725a708bf1585fd.png][]

3.8、指定项目按照common下依赖

> pnpm i @common/components --filter app-base

![07a00eebbd684a01a16a96c07ffff581.png][]

安装后package.json增加依赖，子项目node\_modules增加依赖，同样运行成功。

**四、pnpm-workspace项目部署-思路**

有本人“三”看出，组件部分式放在了node\_modules下，由package.json管理，和普通的项目其实是一样了，部署思路同普通项目。

[CentOS部署vue项目\_snow@li的博客-CSDN博客][CentOS_vue_snow_li_-CSDN]

[Docker部署前端项目（nuxt）\_nuxt docker\_snow@li的博客-CSDN博客][Docker_nuxt_nuxt docker_snow_li_-CSDN]

**五、拓展**

git modules也可以实现使用公共代码/组件的效果

[git：git modules\_gitmodules\_snow@li的博客-CSDN博客][git_git modules_gitmodules_snow_li_-CSDN]

**六、欢迎交流指正，关注我，一起学习。**

**参考连接：**

[工作空间（Workspace） | pnpm][Workspace_ _ pnpm]

[pnpm-workspace.yaml | pnpm中文文档 | pnpm中文网][https_www.pnpm.cn_pnpm-workspace_yaml]

[pnpm工作区，节省磁盘空间，共享组件\_哔哩哔哩\_bilibili][pnpm_bilibili]

[pnpm-workspace.yaml]: https://pnpm.io/zh/pnpm-workspace_yaml
[.npmrc]: https://pnpm.io/zh/npmrc
[Workspace_ _ pnpm]: https://pnpm.io/zh/workspaces
[https_www.pnpm.cn_pnpm-workspace_yaml]: https://www.pnpm.cn/pnpm-workspace_yaml
[0f467415a00f4fa082292af0e612611f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/38659867e07a48bda83bd5dea2e6d35c.png
[45abc681f1fa4668a1da40568c8d936d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6bc511f6138c417185e1d1ae85a591da.png
[f774c1dcb7d242fc8c2cb3c09f3dbb33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3aadd5cae1cf405f9c9255b817e47cd1.png
[4b8a7d251497461e87885e8cc2e4d98d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/82ec4debc2d44d9b9c6c2c2a7a8dc2b2.png
[31ad554c806349c2a494cccd0af5857a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/77d7c4b47e2e4ac78632d5f9cd2c9046.png
[fb77621715a44dd78b698d080274a972.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/03d971d024b5458e94e5abadbeb897ac.png
[211c9b89ba724f6cab35c533e74f8a5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/808067eb3f274c019769886a12f43c4e.png
[23d7d1ea0dbc48dabfe40036dc11f1b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e2c7dc419cb04d3db1d778586621888a.png
[a3a98dc3cb57439a978690cfdf8b208e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/28ca78bef88a45e09f429386ca279d9d.png
[d5962b2a250c43dcacdb4720cd8c37db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/101a0a63efe948859673e49b3606a243.png
[8b7663bb432d46dfaaee4182df0d9194.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e4d36cc4faae409a85f75cb57520e92c.png
[56e5fbf2236a42b0b2801fe2ab0dee14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5f185c5d91c34ffd99e126fc393f3ee4.png
[1123c40ffe7a4b49b4c9729ca3087b65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f1bf040c0be24e7ab80a59a9e0fa57f9.png
[a417b60039ac43d697f20646bd83354d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d635bf4dc270440fb56e30b414349fa9.png
[cb771af8b38b4c9394f7421e1de6ef83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cdace8a54c524a039cb039cd7ada19db.png
[3ccc245a120c470bb725a708bf1585fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/39b8a491ec8c4f13931c73b616e32ce7.png
[07a00eebbd684a01a16a96c07ffff581.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bf2506ebbf68449bb42839497c41d079.png
[CentOS_vue_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/121217951
[Docker_nuxt_nuxt docker_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/120071991
[git_git modules_gitmodules_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/121476583
[pnpm_bilibili]: https://www.bilibili.com/video/BV1VY41167ff/?spm_id_from=333.999.0.0&vd_source=704e2597123fc066b03283e82eb866c0