JavaScript-Modul-Bundler können vieles, aber eine ihrer nützlichsten Funktionen ist die Möglichkeit, externe Bibliotheken in Ihre Codebasis einzufügen und zu verwenden. Modul-Bundler lesen Importpfade in Ihrem Code und kombinieren (bündeln) Ihren anwendungsspezifischen Code mit Ihrem importierten Bibliothekscode.
Ab Version 9 ist die modulare Firebase JavaScript API für die Verwendung mit den Optimierungsfunktionen von Modul-Bundlern optimiert, um die Menge an Firebase-Code zu reduzieren, der in Ihren endgültigen Build aufgenommen wird.
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 zum Entfernen von nicht verwendetem Code aus einer Bibliothek wird als Tree Shaking bezeichnet. Es wäre extrem zeitaufwendig und fehleranfällig, diesen Code manuell zu entfernen, aber Modul-Bundler können diesen Vorgang automatisieren.
Im JavaScript-Ökosystem gibt es viele hochwertige Modul-Bundler. In diesem Leitfaden wird die Verwendung von Firebase mit webpack, Rollup und esbuild behandelt.
Jetzt starten
Für diesen Leitfaden muss npm in Ihrer Entwicklungsumgebung installiert sein. npm wird verwendet, um Abhängigkeiten (Bibliotheken) zu installieren und zu verwalten. Installieren Sie Node.js, um npm zu installieren. npm ist automatisch in Node.js enthalten.
Die meisten Entwickler sind richtig eingerichtet, sobald sie Node.js installiert haben. Es gibt jedoch häufige Probleme, auf die viele Entwickler bei der Einrichtung ihrer Umgebung stoßen. Wenn Fehler auftreten, prüfen Sie, ob die npm-Befehlszeile in Ihrer Umgebung vorhanden ist und ob Sie die richtigen Berechtigungen eingerichtet haben, damit Sie Pakete nicht als Administrator mit dem Befehl „sudo“ installieren müssen.
package.json und Firebase installieren
Nachdem Sie npm installiert haben, müssen Sie im Stammverzeichnis Ihres lokalen Projekts eine Datei package.json erstellen. Generieren Sie diese Datei mit dem folgenden npm-Befehl:
npm init
Sie werden durch einen Assistenten geführt, um die erforderlichen Informationen anzugeben. Nachdem die Datei erstellt wurde, sieht sie in etwa 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. Sie ist wichtig, 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 das
"dependencies" Objekt. Dieses Objekt enthält ein Schlüssel/Wert-Paar der installierten Bibliothek und der verwendeten Version.
Abhängigkeiten werden mit dem npm install oder npm i Befehl hinzugefügt.
npm i firebase
Wenn Sie npm i firebase ausführen, wird package.json im Rahmen der Installation aktualisiert, um Firebase als Abhängigkeit aufzuführen:
"dependencies": {
"firebase": "^9.0.0"
},
Der Schlüssel ist der Name der Bibliothek und der Wert ist die zu verwendende Version. Der Wert der Version ist flexibel und kann eine Reihe von Werten akzeptieren. Dies wird als semantische Versionierung oder „semver“ bezeichnet. Weitere Informationen zu „semver“ finden Sie im Leitfaden zur semantischen Versionsverwaltung von npm.
Quell- und Build-Ordner
Der von Ihnen geschriebene Code wird von einem Modul-Bundler gelesen und verarbeitet und dann als neue Datei oder Gruppe von Dateien ausgegeben. Es ist wichtig, diese beiden Arten von Dateien zu trennen. Der Code, der von den Modul-Bundlern gelesen und verarbeitet wird, wird als Quellcode bezeichnet. Die von ihnen ausgegebenen Dateien werden als Build- oder „dist“-Code (Distribution) bezeichnet.
In Codebasen ist es üblich, Quellcode in einem Ordner namens src und den Build-Code in einem Ordner namens dist zu speichern.
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
In der oben genannten Beispiel-Dateistruktur importiert index.js sowohl animations.js als auch datalist.js. Wenn ein Modul-Bundler den Quellcode verarbeitet, wird die Datei bundle.js im Ordner dist erstellt. bundle.js ist eine Kombination aus den Dateien im Ordner src und allen Bibliotheken, die importiert werden.
Wenn Sie Quellcodeverwaltungssysteme wie Git verwenden, wird der Ordner dist beim Speichern dieses Codes im Haupt-Repository häufig ignoriert.
Einstiegspunkte
Alle Modul-Bundler haben ein Konzept für einen Einstiegspunkt. Sie können sich Ihre Anwendung als Baum von Dateien vorstellen. Eine Datei importiert Code aus einer anderen und so weiter. Das 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 Datei src/index.js gilt als Einstiegspunkt, da sie die Importe des gesamten erforderlichen Codes für die Anwendung startet. Diese Einstiegspunktdatei wird von Modul-Bundlern verwendet, um den Bündelungsprozess zu starten.
Firebase mit webpack verwenden
Für Firebase-Apps und webpack ist keine spezielle Konfiguration erforderlich. In diesem Abschnitt wird eine allgemeine webpack-Konfiguration behandelt.
Installieren Sie zuerst webpack über npm als Entwicklungsabhängigkeit.
npm i webpack webpack-cli -D
Erstellen Sie im Stammverzeichnis Ihres lokalen Projekts eine Datei namens webpack.config.js und fügen Sie den folgenden Code hinzu.
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',
};
Prüfen Sie dann, ob 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 „city“-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(),
};
}
Als Nächstes fügen Sie ein npm-Skript hinzu, um den webpack-Build auszuführen. Öffnen Sie die Datei package.json
und fügen Sie dem Objekt "scripts" das folgende Schlüssel/Wert-Paar hinzu.
"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
Prüfen Sie abschließend den Build-Ordner dist. Er sollte eine Datei namens bundle.js enthalten, die Ihren gebündelten Anwendungs- und Abhängigkeitscode enthält.
Weitere Informationen zum Optimieren Ihres webpack-Build für die Produktion finden Sie in der offiziellen Dokumentation zu der Konfigurationseinstellung „mode“.
Firebase mit Rollup verwenden
Für Firebase-Apps und Rollup ist keine spezielle Konfiguration erforderlich. In diesem Abschnitt wird eine allgemeine Rollup-Konfiguration behandelt.
Installieren Sie zuerst Rollup und ein Plug-in, mit dem Importe den mit npm installierten Abhängigkeiten zugeordnet werden.
npm i rollup @rollup/plugin-node-resolve -D
Erstellen Sie im Stammverzeichnis Ihres lokalen Projekts eine Datei namens rollup.config.js und fügen Sie den folgenden Code hinzu.
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 „city“-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(),
};
}
Als Nächstes fügen Sie ein npm-Skript hinzu,
um den Rollup-Build auszuführen. Öffnen Sie die Datei package.json
und fügen Sie dem Objekt "scripts" das folgende Schlüssel/Wert-Paar hinzu.
"scripts": {
"build": "rollup -c rollup.config.js"
},
Führen Sie den folgenden Befehl aus, um Rollup auszuführen und den Build-Ordner zu generieren.
npm run build
Prüfen Sie abschließend den Build-Ordner dist. Er sollte eine Datei namens bundle.js enthalten, die Ihren gebündelten Anwendungs- und Abhängigkeitscode enthält.
Weitere Informationen zum Optimieren Ihres Rollup-Build für die Produktion finden Sie in der offiziellen Dokumentation zu Plug-ins für Produktions-Builds.
Firebase mit esbuild verwenden
Für Firebase-Apps und esbuild ist keine spezielle Konfiguration erforderlich. In diesem Abschnitt wird eine allgemeine esbuild-Konfiguration behandelt.
Installieren Sie zuerst esbuild als Entwicklungsabhängigkeit.
npm i esbuild -D
Erstellen Sie im Stammverzeichnis Ihres lokalen Projekts eine Datei namens esbuild.config.js und fügen Sie den folgenden Code hinzu.
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 „city“-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(),
};
}
Als Nächstes fügen Sie ein npm-Skript hinzu,
um esbuild auszuführen. Öffnen Sie die package.json Datei und fügen Sie
dem "scripts" Objekt das folgende Schlüssel/Wert-Paar hinzu.
"scripts": {
"build": "node ./esbuild.config.js"
},
Prüfen Sie abschließend den Build-Ordner dist. Er sollte eine Datei namens bundle.js enthalten, die Ihren gebündelten Anwendungs- und Abhängigkeitscode enthält.
Weitere Informationen zum Optimieren von esbuild für die Produktion finden Sie in der offiziellen Dokumentation zur Minimierung und zu anderen Optimierungen.