使用pnpm-workspace搭建monorepo项目前端工程已经越来越离不开 monorepo 了，无论是业务代码还

声明

对 monorepo 和 pnpm 不做过多解释仅做 demo 项目的搭建，如有问题欢迎指出

初始化项目

搭建基本框架

$ pnpm init

创建 pnpm-workspace.yaml文件

定义工作空间的根目录，并能够使您从工作空间中包含 / 排除目录。默认情况下，包含所有子目录

# pnpm-workspace.yaml
packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'
  # all packages in subdirs of components/
  - 'components/**'
  # exclude packages that are inside test directories
  - '!**/test/**'

目录结构

├── ...
├── package.json
├── pnpm-workspace.yaml
├── packages // 存放子项目
│   ├── foo
│   │   ├── package.json
│   │   └── ...
│   ├── bar
│   │   ├── package.json
│   │   └── ...

脚本设置

当您在项目中使用 pnpm 时，您不希望被其他人意外运行 npm install 或 yarn。为了防止开发人员使用其他的包管理器，您可以将下面的这个 preinstall 脚本添加到您的 package.json：

{
  "scripts": {
    ...省略
    "preinstall": "npx -y only-allow pnpm"
  }
}

现在，只要有人运行 npm install 或 yarn，就会发生错误并且不会继续安装。

如果您使用 npm v7，请改用 npx -y

安装依赖

使用工作空间搭建的项目，可以将公共依赖安装在根目录下，子项目中存放各自需要的依赖

公共依赖全局安装

  $ pnpm install @types/node -wD

在子项目 package.json文件中声明使用公共依赖

  "peerDependencies": {
    "@types/node": "*",
  }

指定 package 依赖安装

使用 --filter参数，对指定的package进行操作

filter 参数文档

  $ pnpm install echarts -D --filter foo

子项目之间互相引用

foo 的 package.json

{
  ...省略,
  "name": "@foo/utils",
  "main": "index.js",
}

// bar 中
import { add } from '@foo/utils'

bar 的 package.json

  "dependencies": {
    "@foo/utils": "workspace:*"
  }

发布

[pnpm-changesets]!(pnpm.io/zh/using-ch…)

配置

要在 pnpm 工作空间上配置 changesets，将 changesets 作为开发依赖项安装在工作空间的根目录中：

$ pnpm add -Dw @changesets/cli

$ pnpm changeset init

添加新的 changesets

要生成新的 changesets，请在仓库的根目录中执行 pnpm changeset。 .changeset 目录中生成的 markdown 文件需要被提交到到仓库。

发布变更

1. 运行 pnpm changeset version。这将提高先前使用 pnpm changeset （以及它们的任何依赖项）的版本，并更新变更日志文件。
1. 运行 pnpm install。这将更新锁文件并重新构建包。
1. 提交更改。
1. 运行 pnpm publish -r。此命令将发布所有包含被更新版本且尚未出现在包注册源中的包。

使用pnpm-workspace搭建monorepo项目

声明