नेमस्पेस किए गए एपीआई से मॉड्यूलर एपीआई पर अपग्रेड करें

ऐप्लिकेशन, फ़िलहाल compat लाइब्रेरी से, किसी भी नेमस्पेस किए गए Firebase वेब एपीआई का इस्तेमाल कर रहे हैं वर्शन 8 या इससे पहले के वर्शन हैं, तो मॉड्यूलर एपीआई पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, इस गाइड में दिए गए निर्देशों का पालन करें.

इस गाइड में आपको नेमस्पेस किए गए एपीआई के बारे में जानकारी है और आप मॉड्यूल बंडलर, जैसे कि webpack या अपग्रेड करने और अपग्रेड करने के लिए रोलअप हम लगातार मॉड्यूलर ऐप्लिकेशन डेवलप कर रहे हैं.

अपने डेवलपमेंट एनवायरमेंट में मॉड्यूल बंडलर का इस्तेमाल करना अच्छा होता है सुझाया गया. यदि आप किसी भी एक्सटेंशन का उपयोग नहीं करते हैं, तो आप उसका लाभ नहीं ले पाएंगे ऐप्लिकेशन के कम साइज़ में मॉड्यूलर एपीआई के मुख्य फ़ायदे हैं. आपको इनकी ज़रूरत होगी npm या याn का इस्तेमाल करें.

इस गाइड में, अपग्रेड करने के चरण ऐसे काल्पनिक वेब ऐप्लिकेशन के आधार पर होंगे जो Authentication और Cloud Firestore SDK टूल का इस्तेमाल करता है. उदाहरणों की मदद से, सभी समर्थित सिद्धांतों को अपग्रेड करने के लिए ज़रूरी अवधारणाओं और व्यावहारिक चरणों में महारत हासिल कर सकता है Firebase वेब SDK टूल.

नेमस्पेस की गई (compat) लाइब्रेरी के बारे में जानकारी

Firebase वेब SDK टूल के लिए दो तरह की लाइब्रेरी उपलब्ध हैं:

• मॉड्यूलर - एक नया एपीआई प्लैटफ़ॉर्म, जिसे पेड़ के झटकों को आसान बनाने के लिए डिज़ाइन किया गया है (इस्तेमाल न होने वाले कोड को हटाना) अपने वेब ऐप्लिकेशन को जितना हो सके उतना छोटा और तेज़ बनाएं.
• नेमस्पेस (compat) - एपीआई का एक जाना-पहचाना प्लैटफ़ॉर्म, जो पूरी तरह से कम सुरक्षित SDK के पुराने वर्शन हैं, जो आपको सभी वर्शन में बदलाव किए बिना अपग्रेड करने की अनुमति देते हैं एक ही बार में ट्रिगर किया जा सकता है. कॉम्पट लाइब्रेरी में कोई आकार या प्रदर्शन नहीं को उनके नेमस्पेस वाले वर्शन से ज़्यादा फ़ायदा मिलता है.

इस गाइड में यह माना गया है कि आपको Google Ads की शर्तों के मुताबिक लाइब्रेरी हैं, जो आपको अपग्रेड करने में मदद करती हैं. ये लाइब्रेरी आपको जारी रखने की अनुमति देती हैं मॉड्यूलर एपीआई के लिए रीफ़ैक्टर किए गए कोड के साथ-साथ नेमस्पेस किए गए कोड का इस्तेमाल करके. इसका मतलब है कि अपग्रेड के दौरान, आपके ऐप्लिकेशन को ज़्यादा आसानी से कंपाइल और डीबग किया जा सकता है प्रोसेस.

Firebase वेब SDK टूल का बहुत कम इस्तेमाल करने वाले ऐप्लिकेशन के लिए—उदाहरण के लिए, एक ऐसा ऐप्लिकेशन जो Authentication API को सिर्फ़ एक आसान कॉल करता है—यह यह कंपैट लाइब्रेरी का इस्तेमाल किए बिना, पुराने नेमस्पेस किए गए कोड को रीफ़ैक्टर करने के लिए प्रैक्टिकल होता है. अगर ऐसे किसी ऐप्लिकेशन को अपग्रेड किया जा रहा है, तो इस गाइड में दिए गए निर्देशों का पालन करें "मॉड्युलर एपीआई" के लिए कॉम्पैट लाइब्रेरी का इस्तेमाल किए बिना.

