时间戳

首页 > 解决方案 > Firebase 9 模块化 - 如何开始

javascript - Firebase 9 模块化 - 如何开始

问题描述

我尝试开始使用 Firebase 9。我使用 VSCode 并使用 npm 导出（在 vscode 中）

   <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.5/firebase-app-compat.js"></script>
   
    <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.5/firebase-analytics-compat.js"></script>
  
    <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.5/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.5/firebase-firestore-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.5/firebase-storage-compat.js"></script>
    <!-- init -->
    <script defer src="firebase/init.js" type="text/javascript"></script>

    
    <script type="module">
    import {
        getAuth,
        onAuthStateChanged
    } from "firebase/auth";

    const auth = getAuth(firebaseApp);
    onAuthStateChanged(auth, user => {
        console.log(user)
    });
      </script>

错误

未捕获的类型错误：无法解析模块说明符“firebase/auth”。相对引用必须以“/”、“./”或“../”开头。

标签： javascriptgoogle-cloud-firestorefirebase-authentication

解决方案

我遇到了同样的问题，并且能够通过在 5:40 时间戳附近仔细观看 David 的视频来解决它。

这是在本地服务时工作的基本样板：

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';

const firebaseApp = initializeApp({
  // (insert your Firebase configuration here)
  });

  const auth = getAuth(firebaseApp);

  onAuthStateChanged(auth, user => {
    if (user) {
      console.log('Logged in as ${user.email}' );
    } else {
      console.log('No user');
    }
  });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting started with Firebase Auth</title>
    <script type="module" src="/index.js"></script>
</head>
<body>
    
</body>
</html>

推荐阅读