使用Turborepo、Pnpm、Changesets实践Monorepo

前言

一般在一些ui组件库中，会使用Monorepo的方式来管理项目，比如antd、element-ui、vant等。这样做的好处是，可以方便的进行组件的复用，以及版本的管理。在pnpm还未流行之前，使用lerna来管理Monorepo项目，但是lerna的性能问题一直被人诟病，所以后来出现了yarn、pnpm、Turborepo等工具来解决这个问题。这里就用Turborepo、Pnpm、Changesets来实践Monorepo项目。

创建项目

使用以下命令创建项目

pnpm dlx create-turbo@latest

执行之后会提示你输入项目名称，然后会自动创建项目。

进入项目目录，执行以下命令，启动项目

pnpm dev

控制台会输出以下信息

从图中可以看出，项目已经创建成功，并且已经启动了两个项目，分别是web和docs。然后浏览器就可以访问了对应的url。

项目结构

// tree -L 3 -I 'node_modules|.git|.next|dist'
.
├── README.md
├── apps
│   ├── docs
│   │   ├── README.md
│   │   ├── app
│   │   ├── eslint.config.js
│   │   ├── next-env.d.ts
│   │   ├── next.config.js
│   │   ├── package.json
│   │   ├── public
│   │   └── tsconfig.json
│   └── web
│       ├── README.md
│       ├── app
│       ├── eslint.config.js
│       ├── next-env.d.ts
│       ├── next.config.js
│       ├── package.json
│       ├── public
│       └── tsconfig.json
├── package.json
├── packages
│   ├── eslint-config
│   │   ├── README.md
│   │   ├── base.js
│   │   ├── next.js
│   │   ├── package.json
│   │   └── react-internal.js
│   ├── typescript-config
│   │   ├── base.json
│   │   ├── nextjs.json
│   │   ├── package.json
│   │   └── react-library.json
│   └── ui
│       ├── eslint.config.mjs
│       ├── package.json
│       ├── src
│       ├── tsconfig.json
│       └── turbo
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── turbo.json

turbo.json配置文件

{
  "$schema": "https://turbo.build/schema.json",
  "ui": "tui",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

tasks 是任务的配置，可以自定义任务，比如build、lint、check-types、dev等。如果执行turbo dev，就会执行dev任务。会把在package.json中配置的dev任务执行。其他同理。

pnpm-workspace.yaml配置文件

packages:
  - 'apps/*'
  - 'packages/*'

这个配置文件是用来指定哪些目录下的包会变成monorepo的包。

安装changesets

pnpm add -Dw @changesets/cli

初始化changesets

pnpm changeset init

当做了修改之后，需要使用以下命令生成changeset

pnpm changeset

然后执行以下命令，生成版本和更新日志

pnpm changeset version

执行之后会生成一个版本号，然后会生成一个changeset文件，然后会自动提交到git仓库。然后执行以下命令，发布版本

pnpm  publish

总结

通过以上步骤，我们就完成了使用Turborepo、Pnpm、Changesets实践Monorepo项目。比较方便的实现了分包和npm包的发布，可以接和father或者ice pkg的npm等打包工具来进行发包流程优化