এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

সংস্করণ 9 এবং উচ্চতর থেকে, Firebase JavaScript মডুলার 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.
 */

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

জাভাস্ক্রিপ্ট ইকোসিস্টেমে অনেক উচ্চ মানের মডিউল বান্ডলার রয়েছে। এই নির্দেশিকাটি ওয়েবপ্যাক , রোলআপ এবং এসবিল্ড সহ 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": {

  }
}

এই ফাইলটি বিভিন্ন জিনিসের জন্য দায়ী। আপনি যদি মডিউল বান্ডলিং এবং সাধারণভাবে জাভাস্ক্রিপ্ট কোড তৈরির বিষয়ে আরও জানতে চান তবে এটি নিজেকে পরিচিত করার জন্য একটি গুরুত্বপূর্ণ ফাইল। এই গাইডের জন্য গুরুত্বপূর্ণ অংশ হল "dependencies" বস্তু। এই অবজেক্টটি আপনার ইনস্টল করা লাইব্রেরি এবং এটি যে সংস্করণটি ব্যবহার করছে তার একটি মূল মানের জোড়া ধরে রাখবে।

নির্ভরতা যোগ করা হয় npm install বা npm i কমান্ডের মাধ্যমে।

npm i firebase

আপনি যখন npm i firebase চালাবেন, তখন ইনস্টলেশন প্রক্রিয়াটি Firebaseকে নির্ভরতা হিসাবে তালিকাভুক্ত করতে package.json আপডেট করবে:

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

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

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

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

কোড বেসের একটি সাধারণ সেটআপ হল সোর্স কোড src নামক ফোল্ডারে এবং বিল্ট কোড dist নামে একটি ফোল্ডারে সংরক্ষণ করা।

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


- dist
 |_ bundle.js

উপরের উদাহরণের ফাইল কাঠামোতে, বিবেচনা করুন যে index.js animations.js এবং datalist.js উভয়ই আমদানি করে। যখন একটি মডিউল বান্ডলার সোর্স কোড প্রসেস করে তখন এটি dist ফোল্ডারে bundle.js ফাইল তৈরি করবে। 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 ফাইলটিকে এন্ট্রি পয়েন্ট হিসাবে বিবেচনা করা হয় কারণ এটি অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় সমস্ত কোড আমদানি শুরু করে। এই এন্ট্রি পয়েন্ট ফাইলটি মডিউল বান্ডলার দ্বারা বান্ডলিং প্রক্রিয়া শুরু করতে ব্যবহার করা হয়।

ওয়েবপ্যাকের সাথে ফায়ারবেস ব্যবহার করা

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

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

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 আরম্ভ করুন। নিম্নলিখিত কোডটি একটি এন্ট্রি পয়েন্ট ফাইলে ফায়ারবেস আমদানি করে এবং শুরু করে এবং একটি "শহর" নথি লোড করতে 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 স্ক্রিপ্ট যোগ করা । package.json ফাইলটি খুলুন এবং "scripts" অবজেক্টে নিম্নলিখিত কী মান জোড়া যোগ করুন।

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

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

npm run build

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

উৎপাদনের জন্য আপনার ওয়েবপ্যাক বিল্ড অপ্টিমাইজ করার বিষয়ে আরও তথ্যের জন্য, "মোড" কনফিগারেশন সেটিং -এ তাদের অফিসিয়াল ডকুমেন্টেশন দেখুন।

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

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

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

উত্পাদনের জন্য আপনার রোলআপ বিল্ড অপ্টিমাইজ করার বিষয়ে আরও তথ্যের জন্য, প্রোডাকশন বিল্ডের জন্য প্লাগইনগুলিতে তাদের অফিসিয়াল ডকুমেন্টেশন দেখুন।

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