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

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

वर्शन 9 और उसके बाद के वर्शन से, Firebase JavaScript modular 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 नेटवर्क में अच्छी क्वालिटी वाले कई मॉड्यूल बंडलर मौजूद हैं. इस गाइड में webpack, Rollup, और esbuild की मदद से Firebase के इस्तेमाल के बारे में जानकारी दी गई है.

शुरू करना

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

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

पैकेज.json और Firebase इंस्टॉल करना

एनपीएम इंस्टॉल करने के बाद, आपको अपने लोकल प्रोजेक्ट के रूट में 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 चलाने पर, Firebase को डिपेंडेंसी के तौर पर सूची में शामिल करने के लिए, इंस्टॉल करने की प्रोसेस package.json को अपडेट कर देगी:

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

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

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

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

कोड बेस में एक सामान्य सेटअप यह है कि सोर्स कोड को 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 के लिए किसी खास कॉन्फ़िगरेशन की ज़रूरत नहीं है. इस सेक्शन में सामान्य वेबपैक कॉन्फ़िगरेशन शामिल है.

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

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

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

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

webpack चलाने और बिल्ड फ़ोल्डर जनरेट करने के लिए, नीचे दिया गया निर्देश चलाएं.

npm run build

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

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

रोलअप के साथ Firebase का इस्तेमाल करना

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

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

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

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

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

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

npm run build

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

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

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

Firebase ऐप्लिकेशन और 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(),
  };
}

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

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

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

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