JavaScript-Modul-Bundler können viele Dinge tun, 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 dem 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 in Ihrem endgültigen Build zu reduzieren.
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.
*/
Das Entfernen von ungenutztem Code aus einer Bibliothek wird als Tree Shaking bezeichnet. Es wäre extrem zeitaufwendig und fehleranfällig, diesen Code manuell zu entfernen. Mit Modul-Bundlern lässt sich dieses Entfernen jedoch automatisieren.
Es gibt viele hochwertige Module-Bundler im JavaScript-Ökosystem. In diesem Leitfaden geht es hauptsächlich um die Verwendung von Firebase mit Webpack, Rollup und esbuild.
Jetzt starten
Für diese Anleitung muss npm in Ihrer Entwicklungsumgebung installiert sein. Mit npm werden Abhängigkeiten (Bibliotheken) installiert und verwaltet. Wenn Sie npm installieren möchten, installieren Sie Node.js. npm ist dann automatisch enthalten.
Bei den meisten Entwicklern ist die Einrichtung nach der Installation von Node.js abgeschlossen. Es gibt jedoch häufige Probleme, auf die viele Entwickler beim Einrichten ihrer Umgebung stoßen. Wenn Fehler auftreten, prüfen Sie, ob die npm-Befehlszeile in Ihrer Umgebung installiert ist, und ob Sie die richtigen Berechtigungen 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 package.json-Datei erstellen. Generieren Sie diese Datei mit dem folgenden npm-Befehl:
npm init
Sie werden dann durch einen Assistenten geführt, in dem Sie die erforderlichen Informationen angeben. Die Datei sieht dann 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 Binden von Modulen und das Erstellen von JavaScript-Code im Allgemeinen erfahren möchten. Das wichtigste Element in diesem Leitfaden ist das "dependencies"-Objekt. Dieses Objekt enthält ein Schlüssel/Wert-Paar für die von Ihnen installierte Bibliothek und die verwendete Version.
Abhängigkeiten werden über den 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 aktualisiert und Firebase wird als Abhängigkeit aufgeführt:
"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 Bereich von Werten annehmen. Dies wird als semantische Versionierung oder SemVer bezeichnet. Weitere Informationen zu SemVer finden Sie in der npm-Anleitung 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 als Gruppe von Dateien ausgegeben. Es ist wichtig, diese beiden Dateitypen voneinander zu trennen. Der Code, den die Modul-Bundler lesen und verarbeiten, wird als „Quellcode“ bezeichnet. Die von ihnen erstellten Dateien werden als Build- oder „dist“-Code (Distributionscode) bezeichnet.
Eine gängige Konfiguration in Codebases besteht darin, den Quellcode in einem Ordner namens src und den erstellten Code in einem Ordner namens dist zu speichern.
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
In der Beispieldateistruktur oben wird angenommen, dass index.js sowohl animations.js als auch datalist.js importiert. Wenn ein Modul-Bundler den Quellcode verarbeitet, wird die bundle.js-Datei im Ordner dist erstellt. bundle.js ist eine Kombination aus den Dateien im Ordner src und allen Bibliotheken, die importiert werden.
Wenn Sie Versionskontrollsysteme wie Git verwenden, wird der Ordner dist beim Speichern dieses Codes im Hauptrepository in der Regel ignoriert.
Einstiegspunkte
Modul-Bundler haben alle ein Konzept für einen Einstiegspunkt. Sie können sich Ihre Anwendung als Dateistruktur 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 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 dort der Import des gesamten für die Anwendung erforderlichen Codes beginnt. Diese Datei 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.
Der erste Schritt besteht darin, Webpack über npm als Entwicklungsabhängigkeit 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 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. Im folgenden Code wird Firebase in einer Einstiegspunktdatei importiert und initialisiert. Außerdem wird Firestore Lite verwendet, um ein Dokument vom Typ „city“ 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-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 abschließend den Build-Ordner dist. Sie sollte eine Datei mit dem Namen bundle.js enthalten, die die gebundelte Anwendung und den Abhängigkeitscode enthält.
Weitere Informationen zur Optimierung 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 ‑Rollups ist keine spezielle Konfiguration erforderlich. In diesem Abschnitt wird eine allgemeine Konfiguration für die Zusammenstellung beschrieben.
Als Erstes müssen Sie Rollup und ein Plug-in installieren, 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 Ihrer Codebasis. Im folgenden Code wird Firebase in einer Einstiegspunktdatei importiert und initialisiert. Außerdem wird mit Firestore Lite ein Dokument vom Typ „city“ geladen.
// 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-Script 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 das Roll-up auszuführen und den Build-Ordner zu generieren.
npm run build
Prüfen Sie abschließend den Build-Ordner dist. Sie sollte eine Datei namens bundle.js enthalten, die die gebundelte Anwendung und den Abhängigkeitscode enthält.
Weitere Informationen zur Optimierung 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.
Als Erstes müssen Sie esbuild als Entwicklungsabhängigkeit 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 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. Im folgenden Code wird Firebase in einer Einstiegspunktdatei importiert und initialisiert. Außerdem wird Firestore Lite verwendet, um ein Dokument vom Typ „city“ 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-Script 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 abschließend den Build-Ordner dist. Sie sollte eine Datei mit dem Namen bundle.js enthalten, die die gebundelte Anwendung und den Abhängigkeitscode enthält.
Weitere Informationen zur Optimierung von esbuild für die Produktion finden Sie in der offiziellen Dokumentation zu Minimierung und anderen Optimierungen.