JavaScript-Modul-Bundler können viele Dinge tun. Eine ihrer nützlichsten Funktionen ist jedoch 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 dem importierten Bibliothekscode.
Ab Version 9 ist die modulare Firebase JavaScript API für die Optimierungsfunktionen von Modul-Bundlern optimiert, 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 Prozess, bei dem ungenutzter Code aus einer Bibliothek entfernt wird, wird als „Tree Shaking“ bezeichnet. Es wäre sehr zeitaufwendig und fehleranfällig, diesen Code manuell zu entfernen. Modul-Bundler können diesen Vorgang jedoch automatisieren.
Im JavaScript-Ökosystem gibt es viele hochwertige Modul-Bundler. In dieser Anleitung wird die Verwendung von Firebase mit webpack, Rollup und esbuild behandelt.
Jetzt starten
Für diese Anleitung muss npm in Ihrer Entwicklungsumgebung installiert sein. npm wird zum Installieren und Verwalten von Abhängigkeiten (Bibliotheken) verwendet. Wenn Sie npm installieren möchten, installieren Sie Node.js. npm ist automatisch enthalten.
Die meisten Entwickler haben die Einrichtung abgeschlossen, 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 sudo-Befehl installieren müssen.
package.json und Firebase installieren
Nachdem Sie npm installiert haben, müssen Sie im Stammverzeichnis Ihres lokalen Projekts eine package.json-Datei erstellen. Generieren Sie diese Datei mit dem folgenden npm-Befehl:
npm init
Sie werden durch einen Assistenten geführt, in dem Sie die erforderlichen Informationen angeben können. 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. Diese Datei ist wichtig, wenn Sie mehr über das Bündeln von Modulen und das Erstellen von JavaScript-Code im Allgemeinen erfahren möchten. Das Wichtigste in diesem 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 Befehl npm install oder npm i hinzugefügt.
npm i firebase
Wenn Sie npm i firebase ausführen, wird package.json während der Installation so aktualisiert, dass Firebase als Abhängigkeit aufgeführt wird:
"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 eine Reihe von Werten annehmen. Dies wird als semantische Versionierung oder SemVer bezeichnet. Weitere Informationen zur semantischen Versionsverwaltung
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 Dateitypen zu trennen. Der Code, den die Modul-Bundler lesen und verarbeiten, wird als „Quellcode“ bezeichnet. Die ausgegebenen Dateien werden als Built- oder „Dist“-Code (Distribution) bezeichnet.
In Codebases ist es üblich, Quellcode in einem Ordner namens src und den kompilierten Code in einem Ordner namens dist zu speichern.
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
Im obigen Beispiel für die 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. Die bundle.js ist eine Kombination aus den Dateien im Ordner src und allen Bibliotheken, die importiert werden.
Wenn Sie Versionsverwaltungssysteme wie Git verwenden, ist es üblich, den Ordner dist zu ignorieren, wenn Sie diesen Code im Hauptrepository speichern.
Einstiegspunkte
Alle Modul-Bundler haben ein Konzept für einen Einstiegspunkt. Sie können sich Ihre Anwendung als Baumstruktur von Dateien vorstellen. Eine Datei importiert Code aus einer anderen und so weiter. Das bedeutet, dass eine Datei der Stamm des Baums ist. Diese Datei wird als Einstiegspunkt bezeichnet.
Sehen wir uns noch einmal das vorherige Beispiel für die Dateistruktur 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 mit den Importen des gesamten benötigten Codes für die Anwendung beginnt. Diese Einstiegspunktdatei wird von Modul-Bundlern verwendet, um den Bundling-Prozess 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 beschrieben.
Der erste Schritt besteht darin, webpack als Entwicklungsabhängigkeit über npm zu installieren.
npm i webpack webpack-cli -D
Erstellen Sie im Stammverzeichnis Ihres lokalen Projekts eine Datei 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',
};
Prüfen Sie dann, ob Firebase als Abhängigkeit installiert ist.
npm i firebase
Initialisieren Sie dann Firebase in Ihrem Code. Im folgenden Code wird Firebase in einer Einstiegspunktdatei importiert und initialisiert. Außerdem wird Firestore Lite verwendet, 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-Script hinzu, um den Webpack-Build auszuführen. Öffnen Sie die Datei package.json und fügen Sie dem "scripts"-Objekt 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 zum Schluss den Build-Ordner dist. Sie sollte eine Datei mit dem Namen bundle.js enthalten, die den gebündelten Anwendungs- und Abhängigkeitscode enthält.
Weitere Informationen zum Optimieren Ihres Webpack-Builds für die Produktion finden Sie in der offiziellen Dokumentation zur 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 beschrieben.
Im ersten Schritt installieren Sie 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 mit dem Namen 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 Ihrem Code. Im folgenden Code wird Firebase in einer Einstiegspunktdatei importiert und initialisiert. Außerdem wird Firestore Lite verwendet, 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(),
};
}
Im nächsten Schritt fügen Sie ein npm-Skript hinzu, um den Rollup-Build auszuführen. Öffnen Sie die Datei package.json und fügen Sie dem "scripts"-Objekt 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 zum Schluss den Build-Ordner dist. Sie sollte eine Datei mit dem Namen bundle.js enthalten, die den gebündelten Anwendungs- und Abhängigkeitscode enthält.
Weitere Informationen zum Optimieren Ihres Rollup-Builds 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.
Der erste Schritt besteht darin, esbuild als Entwicklungsabhängigkeit zu installieren.
npm i esbuild -D
Erstellen Sie im Stammverzeichnis Ihres lokalen Projekts eine Datei 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 Ihrem Code. Im folgenden Code wird Firebase in einer Einstiegspunktdatei importiert und initialisiert. Außerdem wird Firestore Lite verwendet, 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(),
};
}
Im nächsten Schritt fügen Sie ein npm-Skript hinzu, um esbuild auszuführen. Öffnen Sie die Datei package.json und fügen Sie dem "scripts"-Objekt das folgende Schlüssel/Wert-Paar hinzu.
"scripts": {
"build": "node ./esbuild.config.js"
},
Prüfen Sie zum Schluss den Build-Ordner dist. Sie sollte eine Datei mit dem Namen bundle.js enthalten, die den gebündelten Anwendungs- und Abhängigkeitscode enthält.
Weitere Informationen zur Optimierung von esbuild für die Produktion finden Sie in der offiziellen Dokumentation zur Minimierung und anderen Optimierungen.