Webpack5编译Firebase云函数报无法解析util模块错误如何解决

firebase-functions是专门运行在Node.js服务端（Firebase Cloud Functions运行时）的SDK，本身不支持浏览器环境，也不应该被纳入前端webpack的构建流程。你现在把云函数的后端代码和前端业务代码放在了同一个webpack构建上下文里，webpack5打包前端资源时扫描到这个依赖Node原生模块的后端包，因为不再默认注入Node核心模块polyfill，就抛出了找不到util的错误。

别上来就配webpack polyfill，那是治标不治本的绕路方案，按Firebase官方的项目结构拆分前后端代码就能彻底解决：

• 拆分项目目录
  在项目根目录新建functions文件夹作为云函数的专属代码目录，这个目录是Firebase CLI默认识别的云函数工作目录，有独立的依赖配置，完全不会走前端侧的webpack构建流程。标准目录结构参考：

  项目根目录/
  ├── src/                # 所有前端业务代码存放在这，走webpack打包流程
  ├── functions/          # 云函数专属目录，独立Node运行环境
  │   ├── package.json    # 云函数独立的依赖配置
  │   └── index.js        # 云函数逻辑写在这个文件里
  ├── firebase.json
  └── package.json        # 前端项目依赖配置，不要在这里装firebase-functions
  

• 清理前端侧错误依赖
  在项目根目录执行命令，把之前误装到前端依赖里的firebase-functions移除：

  npm uninstall firebase-functions
  

• 初始化云函数运行环境
  进入functions目录，安装云函数所需的依赖：

  cd functions
  npm init -y
  npm install firebase-functions firebase-admin
  

  把你之前写的用户删除监听逻辑放到functions/index.js中：

  const functions = require('firebase-functions');
  // 如果你要使用ES Module语法，在functions/package.json里添加"type": "module"即可换成import写法
  
  exports.userDeleted = functions.auth.user().onDelete(event => { 
    console.log("user deleted: ", event.uid);
    // 后续可在这里添加删除用户关联数据等业务逻辑
  });
  

• 部署验证
  回到项目根目录，执行云函数部署命令：

  firebase deploy --only functions
  

  部署完成后用户删除事件监听就会正常生效，之前webpack-dev-server抛出的模块找不到错误也会直接消失。

就算你手动给webpack配置了util的polyfill，后续还会连续抛出fs、path、crypto、stream等一系列Node核心模块找不到的错误。而且firebase-functions的核心逻辑依赖Cloud Functions后端的运行时上下文，哪怕凑齐所有polyfill把代码打包到前端，浏览器环境里也没有对应的事件触发机制，代码完全无法正常运行，纯做无用功。

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