介绍

tui-compiler 是 tui-plus-vapor 的编译期能力入口，它不只是元子化样式生成工具，也不是一个单纯的样式插件，而是围绕 uni-app x / uni-app x vapor 场景做的一层编译增强。

核心功能：

• 🎨 元子化样式生成：在编译阶段收集并生成原子化 CSS 类
• 🎯 主题配置：支持主题变量和多主题切换
• 🔧 环境变量：支持 Vite 风格的环境变量配置
• ⚡ 组件编译增强：对特定组件进行编译期优化
• 🌐 Web 端 touchmove 兼容：统一各浏览器触摸事件行为，修复拖拽 / 滑动手势差异
• 🚌 小程序事件代理：编译期注入事件总线，e.stopPropagation() 即可动态阻止冒泡，与 App / Web 行为一致
• 🔄 条件编译：支持跨平台条件编译
• 📦 依赖自动注册：辅助处理组件依赖

适用场景：

• 需要高效样式管理的 uni-app x 项目
• 追求开发效率和代码质量的团队
• 需要跨平台兼容的复杂应用
• 对构建性能有要求的大型项目

目录结构：

uni_modules/tui-compiler/
├── index.js                # 插件主入口（导出 TuiCollector）
├── index.d.ts              # 类型声明
├── autocss.css             # 生成的元子化样式产物（由 App.uvue 引入）
├── merged.ttf              # 合并后的图标字体
├── customfont.json         # 自定义字体配置
├── _default_theme.json     # 默认主题配置
├── _default_tsconfig.json  # 默认 tsconfig 模板
├── modules/                # 编译核心模块
│   ├── compiler.js         # SFC 编译器
│   ├── magic.js            # 模板魔法转换
│   ├── beautify.js         # 代码美化
│   ├── dotenv.js           # 环境变量
│   ├── traverse.js         # AST 遍历
│   ├── babeltypes.js       # Babel 类型
│   └── fonteditor.js       # 字体编辑 / 合并
├── platform/               # 平台特定样式
│   ├── app-android.css
│   └── mp-weixin.css
├── plugins/                # 插件集合
│   └── silence-logs.js
├── font/                   # 图标字体源文件
└── locale/                 # 国际化配置

接入方式：

在 vite.config.ts 中通过 Vite 插件形式接入：

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import TuiCollector from './uni_modules/tui-compiler';
import theme from './theme.json'

export default defineConfig({
    devSourcemap: true,
    plugins: [
        TuiCollector({
            unit: 'rpx',
            theme
        }),
        uni()
    ]
});

工作原理

tui-compiler 的工作流程如下：

1. 构建启动：在 Vite 构建开始时初始化配置和清理缓存
2. 代码转换：对 .uvue 文件进行编译处理
3. 样式提取：从模板和脚本中提取元子化样式类
4. 样式生成：根据提取的类名生成对应的 CSS 代码
5. 主题处理：结合 theme.json 处理主题变量
6. 代码增强：对特定组件进行编译期优化
7. 产物输出：将生成的样式输出到目标文件

通过这种编译期增强的方式，tui-compiler 可以在不增加运行时开销的情况下，提供更强大的开发体验和更优质的代码产物。