在Firebase托管中使用Firebase和React

Question

我正在開發一個使用“create react app”創建的React應用程序（ https://github.com/facebookincubator/create-react-app ）。 它將托管在Firebase托管中，我想在文檔（ 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庫？

Answer 1

當您使用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));

Answer 2

您將在瀏覽器中直接使用腳本標記提供firebase API。 運行捆綁包時，它已經可以在瀏覽器中使用。

您正在使用create-react-app在幕后使用webpack ，但我認為您可能需要將其彈出，以便您可以告訴它使用externals屬性在您的環境（瀏覽器）上提供此包。

https://webpack.js.org/configuration/externals/

根據我對這個問題的理解，不可能使用create-react-app為webpack添加externals 。

https://github.com/facebook/create-react-app/issues/780

也許最好將<script>標記與firebase一起刪除，然后直接在CRA項目上安裝並導入它。

這可能會有所幫助： https ： //www.codementor.io/yurio/all-you-need-is-react-firebase-4v7g9p4kf

Answer 3

只需嘗試通過npm安裝firebase軟件包。 然后，您可以通過導入輕松地在任何反應組件中的任何位置使用它

import firebase from 'firebase';

您還可以在某些configureFirebase.js文件中導入firebase，您可以在其中使用某些configureFirebase.js初始化firebase應用程序，然后導出已配置的firebase實例並在任何組件中使用此實例

它會有所幫助：

import firebase from 'firebase'
const config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
    apiKey: "unreadablestuff",
    authDomain: "your-domain-name.firebaseapp.com",
    databaseURL: "https://your-domain-name.firebaseio.com",
    storageBucket: "your-domain-name.appspot.com",
    messagingSenderId: "123123123123"
};
const fire = firebase.initializeApp(config);
export default fire;