طرق بديلة لإضافة Firebase إلى مشروع JavaScript

بالنسبة إلى معظم تطبيقات الويب في Firebase، ننصحك بشدة باستخدام حزمة تطوير البرامج (SDK) من خلال npm. ومع ذلك، بالنسبة إلى المستخدمين الذين لديهم متطلبات خاصة، توفّر Firebase طُرقًا بديلة لإضافة حزمة SDK. تقدّم هذه الصفحة تعليمات إعداد تفصيلية لهذه الطرق البديلة:

شبكة توصيل المحتوى (CDN)
أداة npm لتطبيقات Node.js

باستخدام هذه الطرق، يمكنك إضافة أيّ من المكتبات المتاحة إلى تطبيقك.

من شبكة توصيل المحتوى (CDN)

يمكنك ضبط استيراد جزئي لحزمة تطوير البرامج (SDK) لمنصّة Firebase JavaScript وتحميل منتجات Firebase التي تحتاج إليها فقط. تخزِّن Firebase كل مكتبة من مكتبات حزمة تطوير البرامج (SDK) لنظام Firebase JavaScript على شبكة CDN (شبكة توصيل المحتوى) العالمية.

لتضمين منتجات Firebase معيّنة فقط (مثل Authentication وCloud Firestore)، أضِف الرمز البرمجي التالي إلى أسفل علامة <body>، ولكن قبل استخدام أي خدمات Firebase:

<body>
  <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js'

    // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/11.3.0/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/11.3.0/firebase-firestore.js'
  </script>
</body>

أضِف عنصر إعدادات Firebase، ثم أعِد إعداد Firebase في تطبيقك:

<body>
  <script type="module">
    // ...

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  </script>
</body>

تطبيقات Node.js

ثبِّت حزمة تطوير البرامج (SDK) من Firebase JavaScript باتّباع الخطوات التالية:
1. إذا لم يكن لديك ملف package.json، أنشئ ملفًا من خلال تنفيذ الأمر التالي من جذر مشروع JavaScript:
```
npm init
```
2. ثبِّت حزمة npm‏ firebase واحفظها في ملف package.json من خلال تشغيل:
```
npm install --save firebase@11.3.0
```
استخدِم أحد الخيارات التالية لاستخدام وحدة Firebase في تطبيقك:
- يمكنك require الوحدات من أي ملف JavaScript.
  
  لتضمين منتجات Firebase معيّنة فقط (مثل Authentication وCloud Firestore):
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");
```
  يجب تضمين حزمة SDK الكاملة لـ Firebase JavaScript بدلاً من حِزم SDK الفردية (لا يُنصح بذلك في التطبيقات المخصّصة للإصدار العلني).
  
  إنّ تحميل حزمة SDK بالكامل ليس إجراءً فعّالاً لتحميل التطبيقات المتوفّرة للجمهور على الويب.
  استخدِم هذا الخيار لأغراض التطوير فقط.
```
var firebase = require("firebase");
```
- يمكنك استخدام وحدات ES2015 إلى import
  
  لتضمين منتجات Firebase معيّنة فقط (مثل Authentication وCloud Firestore):
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";
```
  يجب تضمين حزمة SDK الكاملة لـ Firebase JavaScript بدلاً من حِزم SDK الفردية (لا يُنصح بذلك للتطبيقات العلنية).
  
  إنّ تحميل حزمة SDK بالكامل ليس فعالًا في إصدار تطبيقات الويب العلني.
  استخدِم هذا الخيار لأغراض التطوير فقط.
```
import firebase from "firebase";
```
  ملاحظة: إنّ استخدام بنية import مباشرةً مع Node.js هو عملية تجريبية، ولكن يمكنك التحويل إلى تنسيق CommonJS (بنية require) باستخدام المجمّعات مثل Babel.

أضِف عنصر إعدادات Firebase، ثم أعِد إعداد Firebase في تطبيقك:

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);