在 React 的世界里”一切都是组件“， 组件可以映射作函数式编程中的函数，React 的组件和函数一样的灵活的特性不仅仅可以用于绘制 UI，还可以用于封装业务状态和逻辑，或者非展示相关的副作用, 再通过组合方式组成复杂的应用. 本文尝试解释用 React 组件的思维来处理常…

1. 背景 之前在重构项目的所涉及到的组件中，Tree组件占据了半壁江山。而该组件的产生，也是由该项目演化未来。虽然该项目后来停止了，但是所累积的设计经验确是延续下来了的。在组件库中，我结合了虚拟列表

为了让读者们沉浸式体验组件库开发，我将会手把手带着读者们搭建起一个组件库的 monorepo 开发环境。

重头戏来了。 宿主环境各不相同，需要将源码进行相关处理后发布至 npm。 本节所有代码可在仓库chapter-3分支中获取。 既然是使用typescript编写的组件库，那么使用者应当享受到类型系统的好处。 这样使用者引入npm 包时，便能得到自动提示，也能够复用相关组件的类型…

总算给自己找了一个相对合理的理由，哈哈。既然有人这么想，跟随一起探索下哈。 Antd 4.X 版本是利用 webpack 基于 ES modules的 treeshaking 实现的按需加载。 根据入口文件，递归查询相关依赖，然后通过各种 loader 和各种 plugin ，…

打包复杂吗? 说也简单如果使用 vite 只需指定 lib 即可完成，说也麻烦一个开源的组件库需要处理诸多细节：多种格式、按需加载、开发体验等等。接下来我们就来看看打包一个开源组件库至少都需要做什么。

本文，我们从零开始，使用 Next.js 和 pnpm 搭建了一个组件库文档，主要使用 Next.js 动态导入功能解决了开发服务缓慢的问题，使用 Next.js 的 SSG 模式来生成静态文档。

这是一篇干货比较多的组件库搭建实战教程，不仅有通用的代码规范、提交规范、文档维护、单元测试、GitHub Action 配置的讲解，还涉及基于 lerna 的多包管理架构...

本文最大不同是每一步都会有详细commit帮助你实现代码，知识涉及`lerna`，`代码构建`及`dumi` 文末有链接