अपग्रेड की प्रोसेस के बारे में जानकारी

अपग्रेड की प्रोसेस के हर चरण का दायरा सीमित है, ताकि आप सोर्स को डाउनलोड करना होगा और फिर उसे बिना किसी रुकावट के कंपाइल करके चलाना होगा. संक्षेप में, यहां बताया गया है कि ऐप्लिकेशन को अपग्रेड करने के लिए, आपको क्या करना होगा:

1. अपने ऐप्लिकेशन में मॉड्यूलर लाइब्रेरी और कंपेट लाइब्रेरी जोड़ें.
2. शर्तों का पालन करने के लिए, अपने कोड में इंपोर्ट स्टेटमेंट अपडेट करें.
3. किसी एक प्रॉडक्ट (उदाहरण के लिए, Authentication) के कोड को रीफ़ैक्टर करके, में से एक है.
4. ज़रूरी नहीं है: अब, Authentication कॉम्पैट लाइब्रेरी और कॉम्पैट कोड हटाएं Authentication के लिए ऑर्डर करने के लिए जारी रखने से पहले, Authentication के लिए ऐप्लिकेशन के साइज़ के फ़ायदे को महसूस करें.
5. हर प्रॉडक्ट के लिए रीफ़ैक्टर फ़ंक्शन (उदाहरण के लिए, Cloud Firestore, FCM वगैरह) को मॉड्यूलर स्टाइल, कंपाइल और सभी इलाकों के तैयार होने तक जांच पूरी हो जाएगी.
6. शुरुआती कोड को मॉड्यूलर स्टाइल में अपडेट करें.
7. इनमें से सभी कंपेट स्टेटमेंट और कंपेट कोड हटाएं आपका ऐप्लिकेशन.

SDK टूल का सबसे नया वर्शन डाउनलोड करें

शुरुआत करने के लिए, एनपीएम का इस्तेमाल करके मॉड्यूलर लाइब्रेरी और कंपेट लाइब्रेरी पाएं:

npm i firebase@10.13.1

# OR

yarn add firebase@10.13.1

इंपोर्ट को कॉम्पैट में अपडेट करें

डिपेंडेंसी अपडेट करने के बाद भी आपका कोड काम करता रहे, इसके लिए "कंपैट" का इस्तेमाल करने के लिए अपने इंपोर्ट स्टेटमेंट बदलें करें. उदाहरण के लिए:

पहले: वर्शन 8 या इससे पहले का वर्शन

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

बाद में: कंपैट

// compat packages are API compatible with namespaced code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

मॉड्यूलर स्टाइल को ध्यान में रखें

वहीं, नेमस्पेस किए गए एपीआई, डॉट-चेन नेमस्पेस और सेवा पर आधारित होते हैं पैटर्न है, मॉड्यूलर अप्रोच का मतलब है कि आपका कोड व्यवस्थित मुख्य तौर पर, फ़ंक्शन के आस-पास. मॉड्यूलर एपीआई में, firebase/app पैकेज और अन्य पैकेज व्यापक एक्सपोर्ट नहीं देते हैं जिसमें तरीकों का इस्तेमाल करें. इसके बजाय, पैकेज अलग-अलग फ़ंक्शन को एक्सपोर्ट करते हैं.

मॉड्यूलर एपीआई में, सेवाओं को पहले आर्ग्युमेंट के तौर पर पास किया जाता है और फिर फ़ंक्शन को बाकी काम के लिए सेवा के ब्यौरे का इस्तेमाल करता है. आइए, देखते हैं कि यह प्रोसेस कैसे काम करती है दो उदाहरण, जो Authentication और Cloud Firestore एपीआई को कॉल का रीफ़ैक्टर करते हैं.

पहला उदाहरण: Authentication फ़ंक्शन की रीफ़ैक्टरिंग

पहले: कंपैट

कॉम्पैट कोड, नेमस्पेस किए गए कोड की तरह ही होता है, लेकिन बदल गए हैं.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

बाद में: मॉड्यूलर

