Alternative Möglichkeiten zum Hinzufügen von Firebase zu Ihrem JavaScript-Projekt
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Für die meisten Firebase-Web-Apps empfehlen wir dringend, das SDK über npm zu verwenden.
Für Nutzer mit besonderen Anforderungen bietet Firebase jedoch alternative Möglichkeiten zum Hinzufügen des SDK.
Auf dieser Seite finden Sie detaillierte Einrichtungsanleitungen für diese alternativen Methoden:
Sie können den teilweisen Import des FirebaseJavaScript SDK konfigurieren und nur die Firebase-Produkte laden, die Sie benötigen. Firebase speichert jede Bibliothek des FirebaseJavaScript SDK in unserem globalen CDN (Content Delivery Network).
Wenn Sie nur bestimmte Firebase-Produkte (z. B. Authentication und Cloud Firestore) einbinden möchten, fügen Sie das folgende Skript am Ende des Tags <body> ein, bevor Sie Firebase-Dienste verwenden:
<body>
<!--InsertthisscriptatthebottomoftheHTML,butbeforeyouuseanyFirebaseservices-->
<scripttype="module">
import{initializeApp}from'https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js'// If you enabled Analytics in your project, add the Firebase SDK for Google Analyticsimport{getAnalytics}from'https://www.gstatic.com/firebasejs/12.2.1/firebase-analytics.js'// Add Firebase products that you want to useimport{getAuth}from'https://www.gstatic.com/firebasejs/12.2.1/firebase-auth.js'import{getFirestore}from'https://www.gstatic.com/firebasejs/12.2.1/firebase-firestore.js'</script>
</body>
Fügen Sie das Firebase-Konfigurationsobjekt hinzu und initialisieren Sie Firebase in Ihrer App:
<body>
<scripttype="module">
// ...// TODO: Replace the following with your app's Firebase configurationconstfirebaseConfig={// ...};// Initialize Firebaseconstapp=initializeApp(firebaseConfig);</script>
</body>
Node.js-Apps
Installieren Sie das FirebaseJavaScript SDK:
Wenn Sie noch keine package.json-Datei haben, erstellen Sie eine mit dem folgenden Befehl im Stammverzeichnis Ihres JavaScript-Projekts:
npm init
Installieren Sie das npm-Paket firebase und speichern Sie es in der Datei package.json:
npm install --save firebase@12.2.1
Verwenden Sie eine der folgenden Optionen, um das Firebase-Modul in Ihrer App zu verwenden:
Sie können require-Module aus jeder JavaScript-Datei importieren.
Wenn Sie nur bestimmte Firebase-Produkte (z. B. Authentication und Cloud Firestore) einbeziehen möchten, gehen Sie so vor:
// Firebase App (the core Firebase SDK) is always required and// must be listed before other Firebase SDKsvarfirebase=require("firebase/app");// Add the Firebase products that you want to userequire("firebase/auth");require("firebase/firestore");
Das gesamte FirebaseJavaScript SDK einbinden, anstatt einzelne SDKs (nicht für Produktions-Apps empfohlen)
varfirebase=require("firebase");
Sie können die ESM-Syntax verwenden, um import-Module.
Wenn Sie nur bestimmte Firebase-Produkte (z. B. Authentication und Cloud Firestore) einbeziehen möchten, gehen Sie so vor:
// Firebase App (the core Firebase SDK) is always required and// must be listed before other Firebase SDKsimportfirebasefrom"firebase/app";// Add the Firebase services that you want to useimport"firebase/auth";import"firebase/firestore";
Das gesamte FirebaseJavaScript SDK einbinden, anstatt einzelne SDKs (nicht für Produktions-Apps empfohlen)
importfirebasefrom"firebase";
Fügen Sie das Firebase-Konfigurationsobjekt hinzu und initialisieren Sie Firebase in Ihrer App:
import{initializeApp}from'firebase/app';// TODO: Replace the following with your app's Firebase configurationconstfirebaseConfig={//...};// Initialize Firebaseconstapp=initializeApp(firebaseConfig);
[null,null,["Zuletzt aktualisiert: 2025-08-31 (UTC)."],[],[],null,["\u003cbr /\u003e\n\nFor most Firebase web apps we strongly recommend using\n[the SDK via npm](/docs/web/setup).\nHowever, for users with special requirements, Firebase provides alternative\n[ways to add the SDK](/docs/web/learn-more#ways-to-add-web-sdks).\nThis page provides detailed setup instructions for these alternative methods:\n\n- CDN (content delivery network)\n- npm for Node.js apps\n\nUsing these methods, you can add any of the\n[available libraries](/docs/web/learn-more#available-libraries)\nto your app. \n\nFrom the CDN\n\nYou can configure partial import of the Firebase JavaScript SDK and only load the\nFirebase products that you need. Firebase stores each library of the\nFirebase JavaScript SDK on our global CDN (content delivery network).\n\n1. To include only [specific Firebase products](/docs/web/learn-more#libraries-cdn)\n (for example, Authentication and Cloud Firestore), add the following\n script to the bottom of your `\u003cbody\u003e` tag, but before you use any\n Firebase services:\n\n ```javascript\n \u003cbody\u003e\n \u003c!-- Insert this script at the bottom of the HTML, but before you use any Firebase services --\u003e\n \u003cscript type=\"module\"\u003e\n import { initializeApp } from 'https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js'\n\n // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics\n import { getAnalytics } from 'https://www.gstatic.com/firebasejs/12.2.1/firebase-analytics.js'\n\n // Add Firebase products that you want to use\n import { getAuth } from 'https://www.gstatic.com/firebasejs/12.2.1/firebase-auth.js'\n import { getFirestore } from 'https://www.gstatic.com/firebasejs/12.2.1/firebase-firestore.js'\n \u003c/script\u003e\n \u003c/body\u003e\n ```\n | You can optionally [delay loading of Firebase SDKs](/docs/web/learn-more#delay-sdks-cdn) until the entire page has loaded.\n2. Add your Firebase configuration object, and then initialize Firebase in\n your app:\n\n ```javascript\n \u003cbody\u003e\n \u003cscript type=\"module\"\u003e\n // ...\n\n // TODO: Replace the following with your app's /docs/web/learn-more#config-object\n const firebaseConfig = {\n // ...\n };\n\n // Initialize Firebase\n const app = initializeApp(firebaseConfig);\n \u003c/script\u003e\n \u003c/body\u003e\n ```\n\nNode.js apps**Caution:** The following instructions are for using the Firebase JavaScript SDK as a client for end-user access (for example, in a Node.js desktop or IoT application). To set up administrative access from privileged environments (such as servers), [set up the Firebase Admin SDK](/docs/admin/setup) instead.\n\n1. Install the Firebase JavaScript SDK:\n\n 1. If you don't already have a `package.json` file, create one by\n running the following command from the root of your JavaScript\n project:\n\n ```\n npm init\n ```\n 2. Install the `firebase` npm package and save it to your\n `package.json` file by running:\n\n ```\n npm install --save firebase@12.2.1\n ```\n2. Use one of the following options to use the Firebase module in your app:\n\n - **You can `require` modules from any JavaScript file**\n\n To include only [specific Firebase products](/docs/web/learn-more#libraries-nodejs)\n (like Authentication and Cloud Firestore): \n\n // Firebase App (the core Firebase SDK) is always required and\n // must be listed before other Firebase SDKs\n var firebase = require(\"firebase/app\");\n\n // Add the Firebase products that you want to use\n require(\"firebase/auth\");\n require(\"firebase/firestore\");\n\n Include the entire Firebase JavaScript SDK, rather\n than individual SDKs\n *(not recommended for production apps)*\n | Loading the entire SDK is not efficient for production web apps. \n Use this option for development purposes only. \n\n ```javascript\n var firebase = require(\"firebase\");\n ```\n\n \u003cbr /\u003e\n\n - **You can use ESM syntax to `import` modules**\n\n To include only [specific Firebase products](/docs/web/learn-more#libraries-nodejs)\n (like Authentication and Cloud Firestore): \n\n // Firebase App (the core Firebase SDK) is always required and\n // must be listed before other Firebase SDKs\n import firebase from \"firebase/app\";\n\n // Add the Firebase services that you want to use\n import \"firebase/auth\";\n import \"firebase/firestore\";\n\n Include the entire Firebase JavaScript SDK, rather\n than individual SDKs\n *(not recommended for production apps)*\n | Loading the entire SDK is not efficient for production web apps. \n Use this option for development purposes only. \n\n ```python\n import firebase from \"firebase\";\n ```\n3. Add your Firebase configuration object, and then initialize Firebase in\n your app:\n\n ```javascript\n import { initializeApp } from 'firebase/app';\n\n // TODO: Replace the following with your app's /docs/web/learn-more#config-object\n const firebaseConfig = {\n //...\n };\n\n // Initialize Firebase\n const app = initializeApp(firebaseConfig);\n ```"]]