如何通过Require.js使用Firebase数据库和Firebase存储

Question

我想将Firebase-Database和Firebase-Storage与Require.js一起使用。

我的文件结构设置如下：

../
   js/
      app.js
   lib/
      require.js
   app/
      main.js
      firebase_refs.js

我的app.js配置文件：

requirejs.config({
"baseUrl": "js/lib",
"paths": {

  "app": "../app",
  "firebase_refs": "../app/firebase_refs",
  "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",

  "firebase": "//www.gstatic.com/firebasejs/5.5.6/firebase-app",
  "firebase-auth": "//www.gstatic.com/firebasejs/5.5.6/firebase-auth",
  "firebase-database": "//www.gstatic.com/firebasejs/5.5.6/firebase-database",
  "firebase-storage": "//www.gstatic.com/firebasejs/5.5.6/firebase-storage",

 },

 "shim": {
    "firebase": {
        exports: "firebase"
    },
    "firebase-database": {
        exports: "firebase-database"
    },
    "firebase-storage": {
        exports: "firebase-storage"
    }
}
});

requirejs(["app/main"]);

我的main.js文件（用于初始化Firebase）：

define(['firebase'], function (firebase) {

var FirebaseAppInit = {
    setupFirebase: function(){

        var config = {
            apiKey: "xxx",
            authDomain: "xxx",
            databaseURL: "xxx",
            storageBucket: "xxx",
        };

        firebase.initializeApp(config);
    }
};

return FirebaseAppInit;
});

我的firebase_refs.js文件（用于声明firebase数据库根引用和存储引用）：

requirejs(["app/main"]);

define(['firebase-database', 'firebase-storage'], function(FirebaseDatabase, FirebaseStorage){

var Refs = {
    rootRef: function(){
        return FirebaseDatabase.database().ref();
    },
    storage: function(){
        return FirebaseStorage.storage();
    }
};

return Refs;

});

而且，现在终于在我的index.html文件中：

<script>

    var test_header = document.getElementById("test_header");

    require(['app/main'], function(firebase){

        firebase.setupFirebase();

        require(['app/firebase_refs'], function(FirebaseRefs){

                var dbRef = FirebaseRefs.rootRef().child('some kind of text');
                dbRef.on('value', snap => test_header.innerText = snap.val());
            });

    });

</script>

我遇到的问题

我得到的错误是：

Error: Script error for "@firebase/app", needed by: firebase-database, firebase-storage
https://requirejs.org/docs/errors.html#scripterror

我了解我加载firebase-database和firebase-storage的顺序存在问题，但我看不到哪里。 有什么建议么？

Answer 1

您应该使用另一条路径：

...
"paths": {
  ...
  "@firebase/app": "//www.gstatic.com/firebasejs/5.5.6/firebase-app",
  "@firebase/auth": "//www.gstatic.com/firebasejs/5.5.6/firebase-auth",
  "@firebase/database": "//www.gstatic.com/firebasejs/5.5.6/firebase-database",
  "@firebase/storage": "//www.gstatic.com/firebasejs/5.5.6/firebase-storage",

 },
...

然后在main.js文件中使用它

define(['@firebase/app'], function (firebase) {
    console.log(firebase);
}