JavaScriptIntermediate

Modules

import/export, named/default export, dynamic import, ES module, CommonJS — কোড ভাগ ও সংগঠনের বাংলা গাইড।

26টি অংশবাংলা ভাষায়

বড় কোড বেস-কে module-এ ভাগ করলে পরিষ্কার ও পুনরুপযোজ্য হয় — যা যা শিখেছি সেসব টুকরো ফাইলে, ফাইল-থেকে-ফাইলে প্রকাশ করে নেওয়া যায়।

export — পাঠানো

// utils.js
export const PI = 3.1416;

export function add(a, b) {
  return a + b;
}

export class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

export keyword-এর আগে variable/function/class লিখলে সেটি অন্যদের জন্য উন্মুক্ত (named export)।

import — নেওয়া

// app.js
import { PI, add, Point } from "./utils.js";

console.log(add(2, 3));              // 5
console.log(PI);                     // 3.1416
const p = new Point(1, 2);
console.log(p.x);                    // 1

named import-এ same নাম বাঁধা হয়। Browser-এ type=module script অথবা bundler (Vite/Webpack) চলে।

import-এ rename

import { add as sum, PI as mathPI } from "./utils.js";

console.log(sum(1, 2));    // 3
console.log(mathPI);         // 3.1416

default export

// logger.js
export default function log(message) {
  console.log("[LOG]", message);
}

// app.js
import log from "./logger.js";
log("হ্যালো");

প্রতি ফাইল-এ একটি default export — import-এ নিজের নাম দেওয়া যায়। library/component-এর প্রধান export-এর জন্য উপযুক্ত।

সব re-export

// index.js — সব এক জায়গায়
export * from "./utils.js";
export { default as log } from "./logger.js";

// app.js
import { add } from "./index.js";
import log from "./index.js";

Dynamic import

<button id="load">মডিউল লোড</button>

<script type="module">
  const btn = document.getElementById("load");

  btn.addEventListener("click", async () => {
    const { add } = await import("./utils.js");   // click-এ লোড
    console.log(add(4, 5)); // 9
  });
</script>

import() Promise দেয় — দরকার মতো, click-এ বা code-split-এ চালানো যায় — initial bundle ছোট রাখা যায়।

Export-এর পুরো object

// utils.js
export default {
  add,
  PI,
};

// ব্যবহার
import utils from "./utils.js";
utils.add(1, 2);
utils.PI;

CommonJS (Node)

এই অধ্যায়ের export/import ES Module — আধুনিক browser ও Node-এ মান। Node-এ পুরনো CommonJS (module.exports, require) এখনও প্রচলিত — সেই সংক্ষেপ নিচে।

// math.cjs — CommonJS
exports.add = (a, b) => a + b;
module.exports.decide = (a, b) => a / b;

// app.cjs
const { add } = require("./math.cjs");
console.log(add(2, 3)); // 5

ধরন	export পদ্ধতি	import পদ্ধতি	কোথায়
ES Module	`export` / `export default`	`import`	browser + node (`type` module)
CommonJS	`module.exports`	`require`	node (পুরনো)

default vs named গুলি

এক ফাইলে অনেক export দরকার হলে named ব্যবহার, প্রধান export হলে default — বিভ্রান্তি এড়াতে consistent থাকুন।

Interview

"ES module বনাম CommonJS?" — ESM: static import, top-level await, tree-shaking-সহায়ক; CJS: synchronous require, node-উত্তরাধিকার।

Practice

দুটি file: math.js (add/sub/multiply named export) ও app.js (import করে console-এ ফল)।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।