pnpm-workspaces搭建monorepo项目

很多前端开源项目都会采用 monorepo 的方式来管理，比如前段时间我提交 PR 的项目 LogicFlow，用的是 lerna + workspaces 来进行项目管理，使得代码引用非常方便。

平常公司开发项目其实也用得到，最近单位开发一个项目，包含边端和中心端两个工程，使用的 UI 库、积累的组件库、公共方法等，很多都是共用的，也计划采用 monorepo 的方式来组织代码，这样可以省去很多麻烦。

以下是我整理的搭建 monorepo 的操作步骤，采用的是 pnpm workspaces 方案

一.环境搭建

首先使用 nvm 切换 node 版本为 16.20.0，对应安装 pnpm8 的版本

1.1 新建 monorepo-vue 文件夹

1.2 初始化项目

1
pnpm init

会新增一个 package.json 文件，删掉里面的 mian、test

14

1.3 创建 pnpm-workspace.yaml 文件

1
2
3
4
5
6
7
packages:
  # all packages in direct subdirs of packages/
  - "packages/*"
  # all packages in subdirs of components/
  - "common/**"
  # exclude packages that are inside test directories
  - "!**/test/**"

1.4 创建目录 common、packages

1
mkdir common
1
mkdir packages

1.5 进入 packages 创建多个 vue 项目

1
npm init vite@latest

分别创建名为 app-base、app1、app2 的 vue 项目

15

1.6 在根目录的 package.json 增加 scripts、dependencies、devDependencies

scripts、dependencies、devDependencies 这三个属性，可以在 packages 里随便一个项目的 package.json 复制过来；

然后再删掉 packages 下三个项目的 packages.json 下的 dependencies、devDependencies

1.7 根目录下安装依赖

运行安装命令，会自动安装子项目依赖

1
pnpm i

1.8 提取.gitignore 文件到根目录

同时 packages 下三个项目的.gitignore 删掉

1.9 代码格式化配置

新建.prettierrc.js 文件，代码格式化

1
2
3
4
5
module.exports = {
  printWidth: 120, // 指定代码长度，超出换行
  semi: true, // 结尾加上分号
  // 略
};

1.10 启动项目

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

1
2
3
server: {
  port: 5173;
}

在根目录下 package.json 配置启动命令

16

启动对应的项目（以 app-base 为例，其他两个同理）

1
pnpm run dev-base

二、搭建公共组件库

17

2.1 common/components/assets/vue.svg

随便放一张图片

2.2 common/components/snow/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>components in {{ comName }}</div>
  <img :src="vueSvg" alt="" />
  <div class="test"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import vueSvg from "../assets/vue.svg";

const props = defineProps({
  comName: String,
});

onMounted(() => {
  console.log(props.comName);
});
</script>

<style scoped>
.test {
  width: 60px;
  height: 60px;
  background: url("../assets/vue.svg") no-repeat;
  background-size: 100% 100%;
}
</style>

2.3 common/components/index.ts

1
2
3
import Snow from "./snow/index.vue";

export { Snow };

2.4 common/utils/index.ts

1
2
3
4
5
6
export const aa = () => {
  console.log("aaaaaaaaa");
};
export const bb = () => {
  console.log("bbbbbbbbb");
};

2.5 common/index.ts

1
2
export * from "./components/";
export * as utils from "./utils";

2.6 common/package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "@common/core",
  "version": "1.0.0",
  "description": "抽取的公共组件及工具",
  "devDependencies": {
    "typescript": "^5.2.2"
  },
  "private": true,
  "keywords": [],
  "author": "",
  "license": "MIT",
  "main": "index.ts"
}

因为有 devDependencies，所以在根目录再执行一遍 pnpm i

2.7 上一步安装了 ts 后，解决 2.2 引入 vue.svg 语法报错的问题

在 common 下新增 image.d.ts

1
2
3
4
5
6
7
8
9
/* eslint-disable */
/* 需要声明图片文件,不然报错 */
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';

在 common 下新增 tsconfig.json，并在 include 中加入 image.d.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "compilerOptions": {
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": [
    "components/**/*.ts",
    "utils/**/*.ts",
    "components/**/*.vue",
    "image.d.ts"
  ]
}

2.8 最终的 common 目录

18

三、引入公共组件库

3.1 根目录下，安装 workspace 依赖

1
pnpm i @common/core -w

执行成功后，根目录的 package.json 会被加上这一行

19

3.2 packages 下的三个项目分别引入公共组件和方法

以 app-base 为例：packages/app-base/src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <Snow comName="app-base" />
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { Snow } from "@common/core/components";
import { aa, bb } from "@common/core/utils";

onMounted(() => {
  aa();
  bb();
});
</script>

<style scoped></style>

3.3 组件引入成功，在界面正常渲染

20

四、打包配置

在 1.10 中，在根目录下配置启动命令，然后可以在根目录下启动 packages 下的三个项目；同理，可以配置打包命令，以便在根目录下打包 packages 的三个项目，还可以将打包的文件输出到根目录

4.1 根目录安装@types/node

目的是为了下一步操作的语法支持

-save 代表安装到项目依赖 dependencies，而加上-save-dev 是安装到开发依赖 devDependencies

1
pnpm i @types/node -w -save-dev
21

4.2 packages 下的三个项目配置打包路径

以 app-base 为例，在 packages/app-base/vite.config.ts 配置

1
2
3
build: {
  outDir: resolve(__dirname, '../../app-base-dist'),
},
22

这样可以打包到根目录

4.3 根目录配置打包命令

1
2
3
"build-base": "pnpm run -C packages/app-base build",
"build-app1": "pnpm run -C packages/app1 build",
"build-app2": "pnpm run -C packages/app2 build",
23

4.4 打包

首先在根目录.gitignore 加入

1
2
3
app-base-dist
app1-dist
app2-dist

逐个运行打包命令

1
pnpm run build-base

打包成功

24

五、参考资料

pnpm-workspace 环境搭建

前端架构: 脚手架之多 package 项目管理和架构

前端架构: 脚手架之包管理工具的案例对比及 workspaces 特性的使用与发布过程

vue 项目中使用 workspaces

workspaces - monorepo 实战

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

吴晨光<br><br>毕业于广州大学 在职前端工程师<br>谢谢大家