在script标签通过src引入的JS文件中使用require报错如何解决

require是Node.js环境下CommonJS模块规范独有的导入API，浏览器原生JavaScript运行环境未内置该方法，因此直接在浏览器加载的JS文件中使用require语法会抛出require is not defined错误。
另外需要注意一个浏览器规则：带有src属性的<script>标签，其标签内部编写的内嵌脚本会被浏览器忽略，只会执行src指向的外部JS文件内容，这也是你添加src属性后功能异常的原因之一。

方案1：使用浏览器原生支持的ES模块语法（无需构建工具，适合轻量场景） #

• 第一步：修改HTML中的script标签，添加type="module"属性声明该脚本为ES模块：

<script type="module" src="my/js/file/1.js"></script>

• 第二步：将1.js中的require("my/js/file/2.js")替换为ES模块导入语法，注意路径需补全相对路径与文件后缀：

// 按需调整路径，./ 代表当前JS文件所在目录
import './2.js';

如果2.js有需要暴露给外部的变量/方法，将原CommonJS的导出语法module.exports = xxx替换为ES模块导出语法即可：

// 2.js 示例
// 命名导出
export const util = () => {}
// 默认导出
export default function() {}

方案2：直接按依赖顺序引入所有JS文件（无需模块化，适合极简场景） #

如果不需要模块隔离，可直接在HTML中按依赖顺序引入两个JS文件，无需写任何导入语句：

<!-- 先引入依赖的2.js -->
<script src="my/js/file/2.js"></script>
<!-- 再引入1.js，可直接调用2.js中定义的全局变量/方法 -->
<script src="my/js/file/1.js"></script>

方案3：使用构建工具编译打包（适合复杂项目场景） #

如果需要保留CommonJS的require语法，可使用webpack、Vite等前端构建工具，将两个JS文件打包为浏览器可直接识别的单文件产物，HTML直接引入打包后的文件即可，构建工具会自动处理require依赖的编译与合并。

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