getAuth फ़ंक्शन, firebaseApp को पहले पैरामीटर के तौर पर लेता है. onAuthStateChanged फ़ंक्शन को auth इंस्टेंस से उस तरह से चेन नहीं किया गया है जैसा यह होगा नेमस्पेस किए गए एपीआई में; यह बिना किसी शुल्क के फ़ंक्शन का इस्तेमाल करता है, जो auth को पहले पैरामीटर के रूप में लेता है.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

पुष्टि करने के तरीके getRedirectResult की हैंडलिंग अपडेट करें

मॉड्यूलर एपीआई की मदद से, getRedirectResult में नुकसान पहुंचा सकने वाला बदलाव लागू किया गया है. जब कोई रीडायरेक्ट कार्रवाई नहीं की जाती है, तो मॉड्यूलर एपीआई, नेमस्पेस किए गए एपीआई के उलट null दिखाता है. इससे, null उपयोगकर्ता के साथ UserCredential दिखता है.

पहले: कंपैट

const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
  return null;
}
return result;

बाद में: मॉड्यूलर

const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
  return null;
}
return result;

दूसरा उदाहरण: Cloud Firestore फ़ंक्शन की रीफ़ैक्टरिंग

पहले: कंपैट

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

बाद में: मॉड्यूलर

getFirestore फ़ंक्शन, firebaseApp को पहले पैरामीटर के तौर पर लेता है, जो पहले के उदाहरण में, initializeApp से मिली वैल्यू. ध्यान दें कि क्वेरी बनाने वाला कोड, मॉड्यूलर एपीआई में काफ़ी अलग है; कोई चेनिंग नहीं है और query या where जैसी विधियों को अब फ़्री फ़ंक्शन के तौर पर दिखाया जाता है.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Firestore DocumentSnapshot.exists के रेफ़रंस अपडेट करें

मॉड्यूलर एपीआई की मदद से, नुकसान पहुंचाने वाला बदलाव लागू होता है, जिसमें firestore.DocumentSnapshot.exists को तरीका पर सेट कर दिया गया है. कॉन्टेंट बनाने काम करने का तरीका एक जैसा है. इसकी जांच की जा रही है कि कोई दस्तावेज़ मौजूद है या नहीं लेकिन आपको नए तरीके का इस्तेमाल करने के लिए अपने कोड को रीफ़ैक्टर करना होगा, जैसा कि यहां दिखाया गया है:

before:compat

if (snapshot.exists) {
  console.log("the document exists");
}

बाद में: मॉड्यूलर

if (snapshot.exists()) {
  console.log("the document exists");
}

तीसरा उदाहरण: नेमस्पेस और मॉड्यूलर कोड स्टाइल को एक साथ मिलाना

अपग्रेड के दौरान कॉम्पैट लाइब्रेरी का इस्तेमाल करने से, आपको नेमस्पेस का इस्तेमाल जारी रखने की सुविधा मिलती है मॉड्यूलर एपीआई के लिए रीफ़ैक्टरिंग के साथ कोड भी भेजा जाएगा. इसका मतलब है कि आपको Authentication का रीफ़ैक्टर करने के दौरान, Cloud Firestore के लिए मौजूदा नेमस्पेस कोड या अन्य Firebase SDK कोड से मॉड्यूलर स्टाइल में बदलाव करने के साथ-साथ, दोनों कोड का इस्तेमाल करके ऐप्लिकेशन को कंपाइल भी करता है शैलियां. यही बात नेमस्पेस किए गए और मॉड्यूलर एपीआई कोड के अंदर भी लागू होती है, जैसे कि Cloud Firestore के तौर पर; नई या पुरानी कोड स्टाइल एक साथ मौजूद हो सकती हैं, जब तक कि कॉम्पैट पैकेज इंपोर्ट करने में:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

ध्यान रखें कि भले ही आपका ऐप्लिकेशन कंपाइल किया जाए, लेकिन आपको ऐप्लिकेशन का साइज़ नहीं मिलेगा मॉड्यूलर कोड के फ़ायदे आपको तब तक मिलेंगे, जब तक कि आप कंपेट स्टेटमेंट को पूरी तरह से नहीं हटा देते और कोड मिलेगा.

शुरू करने के लिए इस्तेमाल होने वाला कोड अपडेट करें

