monacaデバッガー、CDN動かない？

monacaとvue.jsでfirebaseの認証機能を使う予定なのですが、
monacaデバッガーではCDN

からJavaScript SDK ライブラリはロードされますか？
現在

monacaの（onsen　UI　V2　Vue　Tabberテンプレート）を使い、

index.html.ejs内でCDN（コンテンツ配信ネットワーク）から Firebase JavaScript SDK ライブラリのロード<script>を以下のように書き

html
1<!DOCTYPE html>
2<html>
3<head>
4  <!-- This file is the template for "www/index.html". Modify it to fit your needs -->
5  <meta charset="utf-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
7  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
8  
9 
10  <!-- The following EJS lines include the necessary CSS and JS
11  from Monaca (cordova.js/ loader.js) in production mode -->
12<% for (var dep in htmlWebpackPlugin.options.externalJS) { %>
13  <script type="text/javascript" src="<%= htmlWebpackPlugin.options.externalJS[dep] %>"></script><% } %>
14
15<% for (var dep in htmlWebpackPlugin.options.externalCSS) { %>
16  <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.externalCSS[dep] %>"><% } %>
17
18
19</head>
20<body>
21<div id="app"></div>
22 <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
23</body>
24</html>
25

firebaseの設定も終えて、

main.jsでfirebaseのconfigの設定を以下のようにして

js
1import ons from 'onsenui';
2import Vue from 'vue';
3import VueOnsen from 'vue-onsenui';
4
5// Onsen UI Styling and Icons
6require('onsenui/css-components-src/src/onsen-css-components.css');
7require('onsenui/css/onsenui.css');
8
9import App from './App.vue';
10import Login from './Login.vue';
11
12
13if (ons.platform.isIPhoneX()) {
14  document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
15  document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
16}
17
18Vue.use(VueOnsen); 
19
20
21  
22  // Your web app's Firebase configuration
23  var onDeviceReady = function() {
24   console.log('::onDeiveReady'); 
25  var firebaseConfig = {
26    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
27    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxx",
28    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
29    projectId: "xxxxxxxxxxxxxxxxxx",
30    storageBucket: "xxxxxxxxxxxxxxxxx",
31    messagingSenderId: "xxxxxxxxxxxxxx",
32    appId: "xxxxxxxxxxxxxxxxxxxx"
33  };
34  // Initialize Firebase
35  firebase.initializeApp(firebaseConfig);
36
37new Vue({
38  el: '#app',
39  template: '<app></app>',
40  components: { App }
41});
42 
43  }
44  document.addEventListener(window.cordova ?"deviceready" : "DOMContentLoaded", onDeviceReady, false);
45

以下のLogin.vueでfirebaseのGoogle認証を以下のように使おうと思ったのですが、monacaデバッガーで
TypeError: Cannot read property 'GoogleAuthProvider' of undefined　や
TypeError: firebase.auth is not a function www/vendors~app.bundle.js:26のエラーが出ます

vue
1<template>
2  <div id="login">
3    <h1>{{ msg }}</h1>
4    <button @click="googleLogin">Googleアカウントでログイン</button>
5  </div>
6</template>
7
8<script>
9
10export default {
11  name: "login",
12  data(){
13    return{
14      msg: "ログイン"
15    };
16  },
17  methods: {
18googleLogin: function(){
19      
20       //var provider = new firebase.auth.GoogleAuthProvider();
21
22        firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
23      }
24
25  }
26
27};
28</script>

firebase自体が読み込めてないのでしょうか？
それで、そもそもmonacaデバッカー自体がライブラリを使えないのではと疑問になり質問させて頂きました。
まだこの環境で開発するとは確定していないので、monacaデバッガーの使いやすさを考えて決めようと思っています。普通にmonacaデバッガーでfirebase周りが動くならコード等が悪いと分かるのでありがたいです。
いちおmonacaのデバッガービルドをして実機で動かしてみたのですが、Googleアカウントでログインボタンは機能しませんでした。
もし、コードが間違っていたり環境構築で足りない所があったら教えていただけると幸いです。

gentaro

2019/07/07 16:14

試したんですか？ https://teratail.com/help/question-tips#questionTips1-2

torao_tanabe

2019/07/07 16:53 編集

monacaの（onsen　UI　V2　Vue　Tabberテンプレート）を使い、index.html.ejs内に <body> <div id="app"></div> <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>を書き、firebaseの設定も終えて、.jsファイルにも var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxxxxx", databaseURL: "xxxxxxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxxxxxxxx" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); の初期化も書き終わり、Login.vueの methods: {　から googleLogin: function(){ var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithRedirect(provider); } と、firebaseを呼び出しているのですが、firebase自体が読み込めてないと思い色々修正したのですがダメでした。それで、そもそもmonacaデバッカー自体がライブラリを使えないのではと疑問になり質問させて頂きました。まだこの環境で開発するとは確定していないので、monacaデバッガーの使いやすさを考えて決めようと思っています。出来るならコード等が悪いと分かるのでありがたいです。

gentaro

2019/07/07 16:53

質問文編集してそれを書いておきましょう。

torao_tanabe

2019/07/07 17:34

ありがとうございます。詳細な内容に修正しましたので、もし知識がおありになるのでしたら本題の方にもアドバイス頂けると助かります。

gentaro

2019/07/07 18:12

残念ながら同じ環境で試したことはありませんが、単純にCDN云々って話なら、ローカルで100%間違いなく動いているコードを作って、それをその環境で試せば切り分けぐらいはできますよね。