如何配置vite/rollup将firebase-admin排除在客户端打包产物外

第一步：定位引入源头 #

首先确认firebase-admin被引入客户端的依赖链：

• 安装rollup-plugin-visualizer插件
• 配置到客户端构建的vite插件列表中，构建后生成的分析页面可直接搜索firebase-admin查看完整依赖引入路径，确认是否有非服务端专属文件误导入了依赖。

第二步：强制标记服务端专属文件 #

严格遵循vite-plugin-ssr的命名约定：

• 所有用到firebase-admin的文件，后缀统一改为.server.ts（不仅是.page.server.ts，相关工具函数、配置文件都需要加此后缀）
• vite-plugin-ssr会自动阻止客户端代码导入.server.ts后缀的文件，误导入时会直接抛出编译错误，从源码层面避免服务端依赖流入客户端依赖树。

第三步：vite配置层面兜底 #

修改vite-ssr.config.ts，从构建层面强制把firebase-admin排除在客户端产物外：

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
import ssr from 'vite-plugin-ssr/plugin'

// 自行在src目录下新建一个内容为空的empty.ts文件
const emptyModulePath = '/src/empty.ts'

export default defineConfig({
  plugins: [preact(), ssr()],
  resolve: {
    alias: [
      // 客户端构建时将所有firebase-admin相关导入映射到空模块
      ...(process.env.SSR !== '1' ? [
        {
          find: /^firebase-admin(\/.*)?$/,
          replacement: emptyModulePath
        }
      ] : [])
    ]
  },
  ssr: {
    // 服务端构建时将firebase-admin设为外部依赖，直接从node_modules加载，不打包进服务端产物
    external: ['firebase-admin']
  },
  build: {
    rollupOptions: {
      external(id) {
        // 客户端构建时直接排除所有firebase-admin相关依赖
        if (process.env.SSR !== '1' && id.startsWith('firebase-admin')) {
          return true
        }
        return false
      }
    }
  }
})

若为Windows开发环境，需先安装cross-env包，将构建命令中的SSR=1替换为cross-env SSR=1，保证环境变量能正常识别。

第四步：调整构建命令，明确环境标记 #

修改package.json的构建脚本，添加环境变量区分客户端和服务端构建：

{
  "scripts": {
    "build:client": "vite build --config vite-ssr.config.ts",
    "build:server": "SSR=1 vite build --ssr --config vite-ssr.config.ts",
    "build": "npm run build:client && npm run build:server"
  }
}

验证 #

删除node_modules、锁文件和dist目录后重新安装依赖执行构建，检查dist/client目录下的产物，不会再包含firebase-admin相关代码，对应的运行时报错也会消失。

内容的提问来源于stack exchange，提问作者Máté Homolya