फायरबेस के साथ मॉड्यूल बंडलर्स का उपयोग करना

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

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

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.
 */

किसी लाइब्रेरी से अप्रयुक्त कोड को हटाने की इस प्रक्रिया को ट्री शेकिंग के रूप में जाना जाता है। इस कोड को हाथ से मैन्युअल रूप से हटाने में अत्यधिक समय लगेगा और त्रुटि की संभावना होगी, लेकिन मॉड्यूल बंडलर इस निष्कासन को स्वचालित कर सकते हैं।

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

शुरू हो जाओ

इस मार्गदर्शिका के लिए आवश्यक है कि आपके विकास परिवेश में npm स्थापित हो। npm का उपयोग निर्भरताओं (पुस्तकालयों) को स्थापित और प्रबंधित करने के लिए किया जाता है। एनपीएम स्थापित करने के लिए, Node.js इंस्टॉल करें , जिसमें स्वचालित रूप से एनपीएम शामिल है।

अधिकांश डेवलपर्स Node.js इंस्टॉल करने के बाद ठीक से सेटअप हो जाते हैं। हालाँकि, ऐसी सामान्य समस्याएँ हैं जिनका कई डेवलपर्स को अपना परिवेश स्थापित करते समय सामना करना पड़ता है। यदि आप किसी भी त्रुटि में भाग लेते हैं, तो सुनिश्चित करें कि आपके वातावरण में एनपीएम सीएलआई है और आपके पास उचित अनुमतियां सेट अप हैं ताकि आपको सुडो कमांड के साथ व्यवस्थापक के रूप में पैकेज स्थापित न करना पड़े।

package.json और फायरबेस स्थापित करना

एक बार जब आप 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": {

  }
}

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

निर्भरताएँ जोड़ना npm install या npm i कमांड के माध्यम से किया जाता है।

npm i firebase

जब आप npm i firebase चलाते हैं, तो इंस्टॉलेशन प्रक्रिया Firebase को निर्भरता के रूप में सूचीबद्ध करने के लिए package.json अपडेट कर देगी:

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

कुंजी लाइब्रेरी का नाम है और मान उपयोग किया जाने वाला संस्करण है। संस्करण मान लचीला है और मानों की एक श्रृंखला को स्वीकार कर सकता है। इसे सिमेंटिक वर्जनिंग या सेम्वर के रूप में जाना जाता है। सेम्वर के बारे में अधिक जानने के लिए, सिमेंटिक वर्जनिंग के बारे में एनपीएम की मार्गदर्शिका देखें

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

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

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

वेबपैक के साथ फायरबेस का उपयोग करना

फायरबेस ऐप्स और वेबपैक के लिए किसी विशिष्ट कॉन्फ़िगरेशन की आवश्यकता नहीं है। यह अनुभाग सामान्य वेबपैक कॉन्फ़िगरेशन को कवर करता है

पहला कदम विकास निर्भरता के रूप में एनपीएम से वेबपैक स्थापित करना है।

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',
};

फिर सुनिश्चित करें कि आपके पास निर्भरता के रूप में फायरबेस स्थापित है।

npm i firebase

फिर अपने कोड बेस में फायरबेस को इनिशियलाइज़ करें। निम्नलिखित कोड एक प्रवेश बिंदु फ़ाइल में फायरबेस को आयात और आरंभ करता है और "शहर" दस्तावेज़ को लोड करने के लिए फायरस्टोर लाइट का उपयोग करता है।

// 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": "webpack --mode=development"
  },

वेबपैक चलाने और बिल्ड फ़ोल्डर जेनरेट करने के लिए निम्न कमांड चलाएँ।

npm run build

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

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

रोलअप के साथ फायरबेस का उपयोग करना

फायरबेस ऐप्स और रोलअप के लिए किसी विशिष्ट कॉन्फ़िगरेशन की आवश्यकता नहीं है। यह अनुभाग सामान्य रोलअप कॉन्फ़िगरेशन को कवर करता है.

पहला कदम रोलअप और एक प्लगइन स्थापित करना है जिसका उपयोग एनपीएम के साथ स्थापित निर्भरता में आयात को मैप करने के लिए किया जाता है।

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

फिर अपने कोड बेस में फायरबेस को इनिशियलाइज़ करें। निम्नलिखित कोड एक प्रवेश बिंदु फ़ाइल में फायरबेस को आयात और आरंभ करता है और "शहर" दस्तावेज़ को लोड करने के लिए फायरस्टोर लाइट का उपयोग करता है।

// 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 के लिए किसी विशिष्ट कॉन्फ़िगरेशन की आवश्यकता नहीं है। यह अनुभाग सामान्य 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))

फिर अपने कोड बेस में फायरबेस को इनिशियलाइज़ करें। निम्नलिखित कोड एक प्रवेश बिंदु फ़ाइल में फायरबेस को आयात और आरंभ करता है और "शहर" दस्तावेज़ को लोड करने के लिए फायरस्टोर लाइट का उपयोग करता है।

// 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 नाम की एक फ़ाइल होनी चाहिए जिसमें आपका बंडल एप्लिकेशन और निर्भरता कोड शामिल हो।

उत्पादन के लिए ईएसबिल्ड को अनुकूलित करने के बारे में अधिक जानकारी के लिए, लघुकरण और अन्य अनुकूलन पर उनका आधिकारिक दस्तावेज़ देखें।