Firebase के साथ मॉड्यूल बंडलर का इस्तेमाल करना

JavaScript मॉड्यूल बंडलर कई काम कर सकते हैं. हालांकि, उनकी सबसे काम की सुविधाओं में से एक यह है कि वे आपके कोड बेस में बाहरी लाइब्रेरी जोड़ सकते हैं और उनका इस्तेमाल कर सकते हैं. मॉड्यूल बंडलर, आपके कोड में इंपोर्ट पाथ को पढ़ते हैं. साथ ही, आपके ऐप्लिकेशन के कोड को इंपोर्ट की गई लाइब्रेरी के कोड के साथ जोड़ते (बंडल करते) हैं.

वर्शन 9 और इसके बाद के वर्शन में, Firebase JavaScript मॉड्यूलर API को मॉड्यूल बंडलर की ऑप्टिमाइज़ेशन सुविधाओं के साथ काम करने के लिए ऑप्टिमाइज़ किया गया है. इससे आपके फ़ाइनल बिल्ड में शामिल Firebase कोड की मात्रा कम हो जाती है.

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getRedirectResult } from 'firebase/auth';

const firebaseApp = initializeApp({ /* config */ });
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => { /* check status */ });

/**
 * getRedirectResult is unused and should not be included in the code base.
 * In addition, there are many other functions within firebase/auth that are
 * not imported and therefore should not be included as well.
 */

लाइब्रेरी से इस्तेमाल न होने वाले कोड को हटाने की इस प्रोसेस को ट्री शेकिंग कहा जाता है. इस कोड को मैन्युअल तरीके से हटाने में बहुत समय लगेगा और इसमें गड़बड़ियां भी हो सकती हैं. हालांकि, मॉड्यूल बंडलर इस कोड को अपने-आप हटा सकते हैं.

JavaScript ईकोसिस्टम में, अच्छी क्वालिटी वाले कई मॉड्यूल बंडलर मौजूद हैं. इस गाइड में, Firebase का इस्तेमाल webpack, Rollup, और esbuild के साथ करने के बारे में बताया गया है.

शुरू करें

इस गाइड का इस्तेमाल करने के लिए, आपके डेवलपमेंट एनवायरमेंट में npm इंस्टॉल होना चाहिए. npm का इस्तेमाल, डिपेंडेंसी (लाइब्रेरी) को इंस्टॉल और मैनेज करने के लिए किया जाता है. npm इंस्टॉल करने के लिए, Node.js इंस्टॉल करें. इसमें npm अपने-आप शामिल होता है.

Node.js इंस्टॉल करने के बाद, ज़्यादातर डेवलपर को सही तरीके से सेट अप कर दिया जाता है. हालांकि, एनवायरमेंट सेट अप करते समय कई डेवलपर को सामान्य समस्याएं आती हैं. अगर आपको कोई गड़बड़ी दिखती है, तो पक्का करें कि आपके एनवायरमेंट में npm CLI मौजूद हो. साथ ही, यह भी पक्का करें कि आपने सही अनुमतियां सेट अप की हों, ताकि आपको sudo कमांड के साथ एडमिन के तौर पर पैकेज इंस्टॉल न करने पड़ें.

package.json और Firebase इंस्टॉल करना

npm इंस्टॉल करने के बाद, आपको अपने लोकल प्रोजेक्ट के रूट में package.json फ़ाइल बनानी होगी. इस फ़ाइल को जनरेट करने के लिए, यह npm कमांड इस्तेमाल करें:

npm init

इससे आपको ज़रूरी जानकारी देने के लिए, विज़र्ड का इस्तेमाल करने का तरीका पता चलेगा. फ़ाइल बन जाने के बाद, वह कुछ इस तरह दिखेगी:

{
  "name": "your-package-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {

  }
}

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

डिपेंडेंसी जोड़ने के लिए, npm install या npm i कमांड का इस्तेमाल किया जाता है.

npm i firebase

npm i firebase चलाने पर, इंस्टॉलेशन प्रोसेस package.json को अपडेट करेगी, ताकि Firebase को डिपेंडेंसी के तौर पर लिस्ट किया जा सके:

  "dependencies": {
    "firebase": "^9.0.0"
  },

कुंजी, लाइब्रेरी का नाम होती है और वैल्यू, इस्तेमाल किया जाने वाला वर्शन होता है. वर्शन वैल्यू में बदलाव किया जा सकता है और इसमें कई वैल्यू स्वीकार की जा सकती हैं. इसे सिमैंटिक वर्शनिंग या सेम्वर कहा जाता है. सेमवर के बारे में ज़्यादा जानने के लिए, सिमैंटिक वर्शनिंग के बारे में npm की गाइड देखें.

सोर्स फ़ोल्डर बनाम बिल्ड फ़ोल्डर

