React项目中如何调用src目录外的脚本并实现服务端运行？

你当前的写法是把calculations函数打包到前端代码中在浏览器环境执行，如果该函数依赖仅Node.js环境提供的能力（如文件系统读写、数据库连接、私密密钥调用等），浏览器不支持相关API，自然无法正常运行。要让脚本在服务端运行，确实需要通过HTTP请求（如POST）调用服务端接口，具体实现步骤如下：

第一步：调整项目结构并安装依赖 #

首先将仅服务端运行的逻辑和前端代码隔离，避免被前端打包工具误打包，调整后目录结构参考：

├server/
|   └Script.js // 原根目录的Script.js移到此处
├server.js // 新增Express服务入口文件
├public/
|   └...
└src/
   └ App.js

在项目根目录执行命令安装服务端依赖：
npm install express cors

第二步：编写Express服务端逻辑 #

调整Script.js导出规范 #

Node.js默认使用CommonJS模块规范，如果你之前用的是ES Module的export default，可以改成CommonJS导出：

// server/Script.js
const calculations = () => {
  // 原有的计算逻辑
}

module.exports = calculations;

如果你希望继续用ES Module，可以在项目package.json中添加配置："type": "module"

编写服务入口server.js #

const express = require('express');
const cors = require('cors');
const calculations = require('./server/Script.js');

const app = express();
const SERVICE_PORT = 5000;

// 注册中间件
app.use(cors()); // 解决本地开发时的跨域问题
app.use(express.json()); // 解析POST请求的JSON格式参数

// 注册POST接口
app.post('/api/calculate', (req, res) => {
  try {
    // 若前端需要传递参数给计算函数，可以从req.body中获取
    // const params = req.body;
    const calculateResult = calculations();
    // 返回执行成功的结果
    res.status(200).json({
      code: 200,
      data: calculateResult,
      msg: '执行成功'
    })
  } catch (err) {
    // 捕获执行错误并返回
    res.status(500).json({
      code: 500,
      msg: '执行失败',
      error: err.message
    })
  }
})

// 启动服务
app.listen(SERVICE_PORT, () => {
  console.log(`服务端已启动，运行地址：http://localhost:${SERVICE_PORT}`);
})

第三步：修改前端调用逻辑 #

删掉原有的直接import Script.js的代码，改为发起POST请求调用服务端接口，示例使用原生fetch，也可以替换为axios等请求库：

// App.js中删除 import calculations from './../Script' 这行
...

onClick={async () => {
  try {
    const res = await fetch('http://localhost:5000/api/calculate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // 需要传参的话可以写入body
      body: JSON.stringify({
        // 你的参数
      })
    })
    const result = await res.json();
    if(result.code === 200) {
      console.log('计算结果：', result.data);
      // 此处处理返回的结果即可
    } else {
      console.error('计算出错：', result.msg);
    }
  } catch (err) {
    console.error('请求服务端失败：', err.message);
  }
}}

第四步：启动项目 #

• 开启第一个终端，运行前端项目：npm start
• 开启第二个终端，运行服务端：node server.js

完成以上步骤即可实现前端触发、服务端执行Script.js逻辑的需求。

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