संस्करण 8 से मॉड्यूलर वेब एसडीके में अपग्रेड करें

वर्तमान में फ़ायरबेस वेब एसडीके संस्करण 8 या इससे पहले के संस्करण का उपयोग करने वाले ऐप्स को इस मार्गदर्शिका में दिए गए निर्देशों का उपयोग करके संस्करण 9 में माइग्रेट करने पर विचार करना चाहिए।

यह मार्गदर्शिका मानती है कि आप संस्करण 8 से परिचित हैं और आप संस्करण 9 के उन्नयन और चल रहे विकास के लिए वेबपैक या रोलअप जैसे मॉड्यूल बंडलर का लाभ उठाएंगे।

अपने विकास परिवेश में मॉड्यूल बंडलर का उपयोग करने की दृढ़ता से अनुशंसा की जाती है। यदि आप एक का उपयोग नहीं करते हैं, तो आप कम ऐप आकार में संस्करण 9 के मुख्य लाभों का लाभ नहीं उठा पाएंगे। एसडीके को स्थापित करने के लिए आपको एनपीएम या यार्न की आवश्यकता होगी।

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

संगत पुस्तकालयों के बारे में

फायरबेस वेब एसडीके संस्करण 9 के लिए दो प्रकार के पुस्तकालय उपलब्ध हैं:

  • मॉड्यूलर - आपके वेब ऐप को यथासंभव छोटा और तेज़ बनाने के लिए ट्री-शेकिंग (अप्रयुक्त कोड को हटाने) की सुविधा के लिए डिज़ाइन की गई एक नई एपीआई सतह।
  • Compat - एक परिचित एपीआई सतह जो संस्करण 8 एसडीके के साथ पूरी तरह से संगत है, जिससे आप अपने सभी फायरबेस कोड को एक बार में बदले बिना संस्करण 9 में अपग्रेड कर सकते हैं। संगत पुस्तकालयों के अपने संस्करण 8 समकक्षों की तुलना में बहुत कम या कोई आकार या प्रदर्शन लाभ नहीं है।

यह मार्गदर्शिका मानती है कि आप अपने उन्नयन को सुविधाजनक बनाने के लिए संस्करण 9 के अनुकूल पुस्तकालयों का लाभ उठाएंगे। ये लाइब्रेरी आपको संस्करण 9 के लिए रिफैक्ट किए गए कोड के साथ संस्करण 8 कोड का उपयोग जारी रखने की अनुमति देती हैं। इसका मतलब है कि आप अपने ऐप को और अधिक आसानी से संकलित और डीबग कर सकते हैं क्योंकि आप अपग्रेड प्रक्रिया के माध्यम से काम करते हैं।

फायरबेस वेब एसडीके के लिए बहुत कम एक्सपोजर वाले ऐप्स के लिए - उदाहरण के लिए, एक ऐप जो प्रमाणीकरण एपीआई के लिए केवल एक साधारण कॉल करता है - यह संस्करण 9 कॉम्पैट लाइब्रेरी का उपयोग किए बिना संस्करण 8 कोड को दोबारा करने के लिए व्यावहारिक हो सकता है। यदि आप इस तरह के ऐप को अपग्रेड कर रहे हैं, तो आप कॉम्पिटिशन लाइब्रेरी का उपयोग किए बिना "संस्करण 9 मॉड्यूलर" के लिए इस गाइड में दिए गए निर्देशों का पालन कर सकते हैं।

अपग्रेड प्रक्रिया के बारे में

अपग्रेड प्रक्रिया के प्रत्येक चरण का दायरा इतना विस्तृत है कि आप अपने ऐप के लिए स्रोत का संपादन समाप्त कर सकते हैं और फिर इसे बिना किसी तोड़-फोड़ के संकलित और चला सकते हैं। संक्षेप में, यहां बताया गया है कि आप किसी ऐप को अपग्रेड करने के लिए क्या करेंगे:

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

संस्करण 9 एसडीके प्राप्त करें

आरंभ करने के लिए, npm का उपयोग करके संस्करण 9 लाइब्रेरी और कॉम्पैट लाइब्रेरी प्राप्त करें:

npm i firebase@9.9.2

# OR

yarn add firebase@9.9.2

आयात को v9 कॉम्पैट में अपडेट करें

अपनी निर्भरता को v8 से v9 बीटा में अपडेट करने के बाद अपने कोड को कार्यशील रखने के लिए, प्रत्येक आयात के "compat" संस्करण का उपयोग करने के लिए अपने आयात विवरण बदलें। उदाहरण के लिए:

इससे पहले: संस्करण 8

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

के बाद: संस्करण 9 संगत

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

मॉड्यूलर शैली के लिए रिफैक्टर

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

संस्करण 9 में, सेवाओं को पहले तर्क के रूप में पारित किया जाता है, और फ़ंक्शन फिर सेवा के विवरण का उपयोग बाकी को करने के लिए करता है। आइए जांच करें कि यह दो उदाहरणों में कैसे काम करता है जो प्रमाणीकरण और क्लाउड फायरस्टोर एपीआई को रिफैक्टर कॉल करता है।

उदाहरण 1: किसी प्रमाणीकरण फ़ंक्शन को पुन: सक्रिय करना

इससे पहले: संस्करण 9 संगत

संस्करण 9 संगत कोड संस्करण 8 कोड के समान है, लेकिन आयात बदल गया है।

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

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

के बाद: संस्करण 9 मॉड्यूलर