आपके लिखे गए कोड को मॉड्यूल बंडलर पढ़ता है और उसे प्रोसेस करता है. इसके बाद, उसे नई फ़ाइल या फ़ाइलों के सेट के तौर पर आउटपुट करता है. इन दोनों तरह की फ़ाइलों को अलग-अलग रखना ज़रूरी है. मॉड्यूल बंडलर जिस कोड को पढ़ते और प्रोसेस करते हैं उसे "सोर्स" कोड कहा जाता है. इनसे जनरेट होने वाली फ़ाइलों को बिल्ट या "dist" (वितरण) कोड कहा जाता है.

कोड बेस में, सोर्स कोड को src नाम के फ़ोल्डर में और बिल्ट कोड को dist नाम के फ़ोल्डर में सेव किया जाता है.

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js

ऊपर दिए गए उदाहरण में, फ़ाइल स्ट्रक्चर में यह माना गया है कि index.js, animations.js और datalist.js, दोनों को इंपोर्ट करता है. जब मॉड्यूल बंडलर, सोर्स कोड को प्रोसेस करता है, तो वह dist फ़ोल्डर में bundle.js फ़ाइल जनरेट करता है. bundle.js, src फ़ोल्डर में मौजूद फ़ाइलों और इंपोर्ट की गई किसी भी लाइब्रेरी का कॉम्बिनेशन होता है.

अगर Git जैसे सोर्स कंट्रोल सिस्टम का इस्तेमाल किया जा रहा है, तो इस कोड को मुख्य रिपॉज़िटरी में सेव करते समय, dist फ़ोल्डर को अनदेखा करना आम बात है.

एंट्री पॉइंट

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

आइए, फ़ाइल स्ट्रक्चर के पिछले उदाहरण को फिर से देखें.

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js

// src/index.js
import { animate } from './animations';
import { createList } from './datalist';

// This is not real code, but for example purposes only
const theList = createList('users/123/tasks');
theList.addEventListener('loaded', event => {
  animate(theList);
});

src/index.js फ़ाइल को एंट्री पॉइंट माना जाता है, क्योंकि यह ऐप्लिकेशन के लिए ज़रूरी सभी कोड को इंपोर्ट करना शुरू करती है. इस एंट्री पॉइंट फ़ाइल का इस्तेमाल, मॉड्यूल बंडलर करते हैं. इससे बंडलिंग की प्रोसेस शुरू की जाती है.

webpack के साथ Firebase का इस्तेमाल करना

Firebase ऐप्लिकेशन और webpack के लिए, किसी खास कॉन्फ़िगरेशन की ज़रूरत नहीं होती. इस सेक्शन में, webpack के सामान्य कॉन्फ़िगरेशन के बारे में बताया गया है.

पहला चरण, npm से webpack को डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करना है.

npm i webpack webpack-cli -D

अपने लोकल प्रोजेक्ट के रूट में webpack.config.js नाम की फ़ाइल बनाएं और इसमें यह कोड जोड़ें.

const path = require('path');

module.exports = {
  // The entry point file described above
  entry: './src/index.js',
  // The location of the build folder described above
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  devtool: 'eval-source-map',
};

इसके बाद, पक्का करें कि आपने Firebase को डिपेंडेंसी के तौर पर इंस्टॉल किया हो.

npm i firebase

इसके बाद, अपने कोड बेस में Firebase को शुरू करें. नीचे दिए गए कोड में, एंट्री पॉइंट फ़ाइल में Firebase को इंपोर्ट और शुरू किया गया है. साथ ही, "city" दस्तावेज़ को लोड करने के लिए Firestore Lite का इस्तेमाल किया गया है.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

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

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

अगले चरण में, webpack बिल्ड को चलाने के लिए, npm स्क्रिप्ट जोड़ें. package.json फ़ाइल खोलें और "scripts" ऑब्जेक्ट में यह की-वैल्यू पेयर जोड़ें.

  "scripts": {
    "build": "webpack --mode=development"
  },

webpack चलाने और build फ़ोल्डर जनरेट करने के लिए, यह कमांड चलाएं.

npm run build

आखिर में, dist बिल्ड फ़ोल्डर देखें. इसमें bundle.js नाम की एक फ़ाइल होनी चाहिए. इसमें आपका बंडल किया गया ऐप्लिकेशन और डिपेंडेंसी कोड शामिल होता है.

प्रोडक्शन के लिए, webpack बिल्ड को ऑप्टिमाइज़ करने के बारे में ज़्यादा जानने के लिए, "mode" कॉन्फ़िगरेशन सेटिंग के बारे में उनके आधिकारिक दस्तावेज़ देखें.

Rollup के साथ Firebase का इस्तेमाल करना

