如何从0到1搭建基于antd的monorepo库——初始化（一）看完这个系列可以收获什么： 1. 如何使用 pnpm w

文章系列

下一章：# 如何从0到1搭建基于antd的monorepo库——子包初始化（二）

作者有话说

目前已经实现了一部分功能，源代码在 github，欢迎大家 Star 和 PR，一些待实现的功能都在 issue 中，感兴趣的同学可以一起加入进来。

看完这个系列可以收获什么：

如何使用 pnpm workspace + lerna 搭建 monorepo 仓库
antd 的单个组件怎么进行文件结构的设计
基于 antd form 实现一个 Json 渲染表单
antd 的打包方式以及如何使用 rollup 实现
如何发布 monorepo 包到 npm

前瞻

组件库技术选型：

pnpm 10
node 20
lerna 8
react 18
antd 5
dumi 2

正片开始

使用 dumi 初始化项目

# 创建项目
mkdir comp-demo
cd comp-demo

# 初始化
npx create-dumi

运行 pnpm dev 检查项目是否初始化成功。

配置检查工具

参考我的项目，或者自己配置，或者使用 dumi 默认配置。

使用 pnpm workspace 改造为 monorepo 仓库

在根目录下新增 pnpm-workspace.yaml 文件。

# 多仓入口
packages:
  - 'packages/*'

# 统一依赖版本（pnpm 9+ 支持）
catalog:
  react: ^18.3.1
  react-dom: ^18.3.1
  antd: ^5.24.5

在项目根目录下新增 packages 文件夹，以及 packages/basic、packages/utils 文件夹。

分别执行 npm init -y 初始化项目。

修改 package.json 中的 name 为 @comp-demo/basic 和 @comp-demo/basic

初始化 lerna

pnpm add lerna -D

在根目录下新增 lerna.json 文件。

{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "version": "independent",
  "npmClient": "pnpm",
  "packages": [
    "packages/*"
  ]
}

修改 ts 配置文件

{
  "compilerOptions": {
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "baseUrl": ".",
    "paths": {
      "@kc-components/*": ["packages/*/src"]
    },
    "esModuleInterop": true,
    "experimentalDecorators": true
  },
  "include": [".dumirc.ts", "packages/**/*.{ts,tsx}"]
}

总结

至此，一个基于 pnpm workspace + lerna 的 monorepo 项目架子已经搭建成功，接下来，我们将会进行子包的初始化。

如果想提前知道更多内容可以直接查看github，欢迎大家 Star 和 PR，如有疑问可以评论或私信。