Node.js Express项目导出的自行车配置对象前端调用报错如何解决

问题核心原因 #

你遇到的错误本质是浏览器原生不支持Node.js的CommonJS模块化规范：你在mock.js中用的module.exports导出、bike.js中用的require()导入语法，只有Node.js运行环境能识别，运行在浏览器端的前端脚本无法解析这套语法，所以拆分文件引入就会报错，把配置直接写在bike.js里不需要引入就可以正常运行。

解决方法 #

方案1：使用全局变量（最简单，无需改其他逻辑） #

1. 修改mock.js：删除末尾的module.exports = bikeArray;语句，仅保留bikeArray对象的定义代码。
2. 修改bike.js：删除开头的var bikeArray = require('./mock');语句。
3. 在你的index.html中，按先引入mock.js、再引入bike.js的顺序添加脚本引用：

<script src="./mock.js"></script>
<script src="./bike.js"></script>

此时bikeArray会作为全局变量存在，bike.js可以直接读取使用。

方案2：使用浏览器支持的ES模块化规范 #

如果你想要用模块化写法避免全局变量污染，可以改成ES模块语法：

1. 修改mock.js：把末尾的module.exports = bikeArray;替换为export default bikeArray;
2. 修改bike.js：把开头的var bikeArray = require('./mock');替换为import bikeArray from './mock.js';
3. 在index.html中引入bike.js时添加type="module"属性：

<script type="module" src="./bike.js"></script>

注意事项 #

确保mock.js、bike.js、index.html三个文件都放在你项目的client目录下，保证静态资源路径正确。

内容的提问来源于stack exchange，提问作者Michael Brilz