如何将Node.js服务端代码加载导入到前端script脚本文件中

问题原因与解决方案 #

1. 环境不兼容问题（最常见原因） #

你提到查看的是浏览器控制台的输出，说明你写的脚本文件是运行在前端浏览器环境的：

• require()是Node.js服务端专属的CommonJS模块导入语法，浏览器原生不支持该语法，也不允许直接读取服务端的源码文件，自然不会打印出内容，无报错一般是你未开启控制台的所有错误提示级别，或者前端构建工具静默处理了不支持的语法。

2. 若脚本运行在Node.js环境，则是导入路径错误 #

如果你的脚本本身也是运行在Node.js环境的服务端脚本：

• require("/app")是读取系统根目录下的app文件，不符合常规项目的文件结构，你的express服务代码一般存放在项目根目录的app.js文件中，需要改成相对路径导入：

// 确保脚本和app.js在同一级目录下，否则调整相对路径即可
const userCourses = require("./app");
console.log(userCourses);

3. 前端拿服务端数据的正确方案 #

如果你的需求是在前端脚本获取服务端的userCourses数据，不要直接尝试导入服务端源码，走HTTP接口请求即可：

• 第一步：在express服务中新增返回数据的接口

// 加到app.listen之前即可
app.get('/api/user-courses', (req, res) => {
  res.json(userCourses)
})

• 第二步：前端脚本通过请求获取数据

// 替换掉你原来的require导入代码
fetch('http://localhost:3000/api/user-courses')
  .then(res => res.json())
  .then(userCourses => {
    console.log(userCourses)
  })

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