將 Firebase 新增到 JavaScript 專案的其他方法

對於大多數 Firebase Web 應用程序,我們強烈建議透過 npm 使用 SDK 。但是,對於有特殊要求的用戶,Firebase 提供了添加 SDK 的替代方法。本頁提供了這些替代方法的詳細設定說明:

  • CDN(內容傳遞網路)
  • 適用於 Node.js 應用程式的 npm

使用這些方法,您可以將任何可用的程式庫新增到您的應用程式中。

來自CDN

您可以配置 Firebase JavaScript SDK 的部分導入,並僅載入您需要的 Firebase 產品。 Firebase 將 Firebase JavaScript SDK 的每個庫儲存在我們的全球 CDN(內容交付網路)上。

  1. 若要僅包含特定的 Firebase 產品(例如,驗證和 Cloud Firestore),請將以下腳本新增至<body>標記的底部,但在使用任何 Firebase 服務之前:

    <body>
      <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
      <script type="module">
        import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.9.0/firebase-app.js'
    
        // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
        import { getAnalytics } from 'https://www.gstatic.com/firebasejs/10.9.0/firebase-analytics.js'
    
        // Add Firebase products that you want to use
        import { getAuth } from 'https://www.gstatic.com/firebasejs/10.9.0/firebase-auth.js'
        import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.9.0/firebase-firestore.js'
      </script>
    </body>
    
  2. 新增您的 Firebase 配置對象,然後在您的應用程式中初始化 Firebase:

    <body>
      <script type="module">
        // ...
    
        // TODO: Replace the following with your app's Firebase project configuration
        const firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
      </script>
    </body>
    

Node.js 應用程式

  1. 安裝 Firebase JavaScript SDK:

    1. 如果您還沒有package.json文件,請透過從 JavaScript 專案的根目錄執行以下命令來建立一個文件:

      npm init
    2. 安裝firebase npm 套件並透過執行以下命令將其儲存到package.json檔案中:

      npm install --save firebase@10.9.0
  2. 使用以下選項之一在您的應用程式中使用 Firebase 模組:

    • 您可以從任何 JavaScript 檔案中require模組

      僅包含特定的 Firebase 產品(例如驗證和 Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • 可使用ES2015 import模組

      僅包含特定的 Firebase 產品(例如驗證和 Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. 新增您的 Firebase 配置對象,然後在您的應用程式中初始化 Firebase:

    import { initializeApp } from 'firebase/app';
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      //...
    };
    
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);