浏览器端JavaScript中require与export失效问题排查

核心原因：浏览器不支持Node.js的require()语法 #

浏览器环境默认只支持**ES模块（ES Modules）**的import/export语法，require()是Node.js专属的CommonJS模块规范语法，直接在HTML中运行会触发语法错误（大概率控制台有报错，只是你没留意），导致代码执行中断，所以页面无输出。

具体修复方案 #

方案1：改用浏览器支持的ES模块语法 #

调整代码为标准ES模块格式：

1. export.js（保持导出逻辑，用ES模块标准写法）

// export.js
// 命名导出
export const myArray = ['元素1', '元素2', '元素3'];
// 或者默认导出：export default ['元素1', '元素2', '元素3'];

2. import.js（改用ES模块的import语法）

// import.js
// 对应命名导出的导入写法
import { myArray } from './export.js';
// 对应默认导出的导入写法：import myArray from './export.js';

// 循环渲染到页面的代码示例
const container = document.body;
myArray.forEach(item => {
  const p = document.createElement('p');
  p.textContent = item;
  container.appendChild(p);
});

3. HTML文件（引入脚本必须加type="module"属性）

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

方案2：用打包工具编译代码（适合依赖Node.js模块的场景） #

如果你的项目需要保留CommonJS语法或依赖Node.js模块，可使用Webpack、Vite这类工具将代码打包为浏览器能识别的单文件：

• 初始化项目：npm init -y
• 安装打包工具（以Vite为例）：npm install vite --save-dev
• 配置打包命令后，运行工具生成可直接在浏览器运行的文件

快速排查验证步骤 #

1. 按F12打开浏览器控制台，查看是否有Uncaught ReferenceError: require is not defined这类错误，这是最直接的问题线索
2. 确认文件路径：ES模块的import路径必须带完整后缀（比如./export.js，不能只写./export）
3. 避免跨域问题：直接打开本地HTML文件（file://协议）可能导致模块加载失败，建议用VS Code的Live Server插件这类本地服务器运行页面

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