网页引入JavaScript文件时如何导出模块？解决module未定义错误

首先纠正个小笔误：你写的modules.exports应该是module.exports（多了个s），不过这不是浏览器报错的核心原因——Node.js采用的是CommonJS模块规范，而浏览器原生不支持该规范里的module、require等变量，所以直接引入脚本会触发ReferenceError。

下面是几种可行的解决方案：

1. 使用浏览器原生支持的ES模块（推荐） #

现代浏览器已经原生支持ES模块（ESM），只需做两处调整：

• 在HTML的<script>标签中添加type="module"属性
• 在main.js里改用ES模块的导出语法

示例代码 #

HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="main.js"></script>
  </head>
</html>

main.js文件：

// 命名导出
export const myModule = { property: 'value' };

// 或者默认导出
export default { property: 'value' };

若要在其他脚本中导入该模块，同样需要将导入脚本设为type="module"，示例：

<script type="module">
  // 导入命名导出
  import { myModule } from './main.js';
  // 或者导入默认导出
  import myModule from './main.js';
  console.log(myModule.property);
</script>

⚠️ 注意：本地直接以file://协议打开HTML文件可能触发CORS错误，建议用本地服务器（比如npx serve）运行项目。

2. 直接挂载到全局对象（简单场景适用） #

如果不需要严格的模块化隔离，只是要在浏览器中共享代码，可以把导出内容直接挂载到window全局对象：

main.js文件：

window.myModule = { property: 'value' };

之后在页面任意脚本中都能直接访问：

<script>
  console.log(myModule.property);
</script>

3. 使用打包工具（兼容旧浏览器/复杂项目） #

如果项目依赖大量CommonJS模块，或需要兼容旧浏览器，可以用Webpack、Vite、Rollup这类打包工具：

• 无需修改原有的module.exports代码
• 配置打包工具后，它会将所有模块打包为浏览器可识别的文件
• 最后在HTML中引入打包后的文件即可

内容的提问来源于stack exchange，提问作者1.21 gigawatts