getAuth फ़ंक्शन अपने पहले पैरामीटर के रूप में firebaseApp लेता है। onAuthStateChanged फ़ंक्शन को auth इंस्टेंस से जंजीर नहीं बनाया गया है क्योंकि यह संस्करण 8 में होगा; इसके बजाय, यह एक मुफ़्त फ़ंक्शन है जो इसके पहले पैरामीटर के रूप में auth को लेता है।

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

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

उदाहरण 2: क्लाउड फायरस्टोर फ़ंक्शन को फिर से सक्रिय करना

इससे पहले: संस्करण 9 संगत

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);
    });

के बाद: संस्करण 9 मॉड्यूलर

getFirestore फ़ंक्शन अपने पहले पैरामीटर के रूप में firebaseApp लेता है, जो पहले के उदाहरण में initializeApp ऐप से वापस किया गया था। नोट करें कि कैसे संस्करण 9 में क्वेरी बनाने का कोड बहुत अलग है; कोई जंजीर नहीं है, और 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 के संदर्भ अपडेट करें

संस्करण 9 एक ब्रेकिंग परिवर्तन का परिचय देता है जिसमें संपत्ति firestore.DocumentSnapshot.exists को एक विधि में बदल दिया गया है। कार्यक्षमता अनिवार्य रूप से समान है (यह परीक्षण करना कि कोई दस्तावेज़ मौजूद है या नहीं) लेकिन आपको दिखाए गए अनुसार v9 विधि का उपयोग करने के लिए अपने कोड को रिफलेक्टर करना होगा:

इससे पहले: संस्करण 9 संगत

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

के बाद: संस्करण 9 मॉड्यूलर

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

उदाहरण 3: संस्करण 8 और संस्करण 9 कोड शैलियों का संयोजन

अपग्रेड के दौरान कॉम्पेट लाइब्रेरी का उपयोग करने से आप संस्करण 9 के लिए रिफैक्टर किए गए कोड के साथ संस्करण 8 कोड का उपयोग जारी रख सकते हैं। इसका मतलब है कि आप क्लाउड फायरस्टोर के लिए मौजूदा संस्करण 8 कोड रख सकते हैं, जबकि आप प्रमाणीकरण या अन्य फायरबेस एसडीके कोड को संस्करण 9 शैली में रिफैक्टर करते हैं, और अभी भी दोनों कोड शैलियों के साथ अपने ऐप को सफलतापूर्वक संकलित करें। क्लाउड फायरस्टोर जैसे उत्पाद के भीतर संस्करण 8 और संस्करण 9 कोड के लिए भी यही सच है; जब तक आप कॉम्पिटिशन पैकेज आयात कर रहे हैं, तब तक नई और पुरानी कोड शैलियाँ सह-अस्तित्व में रह सकती हैं:

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

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

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

इनिशियलाइज़ेशन कोड अपडेट करें

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

इससे पहले: संस्करण 9 संगत

import firebase from "firebase/compat/app"

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

के बाद: संस्करण 9 मॉड्यूलर

import { initializeApp } from "firebase/app"

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

संगत कोड निकालें

संस्करण 9 मॉड्यूलर एसडीके के आकार के लाभों का एहसास करने के लिए, आपको अंततः ऊपर दिखाए गए मॉड्यूलर शैली में सभी आमंत्रणों को परिवर्तित करना चाहिए और अपने कोड से सभी import "firebase/compat/* कथनों को हटा देना चाहिए। जब ​​आप कर लेंगे, तो कोई नहीं होना चाहिए firebase.* वैश्विक नामस्थान या संस्करण 8 एसडीके शैली में कोई अन्य कोड।

विंडो से कॉम्पिटिशन लाइब्रेरी का उपयोग करना

संस्करण 9 एसडीके ब्राउज़र के window ऑब्जेक्ट के बजाय मॉड्यूल के साथ काम करने के लिए अनुकूलित है। लायब्रेरी के पिछले संस्करणों ने window.firebase नाम स्थान का उपयोग करके window.firebase के लोडिंग और प्रबंधन की अनुमति दी थी। आगे बढ़ने की अनुशंसा नहीं की जाती है क्योंकि यह अप्रयुक्त कोड उन्मूलन की अनुमति नहीं देता है। हालांकि, जावास्क्रिप्ट एसडीके का संगत संस्करण उन डेवलपर्स के लिए window के साथ काम करता है जो मॉड्यूलर अपग्रेड पथ को तुरंत शुरू नहीं करना पसंद करते हैं।

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

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

संस्करण 9 के लाभ और सीमाएं

पूरी तरह से संशोधित संस्करण 9 में पिछले संस्करणों की तुलना में ये फायदे हैं:

  • संस्करण 9 नाटकीय रूप से कम किए गए ऐप आकार को सक्षम करता है। यह आधुनिक जावास्क्रिप्ट मॉड्यूल प्रारूप को अपनाता है, जिससे "ट्री शेकिंग" प्रथाओं की अनुमति मिलती है जिसमें आप केवल अपने ऐप की जरूरत की कलाकृतियों को आयात करते हैं। आपके ऐप के आधार पर, संस्करण 9 के साथ ट्री-शेकिंग का परिणाम संस्करण 8 का उपयोग करके बनाए गए तुलनीय ऐप की तुलना में 80% कम किलोबाइट हो सकता है।
  • संस्करण 9 को चल रहे फीचर विकास से लाभ मिलता रहेगा, जबकि संस्करण 8 को भविष्य में एक बिंदु पर फ्रीज कर दिया जाएगा।