从0到1搭建Taro组件库

type

status

date

slug

summary

1. 项目结构

2. 项目架构

3. 搭建步骤

3.1 创建项目框架

创建项目

配置 lerna

添加 uniubi-lint，尽早加入语法校验工具，有助于项目编写规范

在 package.json 中增加 scripts 命令

通过 husky 配置 git 提交前校验

3.2 创建组件库核心库

执行 lerna create uniubi-lib-mobile 创建组件库核心库，目录结构如下：

3.2.1 typescript 编译配置

公共打包配置

tsconfig.build.json

tsconfig.rollup.json

各配置项解释详见 https://www.typescriptlang.org/docs/handbook/compiler-options.html

3.2.2 rollup 打包配置

核心点在于开发时不直接引用 styles 下的样式文件，而是通过 rollup-plugin-copy 插件在打包后将样式文件 copy 到构建的产物中，项目在引用该包时可以按需加载样式文件（如需全量加载则加载 index.less）文件即可

3.2.3 热更新

通过 --config 指定 rollup 配置文件，--watch 实现监听

这里存在一个问题，rollup 监听的只是指定入口中所有被引用的文件，但组件样式文件是没有被直接引用的，所以当样式更新后不会实时打包，需要修改组件文件后才能实现更新

3.3 创建 demo 项目

由于 uniubi-lib-mobile 里的组件没有可视化项目，所以需要一个载体帮助开发，同时这个项目也将作为文档的一部分，用于组件各种使用方式的 demo 演示

项目基于 @tarojs/cli 搭建

3.3.1 开发引入组件库

进入 packages/uniubi-lib-mobile 目录执行 yarn link，为项目创建引用软链接

在 packages/uniubi-lib-mobile 目录执行 yarn dev，启动组件库项目

进入 packages/uniubi-lib-mobile-demo 目录执行 yarn link uniubi-lib-mobile，链接组件库

在 packages/uniubi-lib-mobile-demo 目录执行 yarn dev:h5 可在浏览器端查看组件 demo，执行 yarn dev:weapp 可在微信小程序端查看组件 demo

3.3.2 打包引入组件库

3.4 创建文档项目

因为 demo 项目要在 taro 环境下运行，所以很难实现像 dumi 那样代码即文档的效果，参考了多个组件库（taro-ui、vantui、taroify、tard）都没有实现这样的效果，也看了 dumi，官方表示目前没有支持 taro 的计划，所以需要一个独立的项目作为项目文档展示。

项目基于 umijs 搭建

3.4.1 文档预览

使用组件：

react-markdown：将 markdown 格式转换成 dom 节点

rehype-raw：来解析树(和原始节点)，保持位置信息正确

remark-gfm：渲染表格、链接等格式

github-markdown-css：react-markdown 转换后的 dom 节点是不带样式的，这个包用来添加样式，但不包括代码块样式

react-syntax-highlighter：代码块语法高亮

解析本地 markdown 文件，还需要增加 webpack 配置

3.4.2 引入 demo 项目

实现思路，demo 项目编译成 h5，然后通过 iframe 引用，引用路径：

3.4.3 项目打包

先对 uniubi-lib-mobile-demo 进行打包，再对 uniubi-lib-mobile-docs 进行打包，然后将 demo 项目打包后的产物复制到 docs 打包出来的 dist/h5 目录下，这也解释了为什么在 production 模式下引用路径是 /h5

4. 项目开发

安装依赖

项目通过 lerna 进行管理，在项目根目录执行 yarn bootstrap 为所有包安装依赖

项目启动

进入 packages/uniubi-lib-mobile 目录执行 yarn link，为项目创建引用软链接

在 packages/uniubi-lib-mobile 目录执行 yarn dev，启动组件库项目

进入 packages/uniubi-lib-mobile-demo 目录执行 yarn link uniubi-lib-mobile，链接组件库

在 packages/uniubi-lib-mobile-demo 目录执行 yarn dev:h5 可在浏览器端查看组件 demo，执行 yarn dev:weapp 可在微信小程序端查看组件 demo

进入 packages/uniubi-lib-mobile-docs 目录执行 yarn start 启动组件文档项目

启动完成后修改各项目代码即可热更新预览

5. 项目发布

进入项目根目录，执行 lerna publish，根据修改情况确定版本号，版本号需严格遵循 Semantic Versioning 2.0.0 语义化版本规范

6. 项目踩坑

6.1 依赖版本不同，导致 TS 类型检查报错

安装依赖后，yarn.lock 文件中存在多个 @types/react、@types/react-dom 版本，如 18.0.9、17.0.45、16.9.56，导致 TS 类型错误

原因：在引用的其他依赖中，间接地又引用了 @types/react、@types/react-dom，如 react-route、react-route-dom 的 devDependencies 里存在 "@types/react@*": "*"，而这项依赖会在安装时安装最新的 @types/react 版本，即 18.0.9

解决方案：在根目录下的 package.json 中增加配置

6.2 uniubi-lib-mobile-demo 引用组件无法热更新

一开始我以为通过 package.json 引用本地依赖的 uniubi-lib-mobile 包就可以，但发现不行。只有 uniubi-lib-mobile 重新打包，并且 uniubi-lib-mobile-demo 重新安装依赖后才能更新，这种方式严重影响开发效率，肯定行不通。

解决方案：最终采用 yarn link 加 rollup --watch 的方式解决（taro-ui 使用 tsc --watch，并不难生效）