HTML的script标签中使用require报错未定义是什么原因？

require() 是Node.js服务端环境独有的模块导入语法，浏览器端的JavaScript运行环境默认没有内置该方法，因此直接在HTML的<script>标签中调用会抛出Uncaught ReferenceError: require is not defined错误。
此外你代码中尝试导入的fs（文件系统模块）同样是Node.js专属的原生模块，依赖操作系统底层的文件读写能力，浏览器出于安全沙箱限制，本身也不支持直接运行这类系统级模块。

根据你的实际使用场景选择对应方案：

• 若你开发的是Node.js服务端代码：不要将这段代码放在HTML的前端脚本中，单独编写.js后缀的脚本文件，通过Node.js环境直接运行即可。
• 若你需要在前端实现文件读写相关能力：
  • 读取用户本地选中的文件：使用浏览器原生File API，通过<input type="file">组件引导用户主动选择文件后再读取内容
  • 存储数据到用户本地：使用localStorage、sessionStorage或者IndexedDB等浏览器原生存储方案实现
• 若你仅需要在前端使用CommonJS风格的require()语法导入第三方前端模块：
  可以使用Webpack、Vite、Browserify等前端打包工具提前处理代码，打包过程中工具会将require()语法转换为浏览器可识别的兼容代码。注意该方案依然无法将fs这类Node.js专属原生模块打包到前端运行，涉及系统能力的部分仍然需要替换为浏览器支持的实现。

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