如何使用zeit pkg将Express+React项目打包为单个二进制文件？

这个需求我之前刚好实操过，核心思路是让Express服务端托管React的静态构建文件，而不是同时启动两个独立服务——毕竟pkg是打包Node.js应用的，没法直接打包前端的开发服务器。下面是具体步骤：

1. 先把React客户端构建成静态文件 #

原来的npm run start client是启动开发服务器，打包成二进制后没法用这个模式。先进入client目录，执行构建命令：

cd client
npm install
npm run build

执行完后，client目录下会生成build文件夹，里面就是React的静态HTML/CSS/JS文件。

2. 修改Express服务端代码，托管静态文件 #

更新你的server.js，加入静态文件托管和单页路由 fallback 的逻辑，确保服务端既能处理API请求，也能返回React页面：

const express = require('express');
const path = require('path');
const app = express();

// 托管React构建后的静态资源，pkg打包后路径依然有效
const clientBuildDir = path.join(__dirname, 'client', 'build');
app.use(express.static(clientBuildDir));

// 处理React单页应用的路由：所有非API请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(clientBuildDir, 'index.html'));
});

// 你的API路由放在上面之后（避免被fallback拦截）
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Express server!' });
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
  console.log('Client is available at the same URL!');
});

测试一下：启动node server.js，访问http://localhost:3001应该能看到React页面，API也能正常调用。

3. 配置pkg的打包规则 #

在项目根目录的package.json里添加pkg字段，告诉它要打包哪些文件：

{
  "name": "your-app-name",
  "version": "1.0.0",
  "main": "server.js", // 必须指定入口文件
  "scripts": {
    "build-client": "cd client && npm install && npm run build",
    "pkg-build": "npm run build-client && pkg ." // 一键构建+打包
  },
  "pkg": {
    "assets": [
      "client/build/**/*" // 把React的静态资源全部打包进去
    ],
    "targets": [
      "node18-win-x64", // 根据你的需求选目标平台
      "node18-linux-x64",
      "node18-macos-x64"
    ]
  }
}

• assets：指定要包含的静态资源，**/*表示递归包含build下所有文件
• targets：指定打包的Node.js版本和操作系统，按需调整

4. 执行打包命令 #

先全局安装pkg（如果没装过）：

npm install -g pkg

然后执行一键打包：

npm run pkg-build

打包完成后，项目根目录会生成对应平台的二进制文件，比如Windows下是your-app-name.exe，Linux/macOS下是可执行文件。

5. 测试二进制文件 #

直接运行生成的二进制文件：

# Windows
.\your-app-name.exe

# Linux/macOS
./your-app-name

访问http://localhost:3001，就能同时使用React客户端和Express服务端，效果和原来的npm run myapp完全一致！

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