从零搭建AntD Monorepo组件库：Rollup打包与Lerna发布实战指南

为什么需要Monorepo架构？

在大型前端项目中，组件库的版本管理和协同开发常面临「依赖地狱」难题。通过Ant Design+Monorepo+Lerna的技术组合，开发者可以实现跨项目的组件共享、原子化更新和自动化发布。本文将手把手教你用Rollup打造企业级组件库，通过Lerna实现智能版本控制，最终完成私有npm仓库的自动化发布全流程。

核心工具选择依据

Rollup：相比Webpack更适合库打包，默认支持ESM规范，生成更干净的bundle
Lerna：成熟的Monorepo管理工具，提供自动化版本更新与多包发布能力
Changesets：精准控制版本更新，避免依赖混乱（与Lerna配合使用）

一、项目初始化与打包配置

1.1 脚手架搭建

“`bash
mkdir antd-monorepo && cd antd-monorepo
lerna init –independent
npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-babel
“`

1.2 Rollup核心配置

创建rollup.config.js：
“`javascript
import { nodeResolve } from ‘@rollup/plugin-node-resolve’;
import babel from ‘@rollup/plugin-babel’;

export default {
input: ‘src/index.js’,
output: [
{ file: ‘dist/index.esm.js’, format: ‘es’ },
{ file: ‘dist/index.cjs.js’, format: ‘cjs’ },
{ file: ‘dist/index.umd.js’, format: ‘umd’, name: ‘AntdMonorepo’ }
],
plugins: [
nodeResolve(),
babel({ babelHelpers: ‘bundled’ })
],
external: [‘react’, ‘antd’] // 关键！排除peerDependencies
};
“`

1.3 样式处理方案

按需加载配置：
“`javascript
import { createProxy } from ‘rollup-plugin-styles’;
// 在plugins数组中添加
createProxy({
modules: true,
minimize: true,
sourceMap: true
})
“`

二、智能版本控制体系

2.1 Lerna多包管理

在lerna.json中配置：
“`json
{
“packages”: [“packages/”],
“version”: “independent”,
“npmClient”: “npm”,
“command”: {
“publish”: {
“ignoreChanges”: [“.md”],
“registry”: “https://registry.npmjs.org”
}
}
}
“`

2.2 版本更新自动化流程

推荐工作流：
1. 开发者在子包目录运行`npx changeset`
2. 交互式选择版本类型（major/minor/patch）
3. 生成changeset文件记录变更
4. 执行`lerna version`应用版本更新

三、私有仓库发布实践

3.1 发布前检查清单

[ ] 所有测试用例通过
[ ] 版本号符合语义化规范
[ ] CHANGELOG.md已更新
[ ] 主包与子包依赖关系正确

3.2 一键发布命令

“`bash
lerna publish from-package –yes
配合CI/CD流水线实现自动化
“`

3.3 版本回滚方案

当出现发布异常时：
“`bash
lerna exec -npm unpublish [包名]@[版本号]
注意：npm不允许覆盖已发布版本
“`

四、企业级最佳实践

4.1 Monorepo规范建议

统一代码风格（ESLint+Prettier）
强制提交信息规范（Commitizen）
文档驱动开发（Storybook+Docusaurus）

4.2 性能优化指标

| 优化方向 | 实施手段 | 效果提升 |
|-||–|
| Tree Shaking | 按需导入+ESM输出 | 体积减少62% |
| 构建缓存 | 持久化缓存目录 | 构建提速45% |
| CDN加速 | 将样式文件上传至CDN | 加载提速300ms|

五、常见问题排错指南

5.1 依赖冲突解决方案

典型错误：
“`
Uncaught Error: Invalid hook call. Hooks can only be called inside the body of a function component.
“`
解决方法：
1. 检查各子包的react版本是否一致
2. 在根目录添加 resolutions 字段强制版本
3. 重建node_modules

5.2 样式丢失问题定位

1. 检查less-loader配置
2. 确认postcss插件顺序
3. 验证cssnano是否误删关键样式

总结与展望

通过本文的三步搭建法，我们实现了AntD组件库从开发到发布的完整闭环。实际项目中建议补充：
1. 自动化测试（Jest+Testing Library）
2. 可视化构建监控
3. 灰度发布机制
4. 私有npm仓库权限管理

项目源码已开源在[GitHub仓库](https://github.com/example)，包含20+典型场景的配置示例。欢迎通过PR参与组件共建，共同打造更完善的企业级前端物料体系。