Firebase ऐप्लिकेशन और रोलअप के लिए, किसी खास कॉन्फ़िगरेशन की ज़रूरत नहीं होती. इस सेक्शन में, रोलअप कॉन्फ़िगरेशन के बारे में सामान्य जानकारी दी गई है.

पहला चरण, Rollup और npm के साथ इंस्टॉल की गई डिपेंडेंसी में इंपोर्ट को मैप करने के लिए इस्तेमाल किए जाने वाले प्लगिन को इंस्टॉल करना है.

npm i rollup @rollup/plugin-node-resolve -D

अपने लोकल प्रोजेक्ट के रूट में rollup.config.js नाम की फ़ाइल बनाएं और इसमें यह कोड जोड़ें.

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // the entry point file described above
  input: 'src/index.js',
  // the output for the build folder described above
  output: {
    file: 'dist/bundle.js',
    // Optional and for development only. This provides the ability to
    // map the built code back to the original source format when debugging.
    sourcemap: 'inline',
    // Configure Rollup to convert your module code to a scoped function
    // that "immediate invokes". See the Rollup documentation for more
    // information: https://rollupjs.org/guide/en/#outputformat
    format: 'iife'
  },
  // Add the plugin to map import paths to dependencies
  // installed with npm
  plugins: [nodeResolve()]
};

इसके बाद, अपने कोड बेस में Firebase को शुरू करें. नीचे दिए गए कोड में, एंट्री पॉइंट फ़ाइल में Firebase को इंपोर्ट और शुरू किया गया है. साथ ही, "city" दस्तावेज़ को लोड करने के लिए Firestore Lite का इस्तेमाल किया गया है.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

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

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

अगला चरण, रोलअप बिल्ड को चलाने के लिए, npm स्क्रिप्ट जोड़ना है. package.json फ़ाइल खोलें और "scripts" ऑब्जेक्ट में यह की-वैल्यू पेयर जोड़ें.

  "scripts": {
    "build": "rollup -c rollup.config.js"
  },

रोलअप चलाने और बिल्ड फ़ोल्डर जनरेट करने के लिए, यह कमांड चलाएं.

npm run build

आखिर में, dist बिल्ड फ़ोल्डर देखें. इसमें bundle.js नाम की एक फ़ाइल होनी चाहिए. इसमें आपका बंडल किया गया ऐप्लिकेशन और डिपेंडेंसी कोड शामिल होता है.

प्रोडक्शन के लिए Rollup बिल्ड को ऑप्टिमाइज़ करने के बारे में ज़्यादा जानने के लिए, प्रोडक्शन बिल्ड के लिए प्लगिन के बारे में उनके आधिकारिक दस्तावेज़ देखें.

esbuild के साथ Firebase का इस्तेमाल करना

Firebase ऐप्लिकेशन और esbuild के लिए, किसी खास कॉन्फ़िगरेशन की ज़रूरत नहीं होती. इस सेक्शन में, esbuild के सामान्य कॉन्फ़िगरेशन के बारे में बताया गया है.

पहला चरण, esbuild को डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करना है.

npm i esbuild -D

अपने लोकल प्रोजेक्ट के रूट में esbuild.config.js नाम की फ़ाइल बनाएं और इसमें यह कोड जोड़ें.

require('esbuild').build({
  // the entry point file described above
  entryPoints: ['src/index.js'],
  // the build folder location described above
  outfile: 'dist/bundle.js',
  bundle: true,
  // Replace with the browser versions you need to target
  target: ['chrome60', 'firefox60', 'safari11', 'edge20'],
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  sourcemap: 'inline',
}).catch(() => process.exit(1))

इसके बाद, अपने कोड बेस में Firebase को शुरू करें. नीचे दिए गए कोड में, एंट्री पॉइंट फ़ाइल में Firebase को इंपोर्ट और शुरू किया गया है. साथ ही, "city" दस्तावेज़ को लोड करने के लिए Firestore Lite का इस्तेमाल किया गया है.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

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

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

अगला चरण, esbuild को चलाने के लिए npm स्क्रिप्ट जोड़ना है. package.json फ़ाइल खोलें और "scripts" ऑब्जेक्ट में यह की-वैल्यू पेयर जोड़ें.

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

आखिर में, dist बिल्ड फ़ोल्डर देखें. इसमें bundle.js नाम की एक फ़ाइल होनी चाहिए. इसमें आपका बंडल किया गया ऐप्लिकेशन और डिपेंडेंसी कोड शामिल होता है.

प्रोडक्शन के लिए esbuild को ऑप्टिमाइज़ करने के बारे में ज़्यादा जानने के लिए, कोड छोटा करने और अन्य ऑप्टिमाइज़ेशन के बारे में उनका आधिकारिक दस्तावेज़ देखें.