相关文件

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

核心文件

插件主文件

文件路径	描述	主要功能
`main.js`	插件主入口	初始化插件，注册子插件
`config.js`	配置管理	管理插件配置
`append.js`	文件操作	处理 CSS 文件的追加和清理
`inject.js`	代码注入	注入应用 ID 等信息

核心工具

文件路径	描述	主要功能
`utils/autocss.js`	元子化样式处理	处理元子化样式的收集和生成
`utils/compiler.js`	编译器核心	核心编译逻辑
`utils/buildstart.js`	构建启动处理	处理构建启动逻辑
`utils/ast.js`	AST 处理	处理模板的 AST 解析
`utils/theme.js`	主题配置	处理主题配置和变量生成
`utils/filter.js`	条件编译	处理条件编译逻辑
`utils/viewcode.js`	视图代码处理	处理视图代码的增强
`utils/insertcss.js`	CSS 插入	处理 CSS 的插入逻辑
`utils/extractScriptStyle.js`	脚本样式提取	从脚本中提取样式

模块文件

文件路径	描述	主要功能
`modules/compiler.js`	SFC 编译器	处理单文件组件的编译
`modules/beautify.js`	代码美化	美化生成的代码
`modules/magic.js`	代码转换	处理代码的魔法转换
`modules/dotenv.js`	环境变量	处理环境变量的加载和解析
`modules/babeltypes.js`	Babel 类型	提供 Babel 类型定义
`modules/traverse.js`	代码遍历	遍历和处理代码 AST

平台处理

文件路径	描述	主要功能
`platform/web.css`	Web 平台样式	Web 平台的特殊样式
`utils/platform/weixin.js`	微信小程序处理	微信小程序的特殊处理

组件转换器

文件路径	描述	主要功能
`utils/transformers/t-count-down.js`	倒计时组件转换	处理倒计时组件的编译增强
`utils/transformers/t-page.js`	页面组件转换	处理页面组件的编译增强
`utils/transformers/t-text-light.js`	文本组件转换	处理文本组件的编译增强
`utils/transformers/t-view.js`	视图组件转换	处理视图组件的编译增强

文件结构

uni_modules/tui-vitex/
├── main.js              # 插件主入口
├── config.js            # 配置管理
├── append.js            # 文件操作
├── inject.js            # 代码注入
├── utils/               # 核心工具
│   ├── autocss.js       # 元子化样式处理
│   ├── compiler.js      # 编译器核心
│   ├── buildstart.js    # 构建启动处理
│   ├── ast.js           # AST 处理
│   ├── theme.js         # 主题配置
│   ├── filter.js        # 条件编译
│   ├── viewcode.js      # 视图代码处理
│   ├── insertcss.js     # CSS 插入
│   ├── extractScriptStyle.js # 脚本样式提取
│   ├── transformers/    # 组件转换器
│   └── platform/        # 平台处理
├── modules/             # 核心模块
│   ├── compiler.js      # SFC 编译器
│   ├── beautify.js      # 代码美化
│   ├── magic.js         # 代码转换
│   ├── dotenv.js        # 环境变量
│   ├── babeltypes.js    # Babel 类型
│   └── traverse.js      # 代码遍历
├── platform/            # 平台特定代码
│   └── web.css          # Web 平台样式
└── autocss.css          # 生成的样式文件

核心文件详解

main.js

插件的主入口文件，负责初始化插件和注册子插件：

module.exports = (option = {}) => {
  process.env.UNI_APPID = getAppIdCode();
  const ThemeConfigPath = path.join(__dirname, '../tui-plus-vapor/common/model/theme.uts');
  const configcode = `${ca}\nconst TuiThemeConfig  : UTSJSONObject = ${JSON.stringify(option)}\n${gc}`;
  fs.writeFileSync(ThemeConfigPath, configcode, 'utf8');
  return [
    buildStart(option),
    autocss(option)
  ];
};

utils/autocss.js

处理元子化样式的收集和生成：

module.exports = {
  autocss: (option = {}) => {
    return {
      name: 'autocss',
      async transform(code, id) {
        try {
          if (!id.endsWith('.uvue')) {
            return {
              code,
              map: null,
            };
          }
          const compilerCode = TuiCompiler(code, id, option);
          return {
            code: compilerCode,
            map: null,
          };
        } catch (error) {
          console.error(id + '解析出错:', error);
          return {
            code,
            map: null,
          };
        }
      }
    };
  }
};

