使用Browserify打包前端代码触发Path must be a string错误求助

问题根因 #

你遇到的报错核心原因是 stateLogic.js 依赖了仅能在Node.js环境运行的能力，Browserify仅能完成CommonJS模块规范的转换打包，无法抹平浏览器和Node.js的底层环境差异：

• 报错栈中出现的node-gyp-build是加载Node.js原生C/C++模块的工具，浏览器没有加载本地原生模块的能力，也不存在Node.js特有的__dirname、文件系统路径等全局变量/API，调用path相关方法时传入的路径值为undefined，直接触发类型错误。
• 你当前的用法存在的次要代码问题：
  • read文件中document.getElementById(exhibit)的参数exhibit未加引号，被识别为未定义变量而非id字符串
  • 你将x、y的取值逻辑写在函数外部，脚本加载时就会读取输入框的值，后续用户输入的内容不会被获取到

解决方案 #

• 首先确认stateLogic.js的功能：如果该模块是用于操作本地文件的逻辑，浏览器出于安全沙箱限制，本身就不允许前端JS直接读写本地磁盘文件，你需要把文件操作逻辑迁移到后端Node服务，前端通过接口请求完成对应操作。
• 如果stateLogic.js是纯业务逻辑，仅依赖了Node.js的公共API，你可以为这些API引入浏览器兼容的polyfill：比如path模块可以用path-browserify，在Browserify打包时配置对应模块的替换规则即可。
• 修复现有代码的逻辑问题：将输入框取值逻辑移到window.read、window.write函数内部，补全所有DOM选择器的字符串引号。
• 建议将read、write两个逻辑合并到同一个入口文件打包，避免两个打包文件重复引入相同依赖，增加不必要的体积。

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