如何通过<script>标签修复浏览器中require is not defined报错？

首先明确：require是Node.js CommonJS模块体系的专属函数，浏览器原生根本不认识它，你给它赋值空对象var require = {}自然没用。下面给你几种纯靠<script>标签就能实现的解决思路：

1. 手动模拟极简版require（临时应急用） #

如果你的模块结构简单（没有复杂嵌套依赖），可以自己写一个浏览器端的require模拟函数，通过同步请求加载模块代码并执行：

<script>
window.exports = {};
// 模拟CommonJS的require，仅支持简单的本地模块加载
window.require = function(modulePath) {
  const module = { exports: {} };
  // 同步XHR加载模块文件，注意路径要和实际文件匹配
  const xhr = new XMLHttpRequest();
  // 这里假设模块文件是.js后缀，根据实际情况调整
  xhr.open('GET', `${modulePath}.js`, false);
  xhr.send();
  
  // 把模块代码放在自执行函数里，绑定exports上下文
  (function(exports) {
    eval(xhr.responseText);
  })(module.exports);
  
  return module.exports;
};
</script>
<script src="index.js"></script>

⚠️ 注意：这种方法有不少局限：

• 同步请求会阻塞页面渲染，影响性能
• eval存在安全风险，如果模块代码不可信绝对不能用
• 处理不了嵌套依赖（比如api.js里又用了require）
• 本地开发要开服务器，不然会有跨域问题

2. 把模块改成UMD格式（推荐长期方案） #

如果能修改你的index.js和api.js，把它们改成**UMD（通用模块定义）**格式，就能同时兼容Node.js和浏览器环境，完全不需要依赖require：

先改api.js： #

(function(root, factory) {
  // AMD环境
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } 
  // CommonJS环境（Node.js）
  else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } 
  // 浏览器全局环境
  else {
    root.api = factory();
  }
}(typeof self !== 'undefined' ? self : this, function() {
  // 这里放原来api.js的代码
  return {
    // 比如原来的导出内容：getUser: function() {}
  };
}));

再改index.js里的__exportStar调用： #

// 替换原来的__exportStar(require("./api"), exports);
const api = window.api;
// 手动实现__exportStar的逻辑：把api的导出全部挂载到exports上
for (const key in api) {
  if (key !== 'default' && !exports.hasOwnProperty(key)) {
    exports[key] = api[key];
  }
}

然后在页面里只需要按顺序加载脚本就行：

<script>var exports = {};</script>
<script src="api.js"></script>
<script src="index.js"></script>

3. 用浏览器端模块加载器（适合复杂项目） #

如果你的模块依赖多，可以用专门的浏览器模块加载器（比如RequireJS），通过<script>引入后就能支持类似Node.js的模块加载：

<!-- 本地引入RequireJS，别用外链的话就把文件下载到本地 -->
<script src="require.min.js"></script>
<script>
// 配置模块路径
require.config({
  baseUrl: './', // 模块文件的根目录
  paths: {
    'api': './api' // 映射api模块的路径
  }
});

// 加载index模块
require(['index'], function() {
  // 模块加载完成后的逻辑
});
</script>

然后把api.js改成AMD格式：

define(function() {
  // 原来的api.js代码
  return {
    // 导出内容
  };
});

index.js改成：

define(['api'], function(api) {
  const exports = {};
  for (const key in api) {
    if (key !== 'default' && !exports.hasOwnProperty(key)) {
      exports[key] = api[key];
    }
  }
  // 可以把exports挂载到全局供其他脚本使用
  window.indexExports = exports;
  return exports;
});

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