如何通过Browserify正确导出ES模块，生成可直接调用的UMD文件？

核心问题 #

你遇到的情况是ES模块的默认导出被Browserify转译为CommonJS格式时，会被包裹在default属性中，导致全局变量firebase变成{default: Firebase实例, __esModule: true}，无法直接调用方法。

解决方案 #

方案1：修改入口文件的导出方式 #

直接在ES模块中添加CommonJS风格的导出，让Browserify将Firebase实例作为模块的顶层导出：

import firebase from 'firebase/compat/app';
import 'firebase/compat/database';

// 同时兼容ES模块和CommonJS导出
module.exports = firebase;
export default firebase;

然后使用你原来的打包命令：

npx browserify firebase.js -o js/firebase.js -s firebase -p esmify

打包完成后，全局变量firebase会直接指向Firebase实例，你可以正常调用firebase.initializeApp(config)。

方案2：用Babelify替代Esmify处理模块转换 #

如果不想修改ES模块代码，可以通过Babel配置将默认导出转为CommonJS的顶层导出：

1. 安装依赖：

npm install @babel/core @babel/preset-env babelify babel-plugin-add-module-exports --save-dev

2. 创建.babelrc配置文件：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": "umd"
    }]
  ],
  "plugins": ["add-module-exports"]
}

3. 使用新的打包命令：

npx browserify firebase.js -o js/firebase.js -s firebase -t babelify

原理说明 #

ES模块的export default在转译为CommonJS时，默认会被赋值到exports.default；而Browserify的-s参数会将整个模块的exports对象暴露为全局变量。通过直接设置module.exports = firebase或者使用Babel插件将默认导出绑定到module.exports，就能让全局变量直接指向Firebase实例，而非包含default属性的对象。

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