本文详解如何在现代浏览器中正确使用 ES 模块（import/export）替代已废弃的 CommonJS require()，解决因混用 Node.js 语法导致的脚本无输出、报错等问题。
本文详解如何在现代浏览器中正确使用 es 模块（import/export）替代已废弃的 commonjs `require()`，解决因混用 node.js 语法导致的脚本无输出、报错等问题。
在浏览器环境中直接使用 require() 和 exports（即 CommonJS 语法）是不被支持的——这些是 Node.js 运行时特有的模块系统，而原生浏览器只支持 ECMAScript 模块（ESM）。你遇到的“无输出”问题，根本原因在于：import.js 中的 require('../js/exportfile.js') 会抛出 ReferenceError: require is not defined，脚本执行中断，后续 document.writeln 和 DOM 操作全部失效（即使控制台未显式报错，也可能因静默失败而跳过渲染）。
✅ 正确做法：使用 ES 模块语法
1. 修改 export.js —— 使用 export 或 export default
// export.js（注意文件扩展名应为 .js，路径需与 HTML 中一致） export const arr = ["example1", "example2", "example3"]; // 或使用默认导出： // export default ["example1", "example2", "example3"];
2. 修改 import.js —— 使用 import 语句（非 require）
// import.js
import { arr } from './export.js'; // 对应命名导出
// 若 export.js 使用 export default，则写为：
// import arr from './export.js';
// 安全遍历（修正原代码中 i 超出数组长度的问题）
for (let i = 0; i < arr.length; i++) {
document.writeln((i + 1) + ": " + arr[i]);
}
// 同时更新 DOM 元素（注意：document.writeln 会覆盖整个页面，慎用）
document.getElementById("jj").textContent = arr.map((item, idx) =>
`${idx + 1}: ${item}`
).join('<br>');3. 关键：HTML 中启用模块模式
必须将 <script> 标签声明为 type="module"，否则浏览器仍按传统脚本解析，import 语法会报错：
<div id="jj"></div> <script type="module" src="/js/import.js"></script>
⚠️ 注意事项：
- 路径必须是相对或绝对 URL（如 './export.js'），不能是 ../js/exportfile.js 这类错误路径（你原代码中文件名是 export.js，但 require 写的是 exportfile.js，路径与文件名需严格一致）；
- 模块脚本自动启用严格模式，且具有顶层 await 和词法作用域隔离，变量不会污染全局；
- document.writeln() 在页面加载完成后调用会清空整个文档，生产环境推荐改用 element.innerHTML 或 textContent + appendChild；
- 模块脚本默认延迟执行（defer-like），无需手动处理 DOM 加载时机，但确保 <script type="module"> 在目标 DOM 元素（如 <div id="jj">）之后或使用 DOMContentLoaded。
✅ 补充：兼容性与构建建议
- 所有现代浏览器（Chrome 61+、Firefox 60+、Edge 16+、Safari 10.1+）均支持原生 ESM；
- 如需支持旧版浏览器，应使用打包工具（如 Vite、Webpack、esbuild）将模块转译并打包为兼容格式；
- 不要尝试通过 <script src="..."></script> 加载 .mjs 文件（部分服务器可能不识别 MIME 类型），统一使用 .js + type="module" 即可。
遵循以上规范，你的数组即可成功导出、导入并渲染到页面——告别 require is not defined，拥抱标准、可维护的前端模块化实践。
立即学习“Java免费学习笔记（深入）”；