utils/compiler.js

核心编译逻辑，处理模板的解析和样式的生成：

function TuiCompiler(code, id, option) {
  const generatedCSSClasses = new Set();
  const plarform = process.env.UNI_UTS_PLATFORM.toUpperCase();
  //处理条件编译
  const compiler = new ConditionalCompiler(plarform);
  const newCode = appendViewCode(compiler.compileVue(code), id);
  // 重新解析
  const { descriptor } = parseSFC(newCode, {
    filename: id,
    sourceMap: false
  });
  if (!descriptor.template) return code;
  const webdev = plarform == 'WEB' && process.env.UNI_NODE_ENV == 'development';
  const newMagicCode = new magic(newCode);
  const a = extractClasses(descriptor.template.ast, newMagicCode);
  const jsa = extractScriptStyle(descriptor.scriptSetup.content, descriptor.scriptSetup.loc.start.offset,
    newMagicCode, id);
  const css_str = styleConcatenation([...a, ...jsa], option, newMagicCode, webdev ? devgeneratedCSSClasses : generatedCSSClasses);

  if (css_str) {
    if (webdev) {
      appendToCssFileSync(css_str);
    } else {
      insertcss(newMagicCode, css_str);
    }
  }
  const prettyHtml = html_beautify(newMagicCode.toString(), {
    indent_size: 4,
    wrap_line_length: 1020,
    brace_style: "collapse,preserve-inline",
  });
  return prettyHtml.replaceAll(' < ', '<').replaceAll(' > ', '>');
}

utils/theme.js

处理主题配置和变量生成：

function createThemeConfig(keyPrefix, attrName, dir = '') {
  const types = ['info', 'primary', 'error', 'warning', 'success'];
  const effects = ['normal', 'dark', 'light', 'plain'];
  const themeVar = 'TuiTheme';

  const config = {};

  // 生成所有组合
  types.forEach(type => {
    effects.forEach(effect => {
      const typeChar = type.charAt(0);
      const effectChar = effect.charAt(0);
      const key = `${keyPrefix}-${typeChar}${effectChar}`;
      config[key] = `\${${themeVar}}-${attrName}${dir}-${type}-${effect}`;
    });
  });

  // 生成默认类型
  types.forEach(type => {
    const typeChar = type.charAt(0);
    const key = `${keyPrefix}-${type}`;
    config[key] = `\${${themeVar}}-${attrName}${dir}-${type}-normal`;
  });

  return config;
}

依赖关系

插件依赖

依赖	版本	用途
`dotenv`	^17.2.3	环境变量处理
`fs`	内置	文件操作
`path`	内置	路径处理

工具依赖

工具	用途	来源
`html_beautify`	代码美化	modules/beautify.js
`parseSFC`	SFC 解析	modules/compiler.js
`ConditionalCompiler`	条件编译	utils/filter.js
`magic`	代码转换	modules/magic.js

开发建议

了解文件结构：熟悉编译器的文件结构，便于定位问题
调试技巧：使用 console.log 或断点调试来排查问题
性能优化：合理使用缓存，避免重复计算
代码规范：遵循 JavaScript 代码规范
文档完善：为自定义功能添加详细文档

常见问题

编译失败

检查模板语法是否正确
确认主题配置是否正确
查看控制台错误信息

样式不生效

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

环境变量未定义

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

总结

tui-vitex 编译器的文件结构清晰，模块化程度高，便于理解和扩展。通过了解这些文件的功能和关系，你可以更好地使用和定制 tui-vitex，为你的项目提供更强大的编译期增强能力。

提示：

对于简单的项目，直接使用默认配置即可
对于复杂项目，可以根据需要自定义编译器行为
定期更新编译器版本，获取最新特性和 bug 修复
参与社区贡献，共同改进编译器功能

相关文件 ​

核心文件 ​

插件主文件 ​

核心工具 ​

模块文件 ​

平台处理 ​

组件转换器 ​

文件结构 ​

核心文件详解 ​

main.js ​

utils/autocss.js ​

utils/compiler.js ​

utils/theme.js ​

依赖关系 ​

插件依赖 ​

工具依赖 ​

开发建议 ​

常见问题 ​

编译失败 ​

样式不生效 ​

环境变量未定义 ​

总结 ​