通过 Webpack 使用 firebase 自动 SDK 设置答案

【问题标题】：Use firebase auto SDK setup with Webpack通过 Webpack 使用 firebase 自动 SDK 设置
【发布时间】：2017-11-13 19:24:52
【问题描述】：

我正在创建一个使用 Vue webpack 和 firebase 的 web 应用程序。当我在 firebase cli 上使用 firebase use <some_alias> 时，我想让我的 firebase 凭据自动更改。在其他项目中，这仅仅意味着包含 firebase 托管的 /__/firebase/init.js 文件。在这个项目中，我使用的是 npm firebase 库，并且可以加载特定的 firebase 凭据集

import firebase from 'firebase'

var config = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
}
firebase.initializeApp(config)

export default {
  database: firebase.database,
  storage: firebase.storage,
  auth: firebase.auth
}

但是，这不会根据我当前的 Firebase 工作区获取我的凭据。相反，我想要类似的东西

import firebase from 'firebase'

const fbcli = require('firebase-tools');

export const getFirebaseInstance = () => {

  return fbcli.setup.web().then(config => {
    firebase.initializeApp(config)

    return firebase
  });
}

虽然是同步的。有什么方法可以同步加载我的 Firebase 凭据？

【问题讨论】：

为什么要同步？
如果这个函数不是同步的，那可能是因为它内部读取了一个文件。
查看源代码后，它也向某些API发出请求，因此同步进行与那里无关。
我希望它是同步的，因为我现有的带有硬编码值的代码已经是同步的。使模块导出成为一个承诺将需要在一个广泛使用它的非常大的代码库中更新每次使用 Firebase。我的第二个代码也多次初始化应用程序，这是不可取的
另外，这个数据变化不是很快。这似乎在项目管道的构建步骤中绝对应该是可能的，因为在构建之前编写一个更新此文件的外部脚本相当容易。但我宁愿不要在我的构建中添加不必要的步骤

标签： firebase npm webpack vue.js firebase-hosting

【解决方案1】：

这个问题通过在 prod 环境中检查 window.location.host 来解决，如果主机是我们的生产主机名，则具有生产配置对象，否则从配置文件的值中读取。

【讨论】：

【解决方案2】：

尝试使用fs.writeFileSync，如a firebase blog post 中关于读取凭据的示例中所述：

const fbcli = require('firebase-tools');
const fs = require('fs');

// by default, uses the current project and logged in user
fbcli.setup.web().then(config => {
  fs.writeFileSync(
    'build/initFirebase.js',
    `firebase.initializeApp(${JSON.stringify(config)});`
  );
});

【讨论】：