Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

ফায়ারবেস সহ মডিউল বান্ডলার ব্যবহার করা

জাভাস্ক্রিপ্ট মডিউল বান্ডলাররা অনেক কিছু করতে পারে, কিন্তু তাদের সবচেয়ে দরকারী বৈশিষ্ট্যগুলির মধ্যে একটি হল আপনার কোড বেসে বাহ্যিক লাইব্রেরি যোগ এবং ব্যবহার করার ক্ষমতা। মডিউল বান্ডলারগুলি আপনার কোডে আমদানি পাথগুলি পড়ে এবং আপনার আমদানি করা লাইব্রেরি কোডের সাথে আপনার অ্যাপ্লিকেশন-নির্দিষ্ট কোডটি একত্রিত করে (বান্ডিল)।

সংস্করণ 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.
 */

লাইব্রেরি থেকে অব্যবহৃত কোড মুছে ফেলার এই প্রক্রিয়াটি গাছ কাঁপানো নামে পরিচিত। এটি অত্যন্ত সময়সাপেক্ষ এবং হাত দ্বারা এই কোডটি ম্যানুয়ালি মুছে ফেলার ত্রুটি হতে পারে, তবে মডিউল বান্ডলাররা এই অপসারণকে স্বয়ংক্রিয় করতে পারে।

জাভাস্ক্রিপ্ট ইকোসিস্টেমে অনেক উচ্চমানের মডিউল বান্ডলার রয়েছে। এই নির্দেশিকাটি সঙ্গে Firebase ব্যবহার আচ্ছাদন উপর দৃষ্টি নিবদ্ধ করা হয় webpack , রোলআপ এবং esbuild

এবার শুরু করা যাক

এই নির্দেশিকাটি আপনাকে আপনার উন্নয়ন পরিবেশে এনপিএম ইনস্টল করতে হবে। এনপিএম নির্ভরতা (লাইব্রেরি) ইনস্টল এবং পরিচালনা করতে ব্যবহৃত হয়। Npm ইনস্টল করার জন্য, Node.js ইনস্টল , যা npm স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত করা হয়েছে।

বেশিরভাগ ডেভেলপাররা Node.js ইনস্টল করার পরে সঠিকভাবে সেট আপ করা হয়। যাইহোক, তাদের পরিবেশ স্থাপন করার সময় অনেক ডেভেলপারদের মধ্যে সাধারণ সমস্যা রয়েছে। আপনি কোনো ত্রুটি পাতিত করা, নিশ্চিত করুন যে আপনার পরিবেশ npm CLI থাকাকে নিশ্চিত করুন এবং আপনার সঠিক অনুমতি স্থাপন আছে আপনি এখন উবুন্টু আদেশের সঙ্গে একজন প্রশাসক হিসেবে প্যাকেজগুলি ইনস্টল করতে হবে না

package.json এবং Firebase ইনস্টল করা

একবার আপনি npm ইনস্টল করা আছে আপনি একটি তৈরি করতে হবে package.json আপনার স্থানীয় প্রকল্প root- এ ফাইল। নিম্নলিখিত এনপিএম কমান্ড দিয়ে এই ফাইলটি তৈরি করুন:

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 , ইনস্টলেশন প্রক্রিয়া আপডেট হবে package.json নির্ভরশীলতা রূপে তালিকা Firebase করুন:

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

কী হল লাইব্রেরির নাম এবং মান হল ব্যবহারের সংস্করণ। সংস্করণের মান নমনীয় এবং মানগুলির একটি পরিসর গ্রহণ করতে পারে। এটি শব্দার্থক সংস্করণ বা সেমভার নামে পরিচিত। Semver সম্পর্কে আরো জানতে, শব্দার্থিক সংস্করণ সম্পর্কে npm নির্দেশিকা দেখুন

উৎস বনাম ফোল্ডার নির্মাণ

আপনার লেখা কোডটি একটি মডিউল বান্ডলার দ্বারা পড়ে এবং প্রক্রিয়া করা হয় এবং তারপর একটি নতুন ফাইল বা ফাইলের সেট হিসাবে আউটপুট হয়। এই দুই ধরনের ফাইল আলাদা করা গুরুত্বপূর্ণ। মডিউল বান্ডলাররা যে কোডটি পড়ে এবং প্রক্রিয়া করে তা "সোর্স" কোড নামে পরিচিত। তারা যে ফাইলগুলি আউটপুট করে সেগুলি বিল্ট বা "ডিস্ট" (বিতরণ) কোড নামে পরিচিত।

