构建时条件转换TSX模板文件的技术方案咨询

两款调研工具适配性判断 #

• Handlebars：能满足需求，但属于功能冗余的重型模板引擎。你只需要简单占位符替换逻辑，引入它会附带大量无用特性，且必须手动关闭HTML转义配置，否则TSX中的尖括号、花括号会被错误转义，额外增加适配成本。
• jscodeshift：完全不适合当前场景。它是基于AST的代码重构工具，适合做语法感知的批量代码修改（比如API升级、逻辑重构），用来做固定位置的片段注入开发成本极高，属于典型的杀鸡用牛刀。

最优实现方案 #

不需要引入任何第三方依赖，写一个简单的文本转换函数即可完全满足需求，能做到零模板标记残留，转换逻辑完全可控。

转换函数实现 #

const fs = require('fs/promises');

/**
 * TSX模板转换
 * @param {string} templatePath 模板文件路径
 * @param {string} outputPath 输出文件路径
 * @param {Record<string, string>} injectMap 待注入代码片段映射
 */
async function transform(templatePath, outputPath, injectMap = {}) {
  let content = await fs.readFile(templatePath, 'utf-8');
  // 替换所有{{key}}格式占位符，无对应注入内容时直接清空
  content = content.replace(/\{\{(\w+)\}\}/g, (_, placeholderKey) => {
    return injectMap[placeholderKey] ?? '';
  });
  // 清理占位符清空后产生的连续多余空行，保留正常代码格式
  content = content.replace(/\n{3,}/g, '\n\n');
  await fs.writeFile(outputPath, content, 'utf-8');
}

调用示例 #

对应你写的安装逻辑，调用方式如下：

const installer = async (useYDependency) => {
  if (useYDependency) {
    await transform(
      './index.template.tsx',
      './index.tsx',
      {
        importSection: `import y from "y";`,
        usageSection: `const data = y.usageOfY();`,
        renderSection: `{data.hello}`
      }
    )
  } else {
    await transform('./index.template.tsx', './index.tsx')
  }
}

注意：你之前写的调用示例中importSecion存在拼写错误，需要和模板里的占位符importSection名称完全一致才能正常替换。

方案优势 #

• 零第三方依赖，不需要额外安装npm包
• 所有模板标记要么被替换为指定代码，要么被完全清空，不会有任何残留
• 转换速度极快，不需要解析TSX AST，大体积模板也能瞬间完成处理
• 不存在语法转义问题，注入的代码片段会原封不动写入目标文件，不会破坏TSX语法

内容的提问来源于stack exchange，提问作者Julius