如何使用Babel将HTML字符串转换为纯React.createElement语法代码

前置依赖安装 #

先安装必须的Babel相关包：

npm install @babel/core @babel/preset-react

完整实现代码 #

const { transformSync } = require('@babel/core');

// 你的输入HTML字符串
const htmlStr = `
<div>
    <h1>test</h1>
</div>
`;

// 构造待转换的JSX代码片段
const codeToTransform = `<>${htmlStr}</>`;

// 调用Babel转换
const result = transformSync(codeToTransform, {
  presets: [
    ['@babel/preset-react', {
      // 配置runtime为classic才会输出React.createElement语法
      runtime: 'classic',
      // 保留纯净注释，和期望的输出格式一致
      pure: true
    }]
  ]
});

// 打印转换结果
console.log(result.code);

输出结果 #

运行上述代码后得到的输出完全匹配需求：

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "test"));

关键配置说明 #

• runtime: 'classic'：指定React JSX转换使用经典模式，不会自动引入新的jsx runtime函数，直接输出React.createElement调用
• pure: true：开启后会自动给生成的React元素添加/*#__PURE__*/注释，方便打包工具做tree shaking

注意事项 #

• 如果HTML字符串中包含单引号、反引号等特殊字符，需要提前做转义处理，避免构造的codeToTransform出现语法错误
• 若需要处理带props、自定义组件的JSX内容，可以直接修改codeToTransform的构造逻辑，把对应内容传入即可
• 如需异步转换可以替换transformSync为transform方法，该方法返回Promise获取转换结果

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