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

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

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

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

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 নির্ভরতা (লাইব্রেরি) ইনস্টল এবং পরিচালনা করতে ব্যবহৃত হয়। 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 চালাবেন, তখন ইনস্টলেশন প্রক্রিয়াটি package.json আপডেট করে Firebase কে নির্ভরতা হিসেবে তালিকাভুক্ত করবে:

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

যদি আপনি 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 থেকে ডেভেলপমেন্ট নির্ভরতা হিসেবে ওয়েবপ্যাক ইনস্টল করা।

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

পরবর্তী ধাপ হল ওয়েবপ্যাক বিল্ড চালানোর জন্য একটি npm স্ক্রিপ্ট যোগ করা । package.json ফাইলটি খুলুন এবং "scripts" অবজেক্টে নিম্নলিখিত কী মান জোড়া যোগ করুন।

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

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

npm run build

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

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

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

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

প্রথম ধাপ হল রোলআপ ইনস্টল করা এবং 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(),
  };
}

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