pnpm monorepo

pnpm 包管理器

  • 目标:节省磁盘空间,并提升安装速度

实现 monorepo

# 初始化目录结构 如下
monorepo
├─.npmrc #project npmrc 配置
├─package.json
├─pnpm-lock.yaml
├─pnpm-workspace.yaml #工作区间
├─README.md
├─packages
|    ├─sub
|    ├─other
|    ├─main

#涉及相关命令
pnpm init -y #初始化
pnpm create vite main #创建main应用
pnpm create vite other #创建other应用
pnpm create vite sub #创建sub应用

pnpm-workspace.yaml

packages:
  # all packages in subdirs of packages
  - "packages/**"
  # exclude packages that are inside test directories
  #- "!packages/other/**"

.npmrc

shamefully-hoist = true #依赖提升

应用 package.json

// package.json(main)
{
  "name": "main",
  ...
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "sub": "workspace:*"
  }
}

//package.json(sub)
{
  "name": "sub",
  ...
  "dependencies": {
    "main": "workspace:*"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vue-tsc": "^0.34.7"
  }
}

//package.json (other)
{
  "name": "other",
  "private": true,
  "version": "0.0.0",
  ...
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vue-tsc": "^0.34.7"
  }
}
  • 注意 workspace 更多写法可参考官网

  • 依赖安装后效果预览

pnpm-lock.yaml 文件如下 ,node-modules 结构同理,暂未展示

...

  packages/main:
    specifiers:
      sub: workspace:*
      vue: ^3.2.25
    dependencies:
      vue: registry.npmmirror.com/vue/3.2.36
    devDependencies:
      sub: link:../sub

  packages/other:
    specifiers:
      '@vitejs/plugin-vue': ^2.3.3
      typescript: ^4.5.4
      vite: ^2.9.9
      vue: ^3.2.25
      vue-tsc: ^0.34.7
    dependencies:
      vue: registry.npmmirror.com/vue/3.2.36
    devDependencies:
      '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.3.3_vite@2.9.9+vue@3.2.36
      typescript: registry.npmmirror.com/typescript/4.7.2
      vite: registry.npmmirror.com/vite/2.9.9
      vue-tsc: registry.npmmirror.com/vue-tsc/0.34.16_typescript@4.7.2

  packages/sub:
    specifiers:
      '@vitejs/plugin-vue': ^2.3.3
      main: workspace:*
      typescript: ^4.5.4
      vite: ^2.9.9
      vue-tsc: ^0.34.7
    dependencies:
      main: link:../main
    devDependencies:
      '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.3.3_vite@2.9.9
      typescript: registry.npmmirror.com/typescript/4.7.2
      vite: registry.npmmirror.com/vite/2.9.9
      vue-tsc: registry.npmmirror.com/vue-tsc/0.34.16_typescript@4.7.2

packages:
...

更多详情:pnpm官网

posted @ 2022-05-25 11:14  zcookies  阅读(368)  评论(0编辑  收藏  举报