কোড ঘাঁটি মধ্যে একটি সাধারণ সেটআপ একটি ফোল্ডার নামক দোকান সোর্স কোড হয় src এবং নামে একটি ফোল্ডার সালে নির্মিত কোড dist

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


- dist
 |_ bundle.js

উপরোক্ত উদাহরণে ফাইলের গঠন সালে যে বিবেচনা index.js আমদানির উভয় animations.js এবং datalist.js । একটি মডিউল bundler সোর্স কোড প্রক্রিয়া যখন এটি উত্পাদন করা হবে bundle.js ফাইল dist ফোল্ডার। bundle.js ফাইল সংমিশ্রণ src ফোল্ডার এবং কোন লাইব্রেরীর আমদানি হিসাবে ভাল।

আপনি এই ধরনের গীত হিসাবে উৎস কন্ট্রোল সিস্টেম ব্যবহার করে থাকেন, এটা উপেক্ষা করা আমার সাধারণ 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 কনফিগারেশন জুড়ে

প্রথম ধাপ হল ডেভেলপমেন্ট নির্ভরতা হিসেবে 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 আরম্ভ করুন। নিচের কোডটি একটি এন্ট্রি পয়েন্ট ফাইলে ফায়ারবেস আমদানি করে এবং আরম্ভ করে এবং একটি "সিটি" ডকুমেন্ট লোড করতে ফায়ারস্টোর লাইট ব্যবহার করে।

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

ওয়েবপ্যাক চালাতে এবং বিল্ড ফোল্ডার তৈরি করতে নিম্নলিখিত কমান্ডটি চালান।

npm run build

অবশেষে, চেক dist বিল্ড ফোল্ডার। এটি একটি ফাইল নামে থাকা উচিত bundle.js যে, আপনার একসাথে আবেদন এবং নির্ভরতা কোড রয়েছে।

উৎপাদনের জন্য আপনার webpack বিল্ড নিখুঁত সম্পর্কে আরো তথ্যের জন্য, উপর তাদের সরকারী ডকুমেন্টেশান দেখুন "মোড" কনফিগারেশন সেটিং

রোলআপের সাথে ফায়ারবেস ব্যবহার করা

ফায়ারবেস অ্যাপস এবং রোলআপের জন্য কোন নির্দিষ্ট কনফিগারেশনের প্রয়োজন নেই। এই বিভাগে একটি সাধারণ রোলআপ কনফিগারেশন রয়েছে।

প্রথম ধাপ হল রোলআপ ইনস্টল করা এবং একটি প্লাগইন যা আমদানি মানচিত্রের উপর নির্ভর করে এনপিএম দিয়ে ইনস্টল করা।

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 আরম্ভ করুন। নিম্নলিখিত কোডটি একটি এন্ট্রি পয়েন্ট ফাইলে ফায়ারবেস আমদানি করে এবং আরম্ভ করে এবং একটি "সিটি" ডকুমেন্ট লোড করতে ফায়ারস্টোর লাইট ব্যবহার করে।

// 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 যে, আপনার একসাথে আবেদন এবং নির্ভরতা কোড রয়েছে।

উৎপাদনের জন্য আপনার রোলআপ বিল্ড নিখুঁত সম্পর্কে আরও তথ্যের জন্য, তাদের সরকারী ডকুমেন্টেশান দেখুন উৎপাদন তৈরী করে জন্য প্লাগ-ইন উপর

Esbuild এর সাথে Firebase ব্যবহার করা

ফায়ারবেস অ্যাপস এবং এসবিল্ডের জন্য কোন নির্দিষ্ট কনফিগারেশনের প্রয়োজন নেই। এই বিভাগে একটি সাধারণ এসবিল্ড কনফিগারেশন রয়েছে।

প্রথম ধাপ হল উন্নয়ন নির্ভরতা হিসাবে এসবিল্ড ইনস্টল করা।

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 আরম্ভ করুন। নিম্নলিখিত কোডটি একটি এন্ট্রি পয়েন্ট ফাইলে ফায়ারবেস আমদানি করে এবং আরম্ভ করে এবং একটি "সিটি" ডকুমেন্ট লোড করতে ফায়ারস্টোর লাইট ব্যবহার করে।

// 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 নিখুঁত সম্পর্কে আরও তথ্যের জন্য, তাদের সরকারী ডকুমেন্টেশান দেখুন minification এবং অন্যান্য অপ্টিমাইজেশন উপর