Firebase 未捕获参考错误：未定义 Firebase答案

【问题标题】：Firebase uncaught referenceError: firebase not definedFirebase 未捕获参考错误：未定义 Firebase
【发布时间】：2017-01-02 00:40:52
【问题描述】：

我无法在 OnsenUI/monaca 应用程序中连接我的 firebase 数据库。我查看了与此问题有关的其他线程，并确保我的调用已针对 firebase 3.x.x 进行了更新。但是，每次我尝试在开发中启动应用程序时，我都会收到相同的 firebase 未定义错误。我对这一切都很陌生，任何帮助将不胜感激

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
  <script>
  //creates reference to firebase
  var ref = new Firebase('https://monaca-cli-trial.firebaseio.com/');

  // Initialize Firebase
  var config = {
    apiKey: "whateverapinumber",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
    storageBucket: "",
  };
  firebase.initializeApp(config);

  var rootRef = firebase.database().ref();

  </script>
  <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/javascriptstuff.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

我得到的错误指向第 19 行，即firebase.initializeApp(config);

【问题讨论】：

标签： javascript firebase firebase-realtime-database firebase-storage

【解决方案1】：

我在代码中详细发布了您有错误的地方。此外，我建议在频道 firebase 上观看视频。 https://youtu.be/k1D0_wFlXgo

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  
  <!-- 1. Duplicates. Outdated version-->
  <!--<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>-->


  <!-- 2. Install the new version-->
  <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
  
  <script>  
  //  3. Remove it is not necessary.  Are registered in the databaseURL .
  //   var ref = new Firebase('https://monaca-cli-trial.firebaseio.com/');

 
  var config = {
   /* 5. Install apiKey*/ apiKey: "whateverapinumber",
    /* 6 Replace authDomain: "myapp.firebaseapp.com" on authDomain: "monaca-cli-trial.firebaseapp.com" */ authDomain: "monaca-cli-trial.firebaseapp.com",
    /* 7 Replace databaseURL: "https://myapp.firebaseio.com" on databaseURL: "https://monaca-cli-trial.firebaseio.com/" */ databaseURL: "https://monaca-cli-trial.firebaseio.com/", 
    storageBucket: "",
  };
  firebase.initializeApp(config);

  var rootRef = firebase.database().ref();

  </script>

  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/javascriptstuff.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

【讨论】：

那行得通...我唯一需要做的不同是我需要在文件中包含 CDN 链接，否则它将不起作用。感谢您花时间修复我的代码！

【解决方案2】：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <!-- <link rel="stylesheet" href=""> -->
    </head>
    <body>
        <label for="">Username</label><input type="text" name="username" id="username" value="" placeholder="">
        <label for="">First Name</label><input type="text" name="firstname" id="firstname" value="" placeholder="">
        <label for="">last Name</label><input type="text" name="lastname" id="lastname" value="" placeholder="">
        <button id="save">save</button>
        <button id="clear">clear</button>
        <button id="load">load</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.7.2/firebase.js"></script>
    <script>
      // Initialize Firebase
      // var config = {
      //   apiKey: "AIzaSyAq0r--LaHvc6udVUcZqe6V-j-oYI_8ZLs",
      //   authDomain: "firstfirebase-eac5d.firebaseapp.com",
      //   databaseURL: "https://firstfirebase-eac5d.firebaseio.com",
      //   projectId: "firstfirebase-eac5d",
      //   storageBucket: "firstfirebase-eac5d.appspot.com",
      //   messagingSenderId: "820643601987"
      // };
      // firebase.initializeApp(config);


    // service cloud.firestore {
    //   match /databases/{database}/documents {
    //     match /{document==**} {
    //       allow read, write: if false;
    //     }
    //   }
    // }


      // Initialize Firebase
      var config = {
        apiKey: "AIzaSyAgYi4y5oqmD1_lStsLPku3ijtgeivuL0o",
        authDomain: "userfirebase-dc252.firebaseapp.com",
        databaseURL: "https://userfirebase-dc252.firebaseio.com",
        projectId: "userfirebase-dc252",
        storageBucket: "userfirebase-dc252.appspot.com",
        messagingSenderId: "284706019886"
      };
      firebase.initializeApp(config);

     var rootRef = firebase.database().ref();



    $('#save').click(function(){
        rootRef.set({
            username:  $('#username').val(),
            firstname: $('#firstname').val(),
            lastname:  $('#lastname').val()
        });
    });


    </script>

    </body>

   <iframe src="http://site.startupbug.net:6999/canvas/firebase/" style="width:100%;height:500px;"></iframe>
    </html>

【讨论】：

您好，请避免仅使用代码回答。添加一些关于您的解决方案的说明。
对于未定义的firebase，它需要firebasejs库，如上面我添加的代码。