Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Modulbundler mit Firebase verwenden

JavaScript-Modulbundler können viele Dinge tun, aber eine ihrer nützlichsten Funktionen ist die Möglichkeit, externe Bibliotheken in Ihrer Codebasis hinzuzufügen und zu verwenden. Modulbundler lesen Importpfade in Ihrem Code und kombinieren (bündeln) Ihren anwendungsspezifischen Code mit Ihrem importierten Bibliothekscode.

Ab Version 9 ist das Firebase JavaScript SDK so optimiert, dass es mit den Optimierungsfunktionen von Modulbundlern zusammenarbeitet, um die Menge an Firebase-Code zu reduzieren, die in Ihrem endgültigen Build enthalten ist.

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getRedirectResult } from 'firebase/auth';

const firebaseApp = initializeApp({ /* config */ });
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => { /* check status */ });

/**
 * getRedirectResult is unused and should not be included in the code base.
 * In addition, there are many other functions within firebase/auth that are
 * not imported and therefore should not be included as well.
 */

Dieser Vorgang des Entfernens von ungenutztem Code aus einer Bibliothek wird als Tree Shaking bezeichnet. Es wäre extrem zeitaufwändig und fehleranfällig, diesen Code manuell zu entfernen, aber Modulbundler können diese Entfernung automatisieren.

Es gibt viele hochwertige Modulbundler im JavaScript-Ökosystem. Dieser Leitfaden konzentriert sich auf die Abdeckung mit Firebase mit webpack , Rollup und esbuild .

Loslegen

Dieses Handbuch setzt voraus, dass npm in Ihrer Entwicklungsumgebung installiert ist. npm wird verwendet, um Abhängigkeiten (Bibliotheken) zu installieren und zu verwalten. So installieren Sie npm, installieren Node.js , die npm automatisch schließt.

Die meisten Entwickler sind nach der Installation von Node.js richtig eingerichtet. Es gibt jedoch häufige Probleme, auf die viele Entwickler beim Einrichten ihrer Umgebung stoßen. Wenn Sie irgendwelche Fehler ausführen, stellen Sie sicher , Ihre Umgebung die npm CLI hat und dass Sie die richtigen Berechtigungen einrichten, so dass Sie müssen keine Pakete als Administrator mit dem Befehl sudo installieren .

package.json und Installation von Firebase

Sobald Sie npm installiert haben, müssen Sie eine erstellen package.json Datei im Stammverzeichnis des lokalen Projektes. Generieren Sie diese Datei mit dem folgenden npm-Befehl:

npm init

Dies führt Sie durch einen Assistenten, um die erforderlichen Informationen bereitzustellen. Sobald die Datei erstellt wurde, sieht sie ungefähr so ​​​​aus:

{
  "name": "your-package-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {

  }
}

Diese Datei ist für viele verschiedene Dinge verantwortlich. Dies ist eine wichtige Datei, mit der Sie sich vertraut machen sollten, wenn Sie mehr über das Bündeln von Modulen und das Erstellen von JavaScript-Code im Allgemeinen erfahren möchten. Der wichtige Teil für diesen Leitfaden ist die "dependencies" Objekt. Dieses Objekt enthält ein Schlüssel/Wert-Paar der von Ihnen installierten Bibliothek und der von ihr verwendeten Version.

Hinzufügen von Abhängigkeiten durch das getan npm install oder npm i - Befehl.

npm i firebase

Wenn Sie laufen npm i firebase , wird die Installation aktualisieren package.json zur Liste Firebase als Abhängigkeit:

  "dependencies": {
    "firebase": "^9.0.0"
  },

Der Schlüssel ist der Name der Bibliothek und der Wert ist die zu verwendende Version. Der Versionswert ist flexibel und kann einen Wertebereich annehmen. Dies wird als semantische Versionierung oder semver bezeichnet. Um mehr zu erfahren über semver, siehe npm Leitfaden über semantische Versionierung .

Quelle vs. Build-Ordner

