Monorepo学习 ​

最近看了一点vue3和element-plus的源码，看到他们都已经用了pnpm+Monorepo。我悟了，这又是一个必须要学的东西。那么，就来浅浅的尝试一下，实现一个vue3的项目(demo1)，引入同样独立的demo2和demo3模块，三个包共用vue3、element-plus和typescript依赖，同时demo2有自己独立的依赖ts-node来运行自己的测试代码。

安装pnpm ​

npm install pnpm -g

项目结构搭建 ​

新建一个文件夹，就叫Monorepo-demo，用编辑器打开文件夹，新建pnpm-workspace.yaml文件

packages:
  - 'packages/*'

在Monorepo-demo下新建packages文件夹，文件夹下新建demo1(vue项目文件夹)、demo2、demo3三个文件夹 并在各级目录下执行npm init -y创建包，生成对应的package.json文件。

安装公共的Vue、Element-plus和typescript依赖 ​

-w表示将依赖安装到公共模块中

pnpm install vue element-plus typescript -w

demo1中创建vue3项目 ​

这里我用的是官方脚手架创建vue项目，创建完以后将项目文件移动到demo1文件夹下，调整package.json中的配置，去掉vue、typescript在demo1中的依赖配置，然后去外层执行命令pnpm install安装依赖。 这时demo1中的依赖就安装好了，在demo1中打开终端运行代码，能够成功运行。证明外层的公共模块依赖正常生效了。

demo2、demo3中提供一些封装好的逻辑 ​

这里我直接在demo2下新建index.ts文件提供一个Demo2的类，代码如下：

// index.ts
export default class Demo2 {
    name: string
    constructor(name: string) {
        this.name = name
    }

    helloWorld() {
        console.log('Hello World ! Demo2:', this.name)
    }
}

新建test.ts运行测试

// test.ts
import Demo2 from './index'

const test = new Demo2('chaochao')
test.helloWorld()

demo2中安装自己的独立依赖ts-node，在package.json中配置测试命令：

pnpm install ts-node

"scripts": {
  "test": "ts-node test.ts"
},

随后在demo2中打开终端执行npm run test，运行成功，证明Demo2中能共用typescript依赖且自己独立安装的ts-node生效。

demo3的代码和demo2大体一致，只修改了打印信息，不安装ts-node依赖，这里不再赘述。

在vue3项目中安装demo2、demo3作为依赖 ​

这里的demo2、demo3是根据具体package.json下的包名来定，我这里是demo2、demo3

pnpm install demo2 demo3

然后就可以看到依赖的安装情况：

"dependencies": {
  "demo2": "workspace:^",
  "demo3": "workspace:^",
},

然后在vue项目中的App.vue中测试一下依赖安装情况：

import Demo2 from 'demo2'
import Demo3 from 'demo3'

const test2 = new Demo2('chaochao')
test2.helloWorld()

const test3 = new Demo3('xiaohua')
test3.wakk()

运行项目，发现依赖正常引入，能正常打印出需要的日志信息。随后我又测试了一下修改demo2中的打印日志，vue的项目中第一时间就更新了过去，至此，Monorepo的demo项目完成。

在外层的package.json中配置命令启动packages文件夹下面的项目 ​

"scripts": {
  "dev": "pnpm -C ./packages/demo1 dev"
},

这样我就不需要每次启动项目都跑到demo1下面启动我的vue项目了，可以直接在项目根目录下启动vue项目。

npm-run-all来串行/并行执行命令 ​

pnpm install npm-run-all -D -w

npm-run-all提供三个命令，分别是npm-run-all、run-s、run-p，后两个是npm-run-all带参数的简写，分别对应串行和并行。 这里一起来看一下element-plus的命令配置：

"typecheck": "run-p typecheck:web typecheck:play typecheck:node typecheck:vite-config typecheck:vitest",
"typecheck:web": "vue-tsc -p tsconfig.web.json --composite false --noEmit",
"typecheck:node": "tsc -p tsconfig.node.json --noEmit",
"typecheck:play": "vue-tsc -p tsconfig.play.json --composite false --noEmit",
"typecheck:vite-config": "vue-tsc -p tsconfig.vite-config.json --composite false --noEmit",
"typecheck:vitest": "vue-tsc -p tsconfig.vitest.json --composite false --noEmit",

vue-tsc是基于Volar的vue3类型检查工具，执行vue-tsc --noEmit时使用命令行参数--project（或-p）指定配置文件进行类型检查。--composite false不进行增量编译，增量编译指的是生成 .d.ts 和 tsconfig.tsbuildinfo 文件，使用 vue-tsc 法语检查时不能设置为true。 这里element-plus的配置命令，配置下面五个类型检查命令分别进行对应模块的类型检查，最后配置一个typecheck命令，并行对所有模块类型进行检查。

学习参考链接 ​

Monorepo学习、typescript配置、串行/并行执行脚本、npm-run-all：https://juejin.cn/post/7146183222425518093?searchId=20230726141301208A558690115E13CC04#heading-14