將 Firebase 新增至 JavaScript 專案的替代方式

針對大多數的 Firebase 網頁應用程式，我們強烈建議使用 透過 npm 下載 SDK。 不過，Firebase 可以為有特殊需求的使用者提供替代方案 新增 SDK 的方法。 本頁提供下列替代方法的詳細設定操作說明：

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

透過這些方法，您就能新增 可用的程式庫 導入您的應用程式

來自 CDN

您可以設定 Firebase JavaScript SDK 的部分匯入作業，並只載入 所需的 Firebase 產品。Firebase 會儲存 Firebase JavaScript在我們的全球 CDN (內容傳遞聯播網) 上安裝 SDK。

  1. 如果只想納入特定 Firebase 產品 (例如 Authentication 和 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.13.1/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.13.1/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/10.13.1/firebase-auth.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.13.1/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.13.1

  2. 請使用下列任一選項，在應用程式中使用 Firebase 模組：

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

      如果只想納入特定 Firebase 產品 (例如 Authentication 和 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 產品 (例如 Authentication 和 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);