使用Browserify打包含require('fs-extra')的代码后，加载bundle.js抛出Uncaught TypeError错误求助

我之前也碰到过完全一样的问题，咱们先拆解下这个错误的核心原因：

为什么会出现这个错误？ #

fs-extra是专门为Node.js环境打造的文件系统增强库，它深度依赖Node.js原生的fs模块，以及一些只有Node环境才有的底层API。而浏览器环境根本没有这些文件系统相关的原生接口，当Browserify把依赖fs-extra的代码打包后，在浏览器里运行时，缺失的模块会导致内部的原型链初始化失败，最终抛出Object prototype may only be an Object or null: undefined这个错误。从你给出的错误栈也能看出来，问题出在clone.js和copy这些fs-extra的核心功能模块上，完全符合这个逻辑。

几个可行的解决办法，你可以根据自己的场景选： #

1. 换用浏览器兼容的文件操作方案

如果你的需求是在浏览器里处理文件（比如读取用户上传的文件），完全没必要用fs-extra：

• 直接用浏览器原生的FileReader API就能处理用户上传的本地文件
• 要是习惯Node.js风格的fs语法，可以试试browser-fs-access这个轻量库，它封装了浏览器的文件系统访问API，用法和Node的fs很像，完美适配浏览器环境

2. 用条件编译区分Node和浏览器环境

如果你的代码需要同时跑在Node和浏览器两端，可以给代码加个环境判断，打包时自动剔除浏览器不需要的Node代码：

// 你的业务代码里加判断
if (typeof window !== 'undefined') {
  // 浏览器环境的逻辑，比如用File API处理文件
} else {
  // 只有Node环境才加载fs-extra
  const fs = require('fs-extra');
  // 这里写Node端的文件操作逻辑
}

然后打包的时候用envify工具优化这类条件判断，确保浏览器端的bundle里不会包含Node相关的代码：

browserify your-entry-file.js -t [ envify --NODE_ENV production ] -o bundle.js

3. 给fs模块加个Mock实现

如果是项目里的某个依赖间接用到了fs-extra，没法直接替换，可以用browserify-fs给浏览器环境提供一个模拟的fs实现：
先安装依赖：

npm install browserify-fs --save-dev

然后打包的时候通过--require参数把原生fs替换成mock版本：

browserify your-entry-file.js --require fs:browserify-fs -o bundle.js

这样Browserify会把所有对fs的引用都替换成browserify-fs的模拟实现，就能避免因为缺失原生fs模块导致的原型链错误了。

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