使用ESBuild打包Express+EJS应用后渲染视图出现500错误的解决求助

问题场景 #

我现在有一个Express+EJS的项目，文件结构如下：

.
├── package.json
├── public
│   ├── fonts
│   │   └── AppleColorEmoji.ttf
│   └── images
│       ├── favicon.ico
│       └── ico.svg
├── src
│   ├── application.js
│   ├── controllers
│   │   ├── event.controller.js
│   │   └── user.controller.js
│   ├── database.js
│   ├── index.js
│   ├── middlewares
│   │   ├── auth.middleware.js
│   │   └── error.middleware.js
│   ├── models
│   │   ├── event.model.js
│   │   ├── token.model.js
│   │   └── user.model.js
│   ├── routers
│   │   ├── index.js
│   │   └── user.router.js
│   ├── services
│   │   ├── auth.service.js
│   │   └── event.service.js
│   └── views
│       ├── pages
│       │   ├── 404.ejs
│       │   ├── events.ejs
│       │   ├── index.ejs
│       │   ├── login.ejs
│       │   └── submit.ejs
│       └── partials
│           ├── footer.ejs
│           ├── head.ejs
│           └── header.ejs
└── yarn.lock

我用ESBuild来打包应用，在package.json里配置的build命令是：

"build": "esbuild src/index.js --platform=node --bundle --minify --outfile=dist/index.js"

打包后dist目录下生成了单个index.js文件，程序能启动，但只要操作到需要渲染EJS视图的部分，就会抛出500 HTTP状态码，有没有大佬知道怎么解决这个问题？

问题原因分析 #

出现这个问题的核心原因是：ESBuild只负责打包JavaScript文件，不会自动复制EJS视图、静态资源这类非JS文件到dist目录。当你运行dist/index.js时，Express会按照原来的路径去寻找views文件夹和public静态资源，但这些文件根本不在dist目录下，自然找不到，从而触发500错误。

解决方案 #

1. 把非JS资源复制到dist目录

你需要在打包命令后添加复制操作，把src/views和public里的内容同步到dist目录。跨平台的话推荐用copyfiles这类npm包来实现，先安装依赖：

# 用yarn安装
yarn add -D copyfiles
# 或者npm
npm install --save-dev copyfiles

然后修改package.json里的build命令，先执行ESBuild打包，再复制资源：

"build": "esbuild src/index.js --platform=node --bundle --minify --outfile=dist/index.js && copyfiles -u 1 src/views/**/* dist/ && copyfiles -u 1 public/**/* dist/public/"

这里-u 1的作用是去掉源路径的第一层目录，比如把src/views/pages/index.ejs复制成dist/views/pages/index.ejs，而不是dist/src/views/pages/index.ejs。

2. 调整Express里的路径配置

确保你的Express代码里，视图和静态资源的路径是动态适配执行环境的，而不是硬编码死路径。比如：

在你的Express配置文件（比如src/application.js或者src/index.js）里，修改视图路径：

const path = require('path');

// 动态设置视图路径，适配开发和生产环境
app.set('views', path.join(__dirname, 'views'));

打包后，dist/index.js的__dirname是dist目录，而我们已经把views复制到了dist下，所以这个路径会指向dist/views，是正确的；开发时，src里的index.js的__dirname是src目录，指向src/views，也没问题。

然后调整静态资源的路径：

// 动态设置静态资源目录
app.use(express.static(path.join(__dirname, process.env.NODE_ENV === 'production' ? 'public' : '../public')));

通过NODE_ENV环境变量区分生产和开发环境，确保两种场景下都能正确找到静态资源。

3. 验证打包结果

执行build命令后，检查dist目录下是否有views和public文件夹，里面的文件是否和原目录一致。然后运行node dist/index.js，再测试视图渲染功能，应该就不会出现500错误了。

备注：内容来源于stack exchange，提问作者Egon Stetmann.