Skip to main content

Monorepo-pnpm

目录结构​

.
├── README.md
├── package.json
├── packages
│   ├── pkg1
│   │   ├── package.json
│   │   ├── src
│   │   │   └── index.ts
│   │   └── tsconfig.json
│   └── pkg2
│       ├── package.json
│       ├── src
│       │   └── index.ts
│       └── tsconfig.json
├── apps
│   ├── app_xxxx
│   │   ├── package.json
│   │   ├── src
│   │   │   └── index.ts
│   │   └── tsconfig.json
│   └── app_xxxx
│       ├── package.json
│       ├── src
│       │   └── index.ts
│       └── tsconfig.json
├── pnpm-workspace.yaml
└── tsconfig.root.json
  • package会被其他package依赖，也会被不同app依赖
  • app只能依赖package，但不能被其他任何package或者app依赖

初始化​

pnpm init

# 使用ts来对层级目录进行管理，简化引用关系
pnpm install typescript -D -w
pnpm tsc --init

tsconfig.json​

{
  "compilerOptions": {
   "outDir":"dist", // 输出的目录
   "sourceMap": true, //采用sourcemap 
   "target": "es2016", // 目标语法
   "module": "esnext", // 模块格式
   "moduleResolution": "node", // 模块解析
   "strict": false, // 严格模式
   "resolveJsonModule": true, // 解析json模块
   "esModuleInterop": true,// 允许通过es6语法引入commonjs模块
   "jsx":"preserve",// jsx不转义
   "lib":["esnext","dom"],// 支持的类库esnext及dom
   "baseUrl": ".",// 当前是以该路径进行查找
   "paths":{
    //  "@manage/*":[       // 即以@manage开头的都去该路径下查找，是个数组
    //   "packages/*/src",
    //  ], 
    "@manage/shared/components":["packages/shared/components"],
    "@manage/shared/utils":["packages/shared/utils"],
    "@manage/shared/fetch":["packages/shared/fetch"],
    "@manage/shared/styles":["packages/shared/styles"],
    // 或者用*号处理匹配
    "@manage/shared/*":["packages/shared/*"]
   }
  }
}

pnpm-workspace.yaml​

# 1、创建 pnpm-workspace.yaml
packages: 
  - 'packages/*' # 代表所有项目都放在packages文件夹之下

.npmrc​

# 已有多个项目的情况下添加monorepo模式
shamefully-hoist = true # 安装的依赖会扁平化到同一层级

# 全项目
node-linker=hoisted

依赖安装​

全局​

pnpm install vue -w
pnpm install typescript -w -D

局部

pnpm install vue -w

执行scripts​

# 需要确定web1项目中的package.json中存在scripts.dev:project1
pnpm run -w dev:project1

建立关联​

使用了 pnpm 包管理器来安装一个名为 @manage/shared 的软件包。这个软件包位于当前工作空间（workspace），并且是为名为 @manage/web1 的项目或模块安装的。--filter 选项用于指定只安装 @manage/web1 相关的依赖。

# 指定版本好的安装方式
pnpm install @manage/shared@workspace --filter @manage/web1

# 不指定版本号的安装方式
pnpm install @manage/shared@* --filter @manage/web1