使用Browserify与Babelify打包JS时遇import/export模块错误求助

核心问题分析 #

1. 文件职责混淆：你把browserify打包脚本和业务代码写在了同一个index.js里，导致browserify解析时先遇到ES模块的import语法，而默认以CommonJS规则处理，直接抛出语法错误。
2. 未转译第三方ES模块：firebase/auth本身是ES模块，默认babelify不会转译node_modules内的文件，导致browserify无法识别其export语法。

分步解决方案 #

1. 拆分打包脚本与业务代码 #

新建build.js作为单独的打包脚本，原index.js改为业务入口文件（建议放到src目录下，方便管理）。

build.js（打包脚本）

const browserify = require('browserify');
const babelify = require('babelify');
const fs = require('fs');

// 指定业务入口文件路径
browserify('./src/index.js')
  .transform(babelify, {
    presets: ['@babel/preset-env'],
    sourceMaps: true,
    global: true,
    // 仅排除非firebase的node_modules目录，确保firebase模块被转译
    ignore: [/\/node_modules\/(?!firebase\/)/]
  })
  .bundle()
  .pipe(fs.createWriteStream('./bundle.js')); // 输出打包后的文件到指定路径

src/index.js（业务代码）

import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "firebase/auth";

// 在这里编写你的业务逻辑，比如初始化Firebase等
// 示例：
// import { initializeApp } from "firebase/app";
// const firebaseConfig = {
//   // 你的Firebase配置
// };
// const app = initializeApp(firebaseConfig);
// const auth = getAuth(app);

2. 修正package.json配置 #

补充缺失的依赖并添加正确的打包脚本：

{
  "name": "project-template",
  "version": "1.0.0",
  "description": "project temp",
  "main": "build.js",
  "scripts": {
    "build": "node build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Pm",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0"
  },
  "dependencies": {
    "firebase": "^10.0.0"
  }
}

3. 安装依赖并执行打包 #

在终端运行以下命令：

# 安装开发依赖
npm install --save-dev browserify
# 安装Firebase生产依赖
npm install firebase
# 执行打包
npm run build

4. 调整index.html的脚本路径 #

确保bundle.js的引入路径与实际输出位置匹配，比如打包文件在项目根目录时：

<script src="/bundle.js"></script>

关键说明 #

你之前尝试的ignore规则里，your module folder需要替换为firebase，这样babelify才会转译Firebase的ES模块代码；拆分文件后，打包脚本用CommonJS语法，业务代码用ES模块语法，各司其职避免语法冲突。

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