reactjs - 在 Firebase 托管中将 Firebase 与 React 结合使用

Question

我正在开发一个使用“创建 react 应用程序”创建的 react 应用程序( https://github.com/facebookincubator/create-react-app )。它将托管在 Firebase Hosting 中，我希望使用文档 ( https://firebase.google.com/docs/web/setup#sdk_imports_and_implicit_initialization ) 中描述的隐式初始化来部署到多个项目(我有一个开发项目和几个生产项目)

<script src="/__/firebase/init.js"></script>

我需要在我的 React 组件中获取上面脚本中初始化的“firebase”对象。我应该如何将它导入到多个 React 组件文件中？我知道，只有当我在开发期间和部署它时使用“firebaseserve”提供服务时，这才可用，因此在开发期间我尝试添加

<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

按照 Firebase 文档中的描述将代码写入我的 index.html 文件。但是，当我尝试在 ReactComponent 中导入 Firebase 时，它​​找不到它或提示未初始化项目(我在 html 标记中所做的事情)

如何从我的 html 脚本标记导入 Firebase 初始化的应用程序和 Firebase 库？

Answer 1

当您使用 create-react 应用程序和 webpack 时，您应该已经在使用 nodejs firebase:

npm install --save firebase

要在部署时动态获取配置，您必须访问此网址:

/__/firebase/init.json

因此，在尝试初始化 firebase 之前，您需要进行异步调用来获取存储在此位置的 json 对象。所以这里有一些示例代码(使用 axios 进行异步调用)包含在您的 index.js 中:

    import React from "react";
    import ReactDOM from "react-dom";
    import * as firebase from "firebase/app";
    import axios from "axios";

    const getFirebaseConfig = new Promise((resolve, reject) => {
      axios
        .get(`/__/firebase/init.json`)
        .then(res => {
          resolve(res.data);
        })
        .catch(err => reject(err));
    });

    getFirebaseConfig
      .then(result => {
        firebase.initializeApp(result);

        ReactDOM.render(
          <div>XXXXX</div>,
          document.getElementById("root")
        );
      })
      .catch(err => console.log(err));

此外，为了使此过程更加简化(将 dev firebase 配置与 npm start 一起使用，并在部署时动态获取 prod firebase 配置)，您可以执行如下操作:

fbconfig.js:

if (process.env.NODE_ENV === "production") {
  module.exports = require("./prod");
} else {
  module.exports = require("./dev");
}

dev.js:

const firebaseConfig = {
  // your dev firebase configuration
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxxx",
  projectId: "xxxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx"
};

const getFirebaseConfig = new Promise((resolve, reject) => {
  resolve(firebaseConfig);
});

export default getFirebaseConfig;

产品.js:

import axios from "axios";

const getFirebaseConfig = new Promise((resolve, reject) => {
  axios
    .get(`/__/firebase/init.json`)
    .then(res => {
      resolve(res.data);
    })
    .catch(err => reject(err));
});

export default getFirebaseConfig;

最后在index.js中:

import getFirebaseConfig from "./fbconfig";

getFirebaseConfig.then(result => {
  firebase.initializeApp(result);
  ...etc
)}
.catch(err => console.log(err));