reactui组件（reactui组件库）

科技前沿 • 2025-06-13 17:00 • 阅读 30

大家好，我是讯享网，很高兴认识大家。

背景

由于我们经常会用到antd 风格的UI设计，而小程序开发我们更倾向taro实现，但是官方的ant-mobile并没有适配taro。所以我们考虑自己实现一个antd风格并且能适配taro的组件库。

设计目标

技术方案选择

taro 3.5之后通过@tarojs/plugin-html 插件，可以让taro 适配html标签，这样一来我们就可以直接通过常规的前端方案来实现，再通过Taro转换成对应的小程序代码。这样我们就不需要引入@tarojs/components官方组件库，就可以直接开发taro的组件库。

为什么不依赖@tarojs/components

要不要用Vite？

现在vite的热度很高，功能也比较强大，在业务工程方向上用起来体验的确不错，但是在组件库构建上，还是缺失了一些灵活性。一个vite配置中只能有一个rollupOptions配置，这样一来我们就很难同时兼顾多个format的构建配置。如果是只需要打包我们可以搞多个配置来实现，但是考虑到dev模式下，我们需要实时构建，如果多个配置文件就会被阻塞在第一个vite。

Rollup

Vite也是使用rollup进行打包的，综合考虑下来我们直接使用rollup进行打包。

实现代码

rollup插件开发

根据设计目标，我们需要开发3个插件。开发rollup插件，需要了解rollup的构建机制，以及插件开发流程。https://cn.rollupjs.org/plugin-development/

1.独立的scss构建插件

在umd打包的时候，由于我们的样式文件并没有被入库文件引入，如果放在entry配置下，又会生成多余的js文件，所以我们的方案是手动加载scss文件

讯享网

2. 生成组件的style部分满足按需加载要求

要满足bable-import-plugin按需加载的要求，就需要生成对应的文件结构。

讯享网

3.文件夹删除插件

每次构建启动的时候，需要讲之前生成的文件夹先删除

rollup配置如下

讯享网

package.json设置执行脚本

Taro项目中配置

babel.config.js

讯享网

在小程序模式下的效果

github地址： https://github.com/trionesdev/triones-antd-taro/tree/develop/packages/antd-taro-react