Der von Ihnen geschriebene Code wird von einem Modulbundler gelesen und verarbeitet und dann als neue Datei oder Dateigruppe ausgegeben. Es ist wichtig, diese beiden Dateitypen zu trennen. Der Code, den die Modulbundler lesen und verarbeiten, wird als "Quellcode" bezeichnet. Die von ihnen ausgegebenen Dateien werden als gebauter oder "dist" (Verteilungs-) Code bezeichnet.

Eine gemeinsame Einrichtung in Codebasen ist zum Speichern von Quellcode in einem Ordner namens src und der integrierten Code in einem Ordner mit dem Namen dist .

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js

In dem Beispiel Dateistruktur oben berücksichtigen , dass index.js Einfuhren beide animations.js und datalist.js . Wenn ein Modul bundler den Quellcode verarbeitet wird es die produzieren bundle.js Datei im dist - Ordner. Die bundle.js ist eine Kombination aus den Dateien im src Ordner und alle Bibliotheken als auch der Import.

Wenn Sie Source - Control - Systeme wie Git verwenden, ist es üblich , das ignorieren dist - Ordner , wenn Sie diesen Code in dem Haupt - Repository zu speichern.

Einstiegspunkte

Modulbundler haben alle das Konzept eines Einstiegspunkts. Sie können sich Ihre Anwendung als einen Dateibaum vorstellen. Eine Datei importiert Code aus einer anderen und so weiter und so weiter. Dies bedeutet, dass eine Datei die Wurzel des Baums ist. Diese Datei wird als Einstiegspunkt bezeichnet.

Sehen wir uns das vorherige Beispiel für die Dateistruktur noch einmal an.

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js
// src/index.js
import { animate } from './animations';
import { createList } from './datalist';

// This is not real code, but for example purposes only
const theList = createList('users/123/tasks');
theList.addEventListener('loaded', event => {
  animate(theList);
});

Die src/index.js Datei wird der Eintrittspunkt in Betracht gezogen , da sie die Einfuhr aller benötigten Code für die Anwendung beginnt. Diese Einstiegspunktdatei wird von Modulbundlern verwendet, um den Bündelungsprozess zu starten.

Firebase mit Webpack verwenden

Für Firebase-Apps und Webpacks ist keine spezielle Konfiguration erforderlich. Dieser Abschnitt umfasst eine allgemeine webpack Konfiguration .

Der erste Schritt besteht darin, Webpack von npm als Entwicklungsabhängigkeit zu installieren.

npm i webpack webpack-cli -D

Erstellen Sie eine Datei an der Wurzel des lokalen Projekt mit dem Namen webpack.config.js und fügen Sie den folgenden Code ein .

const path = require('path');

module.exports = {
  // The entry point file described above
  entry: './src/index.js',
  // The location of the build folder described above
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  devtool: 'eval-source-map',
};

Stellen Sie dann sicher, dass Firebase als Abhängigkeit installiert ist.

npm i firebase

Initialisieren Sie dann Firebase in Ihrer Codebasis. Der folgende Code importiert und initialisiert Firebase in einer Einstiegspunktdatei und verwendet Firestore Lite, um ein "Stadt"-Dokument zu laden.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

const firebaseApp = initializeApp({ /* config */ });
const db = getFirestore(firebaseApp);

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

Der nächste Schritt ist , um einen npm Skript hinzufügen , die webpack Build auszuführen. Öffnen Sie die package.json - Datei und fügen Sie den folgenden Schlüssel Wertpaar mit dem "scripts" Objekt.

  "scripts": {
    "build": "webpack --mode=development"
  },

Führen Sie den folgenden Befehl aus, um Webpack auszuführen und den Build-Ordner zu generieren.

npm run build

Zuletzt noch die dist Buildordner. Es sollte eine Datei mit dem Namen enthalten bundle.js , die Ihre Anwendung gebündelt und die Abhängigkeit Code enthält.

Weitere Informationen über Ihre webpack Build für die Optimierung der Produktion findet ihre offizielle Dokumentation über die „Mode“ Konfigurationseinstellung .

Firebase mit Rollup verwenden

