如何在原生JavaScript文件中使用带module.exports的test.js？

报错原因分析 #

1. 无法在模块外部使用import语句：浏览器默认将未声明type="module"的<script>视为传统脚本，不支持ES模块的import语法。
2. module未定义：module.exports是Node.js的CommonJS模块语法，浏览器环境没有module全局变量，无法识别该语法。

具体解决步骤 #

1. 转换test.js为ES模块格式

将Node.js的CommonJS语法替换为浏览器支持的ES模块导出语法：

// test.js
export default {
  "white": "#fff",
  "black": "#000"
}

2. 修正index.js的import语法并声明为模块

• 确保import路径为带引号的相对路径
• 代码逻辑保持不变：

// index.js
import style from './test.js';
console.log(style.white);

const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
  document.getElementById("show-alert").classList.remove("d-none")
});

3. 更新index.html的脚本引入

将index.js的<script>标签添加type="module"属性，同时可以移除单独引入test.js的标签（因为index.js会自动导入它）：

<!-- 替换原有的两个script标签 -->
<script type="module" src="index.js"></script>

额外说明 #

• ES模块脚本在浏览器中默认以严格模式运行，无需额外声明'use strict'
• 模块导入路径必须使用相对路径（如./test.js）或绝对路径，不能省略前缀
• 若需兼容旧版浏览器，可使用Webpack、Rollup等打包工具将ES模块转换为传统脚本；仅针对现代浏览器时，直接使用ES模块即可满足需求

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