reactjs – 在Firebase托管中使用Firebase和React

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

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

我需要在我的React组件中的上面脚本中初始化“firebase”对象.我应该如何在多个React组件文件中导入它？
我知道只有当我在开发期间和部署它时使用“firebase serve”服务它时才能使用它,因此在开发过程中我试图添加

<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>

代码到我的index.html文件,如Firebase文档中所述.但是,当我尝试在ReactComponent中导入Firebase时,它找不到它或抱怨没有初始化项目(我在html标签中做了什么)

如何从我的html脚本标记导入Firebase初始化的App和Firebase库？

解决方法

当您使用create-react应用程序并因此使用webpack时,您应该已经在使用nodejs firebase：

npm install --save firebase

要在部署时动态获取配置,您必须访问此URL：

/__/firebase/init.json

因此,在尝试初始化firebase之前,需要进行异步调用以将json对象存储在此位置.所以这里有一些示例代码(使用axios for async call)包含在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;

prod.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));