Für Firebase-Apps und Rollup ist keine spezielle Konfiguration erforderlich. Dieser Abschnitt behandelt eine allgemeine Rollup-Konfiguration.

Der erste Schritt besteht darin, Rollup und ein Plugin zu installieren, das verwendet wird, um Importe den mit npm installierten Abhängigkeiten zuzuordnen.

npm i rollup @rollup/plugin-node-resolve -D

Erstellen Sie eine Datei an der Wurzel des lokalen Projekt mit dem Namen rollup.config.js und fügen Sie den folgenden Code ein .

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // the entry point file described above
  input: 'src/index.js',
  // the output for the build folder described above
  output: {
    file: 'dist/bundle.js',
    // Optional and for development only. This provides the ability to
    // map the built code back to the original source format when debugging.
    sourcemap: 'inline',
    // Configure Rollup to convert your module code to a scoped function
    // that "immediate invokes". See the Rollup documentation for more
    // information: https://rollupjs.org/guide/en/#outputformat
    format: 'iife'
  },
  // Add the plugin to map import paths to dependencies
  // installed with npm
  plugins: [nodeResolve()]
};

Initialisieren Sie dann Firebase in Ihrer Codebasis. Der folgende Code importiert und initialisiert Firebase in einer Einstiegspunktdatei und verwendet Firestore Lite, um ein "Stadt"-Dokument zu laden.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

const firebaseApp = initializeApp({ /* config */ });
const db = getFirestore(firebaseApp);

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

Der nächste Schritt ist , um einen npm Skript hinzufügen , das Rollup Build auszuführen. Öffnen Sie die package.json - Datei und fügen Sie den folgenden Schlüssel Wertpaar mit dem "scripts" Objekt.

  "scripts": {
    "build": "rollup -c rollup.config.js"
  },

Führen Sie den folgenden Befehl aus, um ein Rollup auszuführen und den Build-Ordner zu generieren.

npm run build

Zuletzt noch die dist Buildordner. Es sollte eine Datei mit dem Namen enthalten bundle.js , die Ihre Anwendung gebündelt und die Abhängigkeit Code enthält.

Weitere Informationen zu Ihrem Rollup Build für die Optimierung der Produktion findet ihre offizielle Dokumentation über Plug - in für die Produktion baut .

Firebase mit esbuild verwenden

Für Firebase-Apps und Esbuild ist keine spezielle Konfiguration erforderlich. Dieser Abschnitt behandelt eine allgemeine Esbuild-Konfiguration.

Der erste Schritt besteht darin, esbuild als Entwicklungsabhängigkeit zu installieren.

npm i esbuild -D

Erstellen Sie eine Datei an der Wurzel des lokalen Projekt mit dem Namen esbuild.config.js und fügen Sie den folgenden Code ein .

require('esbuild').build({
  // the entry point file described above
  entryPoints: ['src/index.js'],
  // the build folder location described above
  outfile: 'dist/bundle.js',
  bundle: true,
  // Replace with the browser versions you need to target
  target: ['chrome60', 'firefox60', 'safari11', 'edge20'],
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  sourcemap: 'inline',
}).catch(() => process.exit(1))

Initialisieren Sie dann Firebase in Ihrer Codebasis. Der folgende Code importiert und initialisiert Firebase in einer Einstiegspunktdatei und verwendet Firestore Lite, um ein "Stadt"-Dokument zu laden.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

const firebaseApp = initializeApp({ /* config */ });
const db = getFirestore(firebaseApp);

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

Der nächste Schritt ist , um einen npm Skript hinzufügen zu laufen esbuild. Öffnen Sie die package.json - Datei und fügen Sie den folgenden Schlüssel Wertpaar mit dem "scripts" Objekt.

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

Zuletzt noch die dist Buildordner. Es sollte eine Datei mit dem Namen enthalten bundle.js , die Ihre Anwendung gebündelt und die Abhängigkeit Code enthält.

Weitere Informationen über esbuild für die Optimierung der Produktion findet ihre offizielle Dokumentation auf minification und anderen Optimierungen .