从单仓库部署多Firebase项目，构建前配置API密钥求Webpack示例

你完全找对方向了——Webpack确实是实现这个需求的理想工具！我们可以通过环境变量注入的方式，结合Webpack的插件，在构建时根据Bitbucket Pipelines触发的分支自动切换Firebase配置。作为Webpack新手，别担心，我会给你一步步的具体示例。

核心思路 #

Bitbucket Pipelines会自动为流水线设置BITBUCKET_BRANCH环境变量，我们可以在Webpack配置中读取这个变量，加载对应分支的Firebase配置，再通过Webpack的DefinePlugin把配置注入到Vue项目的全局环境中，这样构建出来的代码就会自动适配目标Firebase项目。

步骤1：创建多环境配置文件 #

首先在项目根目录新建一个env文件夹，专门存放不同环境的配置文件：

• env/.env.inflight（对应inflight分支）：

FIREBASE_API_KEY=your-inflight-firebase-api-key
FIREBASE_AUTH_DOMAIN=your-inflight-project.firebaseapp.com
FIREBASE_PROJECT_ID=your-inflight-project-id

• env/.env.production（对应生产分支，比如master）：

FIREBASE_API_KEY=your-production-firebase-api-key
FIREBASE_AUTH_DOMAIN=your-production-project.firebaseapp.com
FIREBASE_PROJECT_ID=your-production-project-id

注意：一定要把env/目录添加到.gitignore里，绝对不能把包含密钥的配置文件提交到代码仓库！

步骤2：安装必要的Webpack插件 #

我们需要dotenv-webpack来帮我们加载对应环境的.env文件，执行安装命令：

npm install dotenv-webpack --save-dev

步骤3：修改Webpack配置文件 #

打开你的webpack.config.js，添加以下配置逻辑：

const path = require('path');
const Dotenv = require('dotenv-webpack');
const { DefinePlugin } = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 从环境变量中获取当前分支，默认fallback到development
const currentBranch = process.env.BITBUCKET_BRANCH || 'development';
// 根据分支选择对应的.env文件
const targetEnvFile = currentBranch === 'inflight' 
  ? './env/.env.inflight' 
  : './env/.env.production';

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 这里可以添加你的babel、css等其他loader配置
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    // 加载目标环境的配置文件
    new Dotenv({
      path: path.resolve(__dirname, targetEnvFile)
    }),
    // 将配置注入到全局，让Vue组件可以直接访问
    new DefinePlugin({
      'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
      'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
      'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID)
    })
  ]
};

步骤4：在Vue项目中使用配置 #

比如在src/firebase.js中初始化Firebase：

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore'; // 根据你的需求导入Firebase模块

// 直接使用Webpack注入的环境变量
const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID
};

firebase.initializeApp(firebaseConfig);
export default firebase;

之后你就可以在Vue组件中正常导入这个firebase实例使用了。

步骤5：配置Bitbucket Pipelines #

最后在项目根目录创建bitbucket-pipelines.yml，设置不同分支的构建和部署流程：

image: node:16 # 使用Node.js 16镜像，和你的项目环境匹配

pipelines:
  branches:
    inflight:
      - step:
          name: 构建并部署到Inflight Firebase项目
          script:
            - npm install # 安装依赖
            - npm run build # 执行Webpack构建，对应package.json里的build命令
            - npm install -g firebase-tools # 安装Firebase CLI
            - firebase deploy --project your-inflight-project-id --token $FIREBASE_INFLIGHT_TOKEN
    master:
      - step:
          name: 构建并部署到Production Firebase项目
          script:
            - npm install
            - npm run build
            - npm install -g firebase-tools
            - firebase deploy --project your-production-project-id --token $FIREBASE_PROD_TOKEN

注意：你需要在Bitbucket仓库的Settings > Repository variables中添加FIREBASE_INFLIGHT_TOKEN和FIREBASE_PROD_TOKEN，这些令牌可以通过firebase login:ci命令生成，用于无交互部署Firebase项目。

额外小贴士 #

• 如果你的项目使用Webpack 5，配置逻辑基本一致，只是部分插件的导入方式可能略有不同
• 如果你不想用dotenv-webpack，也可以手动读取环境变量（比如直接在Bitbucket Pipelines中设置单个变量），然后通过DefinePlugin注入，不过用.env文件管理多环境配置更清晰
• 测试时可以手动设置BITBUCKET_BRANCH环境变量来验证不同分支的构建结果，比如在本地执行：BITBUCKET_BRANCH=inflight npm run build

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