Catch up on everthing we announced at this year's Firebase Summit. Learn more

Firebase zu Ihrem JavaScript-Projekt hinzufügen

Folgen Sie dieser Anleitung, um das Firebase JavaScript SDK in Ihrer Web-App oder als Client für den Endbenutzerzugriff zu verwenden, beispielsweise in einer Node.js-Desktop- oder IoT-Anwendung.

Schritt 1: Erstellen Sie ein Projekt Firebase und registrieren Sie Ihre App

Bevor Sie Ihrer JavaScript-App Firebase hinzufügen können, müssen Sie ein Firebase-Projekt erstellen und Ihre App bei diesem Projekt registrieren. Wenn Sie Ihre App bei Firebase registrieren, erhalten Sie ein Firebase-Konfigurationsobjekt, mit dem Sie Ihre App mit Ihren Firebase-Projektressourcen verbinden.

Besuchen Sie verstehen Firebase Projekte mehr über Projekte und Firebase Best Practices zu lernen , für Apps zu Projekten hinzufügen.

Wenn Sie noch kein JavaScript Projekt und wollen einfach nur ein Produkt Firebase auszuprobieren, können Sie einen unserer Download quickstart Proben .

Schritt 2: das SDK installieren und initialisieren Firebase

Diese Seite beschreibt Installationsanweisungen für Version 9 des Firebase JS SDK, das eine verwendet JavaScript - Modul - Format.

Diese Workflow Anwendungen NPM und erfordert Modul Bündler oder JavaScript - Framework Werkzeuge , da das v9 SDK zur Arbeit mit optimierten Modul Bündler nicht verwendeten Code (Baum-Schütteln) und Abnahme SDK Größe zu beseitigen.

  1. Firebase mit npm installieren:

    npm install firebase
  2. Initialisieren Sie Firebase in Ihrer App und erstellen Sie ein Firebase-App-Objekt:

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

    Eine Firebase-App ist ein containerähnliches Objekt, das eine gemeinsame Konfiguration speichert und die Authentifizierung für alle Firebase-Dienste teilt. Nachdem Sie ein Firebase-App-Objekt in Ihrem Code initialisiert haben, können Sie Firebase-Dienste hinzufügen und verwenden.

Schritt 3: Der Zugang Firebase in Ihrer App

Firebase-Dienste (wie Cloud Firestore, Authentication, Realtime Database, Remote Config und mehr) können in einzelne Unterpakete importiert werden.

Das folgende Beispiel zeigt, wie Sie mit dem Cloud Firestore Lite SDK eine Datenliste abrufen können.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Schritt 4: Die Verwendung eines Moduls bundler (webpack / Rollup) zur Grßenverringerung

Das Firebase Web SDK wurde entwickelt, um mit Modulbundlern zusammenzuarbeiten, um ungenutzten Code zu entfernen (Tree-Shaking). Wir empfehlen dringend, diesen Ansatz für Produktions-Apps zu verwenden. Tools wie der Schräg CLI , Next.js , Vue CLI oder erstellen Reagieren App automatisch Modul Bündelung für Bibliotheken installiert durch npm und importiert in der Codebasis behandeln.

Siehe unseren Führer Mit Modul Bündler mit Firebase für weitere Informationen.

Verfügbare Firebase-Dienste für das Web

Nachdem Sie jetzt für die Verwendung von Firebase eingerichtet sind, können Sie damit beginnen, einen der folgenden verfügbaren Firebase-Dienste in Ihrer Web-App hinzuzufügen und zu verwenden.

Die folgenden Befehle zeigen , wie Firebase Bibliotheken lokal installiert importieren npm . Siehe die verfügbaren Bibliotheken Seite für alternative Import - Optionen.

Nächste Schritte

Weitere Informationen zu Firebase: