我对如何将Firebase包含到html中感到非常困惑

Question

我最近开始将firebase集成到我的html项目中，我使用npm安装了firebase-tools并初始化了该项目，但是在包含了firebase网站上提到的所有脚本之后，我使用firebase.auth（）登录了用户，然后出现一个错误，指出firebase未定义，因此我将以下脚本标记插入到我的代码中：

  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/firebase/init.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-firestore.js"></script>

在这些下面，我有我的firebase配置：

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "MY_API_KEY",
      authDomain: "MY_PROJECT.firebaseapp.com",
      databaseURL: "https://MY_PROJECT.firebaseio.com",
      projectId: "MY_PROJECT",
      storageBucket: "MY_PROJECT.appspot.com",
      messagingSenderId: "MESSAGER_ID",
      appId: "MY_APP_ID",
      measurementId: "MEASUREMENT_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>
  <script>
    async function signIn(email, password){
      await firebase.auth().signInWithEmailAndPassword({
        email,
        password
      }).then(() => {window.location.href = "HomeScreen.html"}).catch((err) => {
        document.getElementById('FailedSignIn').style.display = "flex";
      })
    }
  </script>

然后我得到了这些错误：

[2020-03-30T17:24:20.332Z] @firebase/app: Warning: Firebase is already defined in the global scope. Please make sure Firebase library is only loaded once.
Website.htmlAccess to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
https:/…base-analytics.js:1POST https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations net::ERR_FAILED
TypeError: Failed to fetch

因此，我非常感谢您对这些脚本标记的顺序进行了一些澄清，以及如何正确初始化firebase并在我的文件中使用它而没有任何错误。

Answer 1

创建帐户和Firebase项目后，您只需按照Setup Docs中的描述，将JavaScript代码添加到HTML中即可。>

    <script src="https://www.gstatic.com/firebasejs/4.0.0/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);

  // Get a reference to the database service
  var database = firebase.database();

  // update the variable when the starCount is changed in the database
  var starCountRef = database.ref('posts/' + postId + '/starCount');
  starCountRef.on('value', function(snapshot) {
    updateStarCount(postElement, snapshot.val());
  });

  // update the UI
  function updateStarCount(el, val) {
    el.innerHtml(`${val} Stars!`);
  }
</script>