Tui Plus Vapor

Appearance

相关文件 ​

本节列出了 tui-compiler 编译器的相关文件，帮助你了解其内部结构。

入口文件 ​

文件路径描述
index.js插件主入口，导出 TuiCollector
index.d.ts插件类型声明（TuiCollectorOptions、ThemeConfig 等）
vitex.d.ts编译期类型增强声明

编译核心（modules/） ​

文件路径描述
modules/compiler.jsSFC 编译器核心：模板解析、元子化类名收集、样式生成
modules/magic.js模板魔法转换（组件改写、条件编译标记处理等）
modules/beautify.js生成代码美化
modules/dotenv.jsVite 风格环境变量加载与解析
modules/traverse.jsAST 遍历与处理
modules/babeltypes.jsBabel 类型定义
modules/fonteditor.js图标字体合并 / 编辑

平台与资源 ​

文件路径描述
platform/app-android.cssApp（Android）平台样式补充
platform/mp-weixin.css微信小程序平台样式补充
font/图标字体源文件
locale/国际化配置

插件（plugins/） ​

文件路径描述
plugins/silence-logs.js屏蔽构建期冗余日志

产物与配置 ​

文件路径描述
autocss.css生成的元子化样式产物，由 App.uvue 引入
merged.ttf多字体合并后的图标字体
customfont.json自定义字体配置
_default_theme.json默认主题配置（插件自动创建 theme.json 时使用）
_default_tsconfig.json默认 tsconfig 模板（项目缺少时自动创建）

文件结构 ​

uni_modules/tui-compiler/
├── index.js                # 插件主入口（导出 TuiCollector）
├── index.d.ts              # 类型声明
├── autocss.css             # 生成的元子化样式产物
├── merged.ttf              # 合并后的图标字体
├── customfont.json         # 自定义字体配置
├── _default_theme.json     # 默认主题配置
├── _default_tsconfig.json  # 默认 tsconfig 模板
├── modules/                # 编译核心模块
├── platform/               # 平台特定样式
├── plugins/                # 插件集合
├── font/                   # 图标字体源文件
└── locale/                 # 国际化配置

编译器的源码经过打包压缩，入口逻辑位于 index.js，各子模块位于 modules/、platform/、plugins/ 目录下。

依赖关系 ​

插件依赖 ​

依赖用途
dotenv / dotenv-expand环境变量加载与展开
fs文件读写（主题配置、样式产物、字体合并等）
path路径处理

常见问题 ​

编译失败 ​

  • 检查模板语法是否正确
  • 确认 theme.json 格式是否正确
  • 查看控制台错误信息

样式不生效 ​

  • 检查是否正确引入了 autocss.css
  • 确认样式类名拼写正确
  • 检查主题配置是否正确

环境变量未定义 ​

  • 检查 .env 文件格式是否正确
  • 确认变量名是否以 VITE_ 开头
  • 重新启动开发服务器

总结 ​

tui-compiler 的职责集中在编译期：收集元子化样式、生成主题产物、增强组件与跨端事件行为。了解这些文件的作用与关系，可以更好地排查问题与定制编译行为。

提示：

  • 简单项目直接使用默认配置即可
  • 复杂项目可根据需要自定义编译器行为
  • 定期更新编译器版本，获取最新特性和 bug 修复