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

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

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

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

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

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

  1. لتضمين منتجات 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/10.13.1/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/10.13.1/firebase-analytics.js'
    
        // Add Firebase products that you want to use
        import { getAuth } from 'https://www.gstatic.com/firebasejs/10.13.1/firebase-auth.js'
        import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.13.1/firebase-firestore.js'
      </script>
    </body>
    
  2. أضِف كائن إعداد 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

  1. ثبِّت حزمة تطوير البرامج (SDK) Firebase JavaScript:

    1. إذا لم يكن لديك ملف package.json، يمكنك إنشاء ملف بواسطة تشغيل الأمر التالي من جذر JavaScript المشروع:

      npm init
    2. تثبيت حزمة firebase npm وحفظها في ملف package.json عن طريق تشغيل:

      npm install --save firebase@10.13.1
  2. استخدِم أحد الخيارات التالية لاستخدام وحدة 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");
      


    • يمكنك استخدام 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";
      
  3. أضِف كائن إعداد 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);