如何模块化基于Node.js服务端渲染的EJS应用？

核心问题原因 #

你遇到的错误是因为服务器没有正确识别.js文件的MIME类型，反而以text/html返回，这通常是静态文件未被正确托管，或是路由规则将.js文件请求误转发到了EJS视图渲染逻辑导致的。

具体解决步骤 #

1. 正确托管静态文件 #

在Node.js服务（以Express为例）中，必须明确指定静态文件目录，让服务器识别哪些文件是静态资源（如JS、CSS），直接返回而非渲染视图。

假设项目结构如下：

project/
├── public/
│   └── exportingFile.js
├── views/
│   └── your-view.ejs
└── server.js

在server.js中添加静态文件托管代码：

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

// 托管public目录下的静态文件，访问/exportingFile.js会直接返回对应文件
app.use(express.static('public'));

// EJS引擎配置与路由逻辑
app.set('view engine', 'ejs');
app.get('/your-route', (req, res) => {
  res.render('your-view');
});

app.listen(3000);

2. 修正模块导入路径 #

在EJS视图中使用正确的静态资源路径：

<script type="module">
// 基于静态文件根路径导入，无需相对路径
import { something } from "/exportingFile.js";
// 调用函数
something();
</script>

3. 避免路由规则冲突 #

如果有通配符路由（如app.get('*', ...)），需将静态文件托管代码放在路由规则之前，确保服务器优先处理静态资源请求：

// 先托管静态文件
app.use(express.static('public'));

// 再定义路由（包括通配符路由）
app.get('*', (req, res) => {
  res.render('404');
});

4. 备选方案：服务器端注入函数（无需纯客户端模块） #

若函数无需在纯客户端环境运行，可在服务器端将函数注入EJS视图：

在exportingFile.js中用CommonJS导出：

function something() {
  // 函数逻辑
}

module.exports = { something };

路由渲染时传递函数：

const { something } = require('./exportingFile.js');

app.get('/your-route', (req, res) => {
  res.render('your-view', { something });
});

EJS视图中直接调用：

<script>
// 直接使用服务器传递的函数
<%= something %>();
// 或挂载到全局供后续使用
window.something = <%= something %>;
</script>

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