我在我的 html 脚本标签中将 getAuth 设置为 auth，我试图在我的 auth.js 中使用它，但我一直收到错误 auth is not defined。 怎么修？

Question

这是我的 index.html。 哦，是的，我的脚本标签在我的身体标签内。

<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js";
    // TODO: Add SDKs for Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js';
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js';

    // https://firebase.google.com/docs/web/setup#available-libraries
  
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "HIDDEN FOR THIS POST",
      authDomain: "case-study---login-system.firebaseapp.com",
      projectId: "case-study---login-system",
      storageBucket: "case-study---login-system.appspot.com",
      messagingSenderId: "HIDDEN FOR THIS POST",
      appId: "HIDDEN FOR THIS POST",
      measurementId: "HIDDEN FOR THIS POST"
    };
  
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);

    // make auth and firestone references 
    const auth = getAuth(app);
    const db = getFirestore(app);
  </script>

<!-- Compiled and minified (Materialized)JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Script-->
<script src="static/auth.js"></script>
<script src="static/index.js"></script>

这是我的 auth.js

 // Signup 
const signupForm = document.querySelector('#signup-form');
signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    // get user info
    const email = signupForm['signup-email'].value;
    const password = signupForm['signup-password'].value;
    // sign up the user
    auth.createUserWithEmailAndPassword(email,password).then(cred => {
        console.log(cred);
    }); 
});

我不断进入控制台的错误是：

auth.js:9 Uncaught ReferenceError: auth is not defined at HTMLFormElement.

Answer 1

当您将type="module"添加到<script>标签时，所有变量都在模块自己的 scope 中 - 而不是像常规<script>标签那样的全局 scope。

要从static/auth.js访问auth ，您需要将auth添加到全局 scope：

// Initialize Firebase
const app = initializeApp(firebaseConfig);
window.analytics = getAnalytics(app);

// make auth and firestone references 
window.auth = getAuth(app);
window.db = getFirestore(app);

虽然这适用于简单的项目和测试，但您应该考虑转向使用像 Rollup 或 WebPack 这样的模块打包器，正如文档所推荐的那样。