如何在原生JS中借助Babel执行JSX文件并获取组件对象

1. 绕过eval，通过临时文件加载转换后的代码 #

Babel转换后的CommonJS格式代码可直接被Node.js的require加载，我们可以把转换结果写入临时文件，再通过require导入，让Node自动处理模块相对路径，完全替代eval。

示例代码：

const babel = require('@babel/core');
const fs = require('fs');
const path = require('path');
// 定义临时文件路径，可根据项目结构调整
const tmpFilePath = path.join(__dirname, './tmp-component.js');

babel.transformFileAsync('./src/Page.jsx', {
  plugins: [
    '@babel/plugin-transform-react-jsx',
    '@babel/plugin-transform-modules-commonjs',
    // 忽略CSS导入，避免Node环境加载报错
    ['babel-plugin-transform-require-ignore', { extensions: ['.css'] }]
  ]
})
.then((parsed) => {
  // 将转换后的代码写入临时文件
  fs.writeFileSync(tmpFilePath, parsed.code);
  // 加载组件模块
  const PageComponent = require(tmpFilePath).default; // 组件用export default导出时需取default
  // 创建组件实例
  const page = React.createElement(PageComponent, { classes: db.classes });
  
  // 可选：用完临时文件后删除
  fs.unlinkSync(tmpFilePath);
})
.catch(err => console.error('处理失败:', err));

2. 解决CSS导入路径问题 #

Node.js无法直接解析CSS文件，因此需要在Babel转换阶段忽略这类导入语句。上述代码中使用的babel-plugin-transform-require-ignore插件，可指定忽略.css后缀的导入，彻底避免路径错误和加载失败。

如果项目中有其他静态资源（如图片、字体），可扩展插件配置：

['babel-plugin-transform-require-ignore', { extensions: ['.css', '.png', '.svg', '.woff2'] }]

3. 依赖安装与注意事项 #

• 先安装所需依赖：

  npm install @babel/core @babel/plugin-transform-react-jsx @babel/plugin-transform-modules-commonjs babel-plugin-transform-require-ignore
  

• 若组件是具名导出（而非export default），加载时直接取对应的导出名称即可，无需.default；
• 临时文件路径尽量选择项目内的临时目录，避免与现有文件冲突。

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