JavaScriptプロジェクトにFirebaseを追加する別の方法

ほとんどのFirebaseWebアプリでは、npmを介してSDKバージョン9を使用することを強くお勧めします。ただし、特別な要件を持つユーザーのために、FirebaseはSDKを追加するための代替方法を提供します。このページでは、これらの代替方法の詳細なセットアップ手順について説明します。

  • CDN(コンテンツ配信ネットワーク)
  • Node.jsアプリのnpm

これらの方法を使用して、バージョン9で利用可能なライブラリをアプリに追加できます。

CDNから

Firebase JavaScript SDKの部分的なインポートを設定し、必要なFirebase製品のみを読み込むことができます。 Firebaseは、Firebase JavaScript SDKの各ライブラリをグローバルCDN(コンテンツ配信ネットワーク)に保存します。

  1. 特定のFirebase製品(AuthenticationやCloud Firestoreなど)のみを含めるには、Firebaseサービスを使用する前に、 <body>タグの下部に次のスクリプトを追加します。

    <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/9.8.4/firebase-app.js'
    
        // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
        import { analytics } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-analytics.js'
    
        // Add Firebase products that you want to use
        import { auth } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js'
        import { firestore } from 'https://www.gstatic.com/firebasejs/9.8.4/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 JavaScriptSDKをインストールします。

    1. package.jsonファイルがまだない場合は、JavaScriptプロジェクトのルートから次のコマンドを実行して作成します。

      npm init
    2. firebase npmパッケージをインストールし、次のコマンドを実行してpackage.jsonファイルに保存します。

      npm install --save firebase@9.8.4
  2. アプリでFirebaseモジュールを使用するには、次のいずれかのオプションを使用します。

    • 任意のJavaScriptファイルからモジュールをrequireできます

      特定のFirebase製品(認証やクラウド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製品(認証やクラウド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);