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

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

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

शुरू करें

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

Node.js इंस्टॉल करने के बाद, ज़्यादातर डेवलपर का सेटअप सही तरीके से हो जाता है. हालांकि, कई डेवलपर को अपना एनवायरमेंट सेट अप करते समय, आम तौर पर आने वाली समस्याएं होती हैं. अगर आपको कोई गड़बड़ी दिखती है, तो पक्का करें कि आपके एनवायरमेंट में npm सीएलआई मौजूद हो. साथ ही, यह भी पक्का करें कि आपके पास सही अनुमतियां सेट अप हों, ताकि आपको 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 कोड बनाने के बारे में ज़्यादा जानना है, तो यह फ़ाइल आपके लिए ज़रूरी है. इस गाइड के लिए, the "dependencies" ऑब्जेक्ट ज़रूरी है. इस ऑब्जेक्ट में, इंस्टॉल की गई लाइब्रेरी और उसके इस्तेमाल किए जा रहे वर्शन का की-वैल्यू पेयर होगा.

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

npm i firebase

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

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

कुंजी, लाइब्रेरी का नाम होती है और वैल्यू, इस्तेमाल किया जाने वाला वर्शन होती है. वर्शन की वैल्यू फ़्लेक्सिबल होती है और इसमें कई वैल्यू शामिल की जा सकती हैं. इसे सिमैंटिक वर्शनिंग या semver कहा जाता है. semver के बारे में ज़्यादा जानने के लिए, सिमैंटिक वर्शनिंग के बारे में 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 के सामान्य कॉन्फ़िगरेशन के बारे में बताया गया है.

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

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 को इंपोर्ट और शुरू करता है. साथ ही, "शहर" दस्तावेज़ लोड करने के लिए, 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 स्क्रिप्ट जोड़ना है webpack बिल्ड को चलाने के लिए. package.json फ़ाइल खोलें और "scripts" ऑब्जेक्ट में यह की-वैल्यू पेयर जोड़ें.

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

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

npm run build

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

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

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

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

पहला चरण, 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 को इंपोर्ट और शुरू करता है. साथ ही, "शहर" दस्तावेज़ लोड करने के लिए, 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 स्क्रिप्ट जोड़ना है rollup बिल्ड को चलाने के लिए. package.json फ़ाइल खोलें और "scripts" ऑब्जेक्ट में यह की-वैल्यू पेयर जोड़ें.

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

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

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 को इंपोर्ट और शुरू करता है. साथ ही, "शहर" दस्तावेज़ लोड करने के लिए, 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 स्क्रिप्ट जोड़ना है esbuild को चलाने के लिए. package.json फ़ाइल खोलें और यह की-वैल्यू पेयर "scripts" ऑब्जेक्ट में जोड़ें.

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

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

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