मॉड्यूलर सिंटैक्स का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन के शुरू करने वाले कोड को अपडेट करें. हां इस कोड को अपडेट करना महत्वपूर्ण है बाद आपने सभी कोड मिलेगा; ऐसा इसलिए है, क्योंकि firebase.initializeApp() दुनिया भर में शुरू होता है कंपैट और मॉड्यूलर एपीआई के लिए एक अलग स्थिति है, जबकि मॉड्यूलर initializeApp() फ़ंक्शन, मॉड्यूलर के लिए सिर्फ़ स्टेट को शुरू करता है.

पहले: कंपैट

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

बाद में: मॉड्यूलर

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

कॉम्पैट कोड हटाएं

मॉड्यूलर एपीआई के साइज़ से जुड़े फ़ायदों को समझने के लिए, आपको समय-समय पर सभी प्रॉम्प्ट को ऊपर दिखाई गई मॉड्यूलर स्टाइल में बदल दें और सभी शॉर्टकट को हटाएं आपके कोड से import "firebase/compat/* के स्टेटमेंट. काम पूरा हो जाने के बाद, firebase.* ग्लोबल नेमस्पेस या किसी दूसरे रेफ़रंस के तौर पर कोई जानकारी नहीं होनी चाहिए नेमस्पेस की गई एपीआई स्टाइल में कोड.

विंडो से कंप्यूटर लाइब्रेरी का इस्तेमाल करना

मॉड्यूलर एपीआई को इस तरह ऑप्टिमाइज़ किया गया है कि वह ब्राउज़र के बजाय, मॉड्यूल के साथ काम करे window ऑब्जेक्ट. लाइब्रेरी के पिछले वर्शन ने लोड होने की अनुमति दी और window.firebase नेमस्पेस का इस्तेमाल करके, Firebase को मैनेज किया जा सकता है. यह नहीं है का सुझाव दिया जाता है, क्योंकि इससे इस्तेमाल न होने वाले कोड हटाने की अनुमति नहीं मिलती. हालांकि, JavaScript SDK का कंपेट वर्शन, window के साथ काम करता है उन डेवलपर के लिए जो मॉड्यूलर अपग्रेड पाथ को तुरंत शुरू नहीं करना चाहते.

<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

कंपैटबिलिटी लाइब्रेरी में, हुड के नीचे मॉड्यूलर कोड और इसे नेमस्पेस वाले एपीआई के जैसा ही एपीआई उपलब्ध कराता है; तो इसका मतलब है कि आपको namespaced API का संदर्भ देखें और खास जानकारी के लिए नेमस्पेस किए गए कोड स्निपेट. यह तरीका इस्तेमाल नहीं किया जा सकता लंबे समय तक इस्तेमाल के लिए सुझाया गया है, लेकिन पूरी तरह मॉड्यूलर में अपग्रेड करने की शुरुआत के तौर पर लाइब्रेरी.

मॉड्यूलर SDK टूल के फ़ायदे और सीमाएं

पुराने वर्शन की तुलना में, पूरी तरह से मॉड्यूलराइज़ किए गए SDK टूल के ये फ़ायदे हैं:

• मॉड्यूलर SDK टूल की मदद से, ऐप्लिकेशन के साइज़ को बहुत कम किया जा सकता है. यह आधुनिक JavaScript को अपनाता है मॉड्यूल फ़ॉर्मैट, जो "पेड़ के झटकों" की अनुमति देता है ऐसे तरीके जिनमें आप सिर्फ़ उन आर्टफ़ैक्ट को ऐक्सेस करें जिनकी ज़रूरत आपके ऐप्लिकेशन को है. आपके ऐप्लिकेशन के हिसाब से, मॉड्यूलर SDK टूल का इस्तेमाल करके, मिलने वाले ट्री के झटकों का नतीजा, नेमस्पेस किए गए एपीआई का इस्तेमाल करके बनाया गया तुलना करने लायक ऐप्लिकेशन.
• मॉड्यूलर SDK टूल को, लगातार हो रही सुविधाओं के डेवलपमेंट का फ़ायदा मिलता रहेगा. जबकि नेमस्पेसेड एपीआई ऐसा नहीं करेगा.