Firebase 将于 4 月 9 日至 11 日重返 Cloud Next 大会。立即报名。

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

सबसे पहले, 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 को इंपोर्ट और शुरू करता है. साथ ही, "शहर" दस्तावेज़ को लोड करने के लिए, 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": "webpack --mode=development"
  },

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

npm run build

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

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

रोलअप के साथ 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()]
};

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

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

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

// 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"
  },

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