如何在ReactJS应用ABTest中运行Node.js侧存储的.js实验文件

首先明确两种适用场景，你的实验.js文件是纯前端可运行逻辑还是依赖Node.js运行时的服务端逻辑，两种场景实现方案完全不同：

场景1：实验.js为纯前端可运行逻辑 #

如果实验代码不需要调用Node专属API（比如fs、child_process等），仅包含通用JS逻辑，可以直接在前端侧加载执行：

• 第一步：把所有实验js文件放到React应用的public/experiments目录下，确保项目构建后可以通过静态路径直接访问
• 第二步：在React组件中实现动态加载逻辑，点击START按钮时，根据选中的实验名动态加载对应文件执行
  示例代码：

const runExperiment = async (expName) => {
  // 动态导入对应实验文件
  const experiment = await import(`/experiments/${expName}.js`);
  // 约定每个实验文件默认导出执行函数，直接调用即可
  experiment.default();
}

注意：该方案存在XSS风险，仅可加载你自己确认可信的实验代码，禁止加载不可信来源的JS文件。

场景2：实验.js依赖Node.js运行环境 #

如果实验需要调用Node专属能力，必须在后端Node服务中运行，React作为前端应用无法直接执行服务端本地的JS文件，需要通过接口调用实现：

• 第一步：在存储实验文件的Node服务中新增触发实验运行的接口，比如POST /api/run-experiment，接收参数为实验名expName
• 第二步：Node接口收到请求后先做合法校验，避免路径遍历漏洞，之后加载对应实验文件执行
  Node端示例代码：

// Node服务接口逻辑
app.post('/api/run-experiment', (req, res) => {
  const { expName } = req.body;
  // 白名单校验，必须做，防止恶意路径访问
  const validExpList = ['exp1', 'exp2', 'exp3'];
  if (!validExpList.includes(expName)) {
    return res.status(400).send('无效的实验名称');
  }
  // 加载并执行实验
  const experiment = require(`./你的实验文件存储目录/${expName}.js`);
  const runResult = experiment();
  res.send({ result: runResult });
})

• 第三步：React端点击START按钮时，调用上述后端接口，传递选中的实验名，拿到运行结果后做后续展示处理即可
  React端示例代码：

const runExperiment = async (expName) => {
  const res = await fetch('/api/run-experiment', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ expName })
  });
  const resultData = await res.json();
  // 后续处理实验运行结果
  console.log('实验运行结果：', resultData.result);
}

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