Three.js项目添加导入语句后页面白屏如何解决

• require()是Node.js环境专属的CommonJS模块加载语法，浏览器端从设计上就没有内置require全局方法。你的脚本一旦执行到require('fs')这行代码，JS引擎会立刻抛出ReferenceError: require is not defined的运行时错误，直接中断所有后续Three.js初始化逻辑，最终页面因为没有执行渲染逻辑变成白屏。
• 你当前的Express服务只是纯静态资源托管，没有对前端JS做任何语法转换、模块打包处理，浏览器拿到的是完全原生的、带Node专属语法的JS文件，自然无法正常运行。
• 额外的硬限制：fs是Node.js专属的文件系统核心模块，作用是操作服务器本地磁盘文件，它的运行依赖Node的系统调用权限，从根上就不可能在浏览器的沙箱环境里运行——哪怕解决了require的语法兼容问题，也没法在前端脚本里正常调用fs。

按照复杂度从低到高，有三种可落地的实现路径：

• 采用浏览器原生ES Modules模式
  • 修改index.html里的脚本引入方式，给<script>标签加上type="module"属性，让浏览器开启原生模块解析能力
  • 把所有原来的require()导入语句，替换成ES Module标准的import语法
  • 要引入的第三方库直接选择支持ES Module格式的版本加载即可，这种模式不需要额外的打包工具，Express只要正常托管静态文件、正确返回JS文件的MIME类型就能直接运行。
• 引入前端构建工具做语法转换
  • 如果你希望用更接近Node.js的模块化写法、或者需要对项目依赖做打包压缩，可以使用Vite、Webpack这类构建工具
  • 构建工具会自动把你写的CommonJS语法转换为浏览器可识别的原生模块代码，同时把所有依赖整合为单个可直接加载的JS文件，你只需要把构建生成的静态产物交给Express托管即可。
• 引入浏览器端的CommonJS垫片
  • 如果是临时调试需要，可以在HTML里先引入RequireJS、Browserify这类兼容垫片库，给浏览器手动补上require全局方法
  • 这种方案仅适合简单场景，依然无法解决fs这类Node核心模块无法在浏览器运行的问题，不适合复杂项目长期使用。

踩过的常见坑：不少新手会把服务端的Node.js写法直接搬到前端脚本里，比如想在浏览器端用fs读文件，这从权限模型上就走不通——浏览器的安全沙箱会禁止前端脚本直接读取本地/服务器的磁盘文件，这类操作必须全部放在服务端完成。

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