如何将带Express.JS本地后端的React.JS项目转为可执行应用？

方案一：用pkg打包Node.js后端，内嵌React静态文件 #

这是对项目结构改动最小的方案：

1. 先编译React项目：在React项目目录执行 npm run build，生成build静态文件夹。
2. 将build文件夹复制到Express项目的静态资源目录（比如Express默认的public文件夹，或者直接修改Express代码里的静态文件路由，指向这个build文件夹）。
3. 全局安装pkg工具：npm install -g pkg。
4. 在Express项目根目录执行打包命令，按需指定目标平台：

   pkg . --targets node18-win-x64,node18-macos-x64,node18-linux-x64
   

5. 打包完成后会生成对应平台的可执行文件，运行它即可启动Express后端，直接在浏览器访问本地端口（比如localhost:3000）使用完整应用。

方案二：使用NW.js（node-webkit） #

NW.js支持直接在桌面环境运行Node.js+网页混合应用，无需大幅重构目录：

1. 确保项目根目录的package.json中，添加main字段指向Express入口文件（比如"main": "server.js"），还可配置窗口参数：

   "window": {
     "title": "我的应用",
     "width": 800,
     "height": 600,
     "url": "http://localhost:3000"
   }
   

2. 下载对应平台的NW.js预编译包，把项目所有文件放到NW.js目录下，运行NW.js的可执行文件就能自动启动Express后端并打开应用窗口。
3. 若要打包成单文件，可使用nw-builder工具，安装后执行nwbuild . -p win64,osx64,linux64生成最终打包产物。

方案三：使用Tauri（轻量跨平台方案） #

Tauri基于Rust，打包后体积远小于Electron，适合追求轻量化的场景：

1. 初始化Tauri项目：npx create-tauri-app，选择模板后进入项目目录。
2. 将React项目build文件夹的内容，复制到Tauri项目的src-tauri/static目录下。
3. 在src-tauri/src/main.rs中添加启动Express后端的逻辑（通过Rust子进程启动Node.js服务），示例代码：

   use std::process::Command;
   
   fn main() {
       // 启动Express后端，路径需根据实际项目结构调整
       Command::new("node")
           .arg("../../server.js")
           .spawn()
           .expect("Failed to start server");
   
       tauri::Builder::default()
           .run(tauri::generate_context!())
           .expect("error while running tauri application");
   }
   

4. 执行npm run tauri build，生成对应平台的可执行文件，运行时会自动启动后端并加载React页面。

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