module — import/export, ES module বনাম CommonJS

১ · এক ফাইল থেকে অনেক ফাইল — module কেন দরকার

শুরুতে প্রোগ্রাম ছোট থাকে। একটি app.js, তাতে পঞ্চাশ লাইন — দাম হিসাব, কার্টে যোগ, পাতায় দেখানো। ছয় মাস পর সেই অনলাইন দোকানের ফাইলটি দুই হাজার লাইন। তিনজন ডেভেলপার একই ফাইলে কাজ করেন, প্রতিদিন merge conflict. কেউ একটি total ভ্যারিয়েবল বানালেন, অন্য কারও লেখা আরেকটি total চুপচাপ সেটিকে মুছে দিল। কোন function কোনটির ওপর নির্ভর করে, কেউ নিশ্চিত নন — তাই কিছু মুছতে সবাই ভয় পান।

সমাধান হলো কোড ভাগ করা — কিন্তু শুধু আলাদা ফাইলে রাখলেই হয় না। ফাইলগুলোর মধ্যে তিনটি নিয়ম চাই: প্রতিটি ফাইলের নিজের গোপন জায়গা থাকবে; কোন জিনিস বাইরে দেওয়া হবে তা স্পষ্ট করে লেখা থাকবে; আর কোন ফাইল কার কাছ থেকে কী নেয়, তাও লেখা থাকবে। এই তিন নিয়ম মেনে চলা ফাইলকেই বলে module.

Module ব্যবস্থা থেকে চারটি বড় সুবিধা আসে:

JavaScript-এ আজ দুটি module ব্যবস্থা পাশাপাশি চলে, আর পেশাদার কাজে দুটোই চিনতে হয়। একটি ভাষার নিজের, ES2015 (ES6) থেকে মানদণ্ডে: ES module, সংক্ষেপে ESM — import আর export. ব্রাউজার আর Node দুই জায়গাতেই চলে, আর নতুন কোডের জন্য এটিই পথ। অন্যটি Node.js-এর পুরোনো ব্যবস্থা CommonJS (CJS) — require() আর module.exports. npm-এর লাখো package আর বহু পুরোনো সার্ভার কোড এখনো এতে লেখা। এই পর্বের বড় অংশ এই দুইয়ের পার্থক্য আর মিলন নিয়ে।

২ · module আসার আগে — global, script-এর ক্রম, IIFE, CommonJS, AMD

১৯৯৫ সালে JavaScript এসেছিল পাতায় ছোট ছোট কাজ করতে — একটি বোতাম চাপলে বার্তা দেখানো। Module-এর কথা কেউ ভাবেনি। একটি পাতায় কয়েকটি <script> থাকলে সবার top-level var আর function একটিই global জায়গায় পড়ত (পর্ব ০৭-এর global scope). এতে তিনটি সমস্যা:

• নামের সংঘর্ষ: আপনার function init() আর একটি slider library-র function init() — যেটি পরে লোড হলো, সেটিই টিকল।
• ক্রমের দাসত্ব: cart.js যদি price.js-এর function ব্যবহার করে, তবে HTML-এ price.js-এর <script> আগে বসাতে হবে। বিশটি ফাইলে এই ক্রম হাতে ঠিক রাখা ছিল দুঃস্বপ্ন — আর কোথাও লেখা থাকত না কে কার ওপর নির্ভর করে।
• সবকিছু সবার: যেকোনো ফাইল যেকোনো global বদলাতে পারত; গোপন রাখার কোনো উপায় ছিল না।

এরপর প্রায় দুই দশক মানুষ নানা কৌশলে এই অভাব পূরণ করেছে। পর্ব ২২-এ দেখেছেন প্রথম কৌশলটি — পুরো ফাইলকে একটি function-এ মুড়ে সাথে সাথে ডাকা (IIFE), আর শুধু একটি object ফেরত দেওয়া (module pattern). এতে গোপনীয়তা এল, কিন্তু নির্ভরতা আর ক্রমের সমস্যা রয়ে গেল। পরের ধাপগুলো:

CommonJS-এর জন্ম ২০০৯ সালে, ব্রাউজারের বাইরে JavaScript চালানোর আন্দোলন থেকে। এর নিয়ম সহজ: require("./price") ডাকলে ফাইলটি পড়া হয়, চালানো হয়, আর তার module.exports ফেরত আসে — সাথে সাথে, synchronous ভাবে। সার্ভারে ফাইল লোকাল ডিস্কে থাকে, তাই এটি দ্রুত। কিন্তু ব্রাউজারে প্রতিটি ফাইল নেটওয়ার্ক থেকে আসে; অপেক্ষার সময় পুরো পাতা আটকে রাখা চলে না। তাই ব্রাউজারের জন্য এল asynchronous AMD, আর পরে Browserify (২০১১) ও webpack-এর মতো bundler — যারা আগেই সব CommonJS ফাইল জুড়ে একটি বড় ফাইল বানিয়ে দিত। দুই শিবিরের এই টানাপোড়েন ভাবনার প্রশ্ন ২-এ।

৩ · ES module-এর ভাষা — export আর import

চলুন একটি অনলাইন দোকানকে চারটি module-এ ভাগ করি: price.js (ভ্যাট আর ছাড়ের হিসাব), format.js (টাকা দেখানো), cart.js (কার্ট) আর main.js (শুরুর ফাইল)।

Named export — নাম ধরে রপ্তানি

export const VAT_RATE = 0.15;                 // ১৫% ভ্যাট

export function addVat(taka) {
  return Math.round(taka * (1 + VAT_RATE));
}

function roundDown(n) { return Math.floor(n / 10) * 10; }   // export নেই — গোপন

export function discount(taka, percent) {
  return roundDown(taka * (1 - percent / 100));
}

যেকোনো ঘোষণার আগে export লিখলে সেটি named export — নিজের নামেই বাইরে যায়। roundDown-এর আগে export নেই, তাই অন্য কোনো ফাইল তাকে দেখতেই পায় না — IIFE ছাড়াই গোপনীয়তা। চাইলে সব ঘোষণা সাধারণভাবে লিখে ফাইলের শেষে একটি তালিকায়ও export করা যায়, আর as দিয়ে বাইরের নাম বদলানো যায়:

const bdt = new Intl.NumberFormat("bn-BD", { style: "currency", currency: "BDT" });

function formatTaka(n) { return bdt.format(n); }   // পর্ব ২০-এর Intl
function formatQty(n) { return `${n}টি`; }

export { formatTaka, formatQty as qty };         // export list, বাইরে নাম "qty"
export default formatTaka;                       // সাথে একটি default export

Default export — ফাইলের “প্রধান” জিনিস

প্রতিটি module-এ সর্বোচ্চ একটি default export থাকতে পারে। আমদানিকারী তাকে যেকোনো নামে ডাকতে পারে, বাঁকা বন্ধনী ছাড়াই। এবার ফাইলগুলো ব্যবহার করুন:

import { addVat, discount } from "./price.js";      // named import
import taka, { qty } from "./format.js";            // default + named একসাথে

const items = [];                                   // গোপন state

export function add(name, price) { items.push({ name, price }); }
export function summary(couponPercent = 0) {
  const sub = items.reduce((sum, i) => sum + i.price, 0);
  return `${qty(items.length)} পণ্য, মোট ${taka(addVat(discount(sub, couponPercent)))}`;
}

import * as cart from "./cart.js";                  // namespace import
import "./analytics.js";                            // শুধু চালানোর জন্য (side effect)

cart.add("চাল ৫ কেজি", 400);
cart.add("ডাল ১ কেজি", 140);
console.log(cart.summary(10));                      // ২টি পণ্য, মোট ৫৫২.০০৳

Named না default — অনেক দল কেন named পছন্দ করে

Default export সুবিধাজনক মনে হয়, কিন্তু বড় প্রজেক্টে তিনটি সমস্যা আনে। এক, প্রতিটি আমদানিকারী নিজের ইচ্ছামতো নাম দেয় — একজন import taka, আরেকজন import formatMoney, তৃতীয়জন import fmt; পুরো কোডে একটি জিনিসের তিন নাম, খোঁজা কঠিন। দুই, editor-এর “সব জায়গায় নাম বদলাও” আর স্বয়ংক্রিয় import প্রস্তাব named export-এ বেশি নির্ভুল কাজ করে। তিন, ভুল নাম লিখলে named import-এ সাথে সাথে error, কিন্তু default-এ যেকোনো নামই “ঠিক”. তাই অনেক দলের নিয়ম: library আর utility-তে শুধু named export; default থাকবে কেবল যেখানে কোনো framework তা চায় (যেমন কিছু React বা Next.js রীতিতে পাতার component).

Re-export আর barrel file — সুবিধা ও দাম

অনেক ফাইলের export এক জায়গা থেকে দেওয়ার জন্য একটি ফাইল অন্যদের export আবার রপ্তানি করতে পারে — re-export:

export * from "./price.js";                        // সব named export আবার রপ্তানি
export { default as taka, qty } from "./format.js"; // বাছাই করে, নাম বদলে
export * as cart from "./cart.js";                 // namespace হিসেবে (ES2020)

এখন বাকি কোড শুধু লেখে import { addVat, taka } from "./shop/index.js". এমন সংগ্রাহক ফাইলকে বলে barrel file. ছোট, স্থির সংগ্রহে এটি পরিচ্ছন্ন। কিন্তু দামটি লুকানো: একটি জিনিস চাইলেও ব্রাউজার, Node বা test runner-কে barrel-এর পেছনের সব ফাইল খুঁজে, নামিয়ে, parse করতে হয়। শত শত ফাইলের barrel-এ development server ধীর হয়, test শুরু হতে দেরি হয়, circular dependency (অংশ ৫) সহজে তৈরি হয়, আর tree shaking-ও সবসময় সব বাদ দিতে পারে না। export *-এ দুটি ফাইলে একই নাম থাকলে সেই নামটি নিঃশব্দে বাদও পড়ে যায়। নিয়ম হিসেবে মনে রাখুন: একটি package-এর বাইরের দরজা হিসেবে ছোট barrel ঠিক আছে; পুরো প্রজেক্টের প্রতিটি ফোল্ডারে বিশাল index.js নয়।

৪ · module কীভাবে লোড হয় — static গঠন, graph, link, evaluate

ES module-এর সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্য: এটি static. import আর export শুধু ফাইলের top level-এ লেখা যায় — if-এর ভেতরে নয়, function-এর ভেতরে নয় — আর from-এর পরের ঠিকানা (module specifier) হতে হবে একটি সরাসরি লেখা string, ভ্যারিয়েবল নয়। এই কড়াকড়ির কারণ: কোনো কোড না চালিয়েই, শুধু পড়ে, ব্রাউজার বা টুল জেনে যায় কোন ফাইল কোন ফাইলের কোন নাম চায়। এই তথ্য দিয়ে তৈরি হয় module graph. নিচে main.js থেকে শুরু করে দোকানের চারটি ফাইল কীভাবে লোড হয়, ধাপে ধাপে দেখুন:

import * as cart from "./cart.js";
import "./analytics.js";   // (সরলতার জন্য ছবিতে বাদ)
// ব্রাউজার: এই ফাইলের নির্ভরতা cart.js — এখনো একটি লাইনও চলেনি
// syntax error থাকলে এখানেই থামবে, কোনো ফাইলই চলবে না

GET /cart.js     → parse → import "./price.js", "./format.js"
// cart.js পড়েই জানা গেল আরও দুটি ফাইল লাগবে
// একটি URL = একটি module — অনেক ফাইল চাইলেও একবারই নামে

GET /price.js  ┐ পাশাপাশি
GET /format.js ┘ → parse → কোনো import নেই
main.js ──► cart.js ──► price.js
               └──────► format.js
// price.js আর format.js — graph-এর "পাতা" (leaf)

cart.js-এর addVat  ──►  price.js-এর addVat (একই memory-ঘর)
cart.js-এর taka    ──►  format.js-এর default
// কেউ যদি লেখে import { addVAT } — বানান ভুল:
SyntaxError: The requested module './price.js' does not provide an export named 'addVAT'

১. price.js   VAT_RATE = 0.15, function-গুলো তৈরি
২. format.js  Intl.NumberFormat তৈরি
৩. cart.js    items = []
৪. main.js    cart.add(...) — এখন সব নির্ভরতা তৈরি

Module-এর ভেতরের চারটি নিয়ম

• নিজের scope: top-level var, let, function — কোনোটিই window-এ বসে না। export না করলে বাইরে অদৃশ্য।
• সবসময় strict mode: "use strict" লিখতে হয় না। ঘোষণা ছাড়া নামে মান বসালে ReferenceError (পর্ব ০৭-এর implicit global আর সম্ভব নয়)।
• top-level this হলো undefined: classic script-এ এটি window, CommonJS-এ module.exports — ES module-এ কিছুই নয়।
• Import hoisted: ফাইলের মাঝখানে import লিখলেও তা কোড চলার আগেই সম্পন্ন হয় (link ধাপে)। তাই ভালো অভ্যাস — সব import ফাইলের মাথায়।

একবারই চলে — তাই module নিজেই singleton

একটি module-কে দশটি ফাইল import করলেও তার top-level কোড একবারই চলে; সবাই একই binding আর একই object পায়। ব্রাউজার প্রতিটি পাতার জন্য URL ধরে একটি module map রাখে, Node রাখে নিজের cache. এর একটি চমৎকার ব্যবহার — অ্যাপের একটিমাত্র কনফিগারেশন object, যাকে বলে singleton:

console.log("config.js চলল");          // যতবারই import হোক, এক লাইন ছাপা হবে
export const config = {
  apiBase: "https://api.rahimstore.example",
  currency: "BDT",
  smsSender: "RAHIMSTORE",
};
// অন্য যেকোনো ফাইল: import { config } from "./config.js";  — সবাই একই object

সতর্কতা: “একবার” মানে একই URL-এর জন্য একবার। ./config.js আর ./config.js?v=2 ব্রাউজারের কাছে দুটি আলাদা module — দুটি আলাদা singleton. আর এই কারণে পরীক্ষার (test) সময় module-এর ভেতরের গোপন state এক test থেকে আরেক test-এ চলে যেতে পারে; পর্ব ৪৮-এ এর প্রতিকার দেখবেন।

Static মানে tree shaking — ESM বনাম CommonJS

Static গঠনের সবচেয়ে বড় পুরস্কার পান ব্যবহারকারী। bundler (পর্ব ৪৬-এ Vite) চূড়ান্ত ফাইল বানানোর সময় দেখে কোন export আসলে কেউ import করেছে; বাকিগুলো ফেলে দেয়। গাছ ঝাঁকিয়ে মরা পাতা ফেলার মতো — তাই নাম tree shaking. CommonJS-এ কেন এটি প্রায় অসম্ভব, দেখুন:

1// price.js — ৪টি export2export function addVat(t) { … }3export function discount(t, p) { … }4export function emi(t, months) { … }5export function bulkPrice(t, n) { … }6import { addVat } from "./price.js";   // ESM7const price = require("./price.cjs");  // CJS8price[userChoice](1000);               // কোনটি? চালানোর সময় জানা যাবে

৫ · Live binding — import কপি নয়, জানালা

পর্ব ১৪-এ দেখেছেন, একটি ভ্যারিয়েবলে আরেকটির মান বসালে সংখ্যার মতো primitive-এর কপি হয়। অনেকে ধরে নেন import-ও তেমন — রপ্তানির মুহূর্তের মান কপি করে আনে। তা নয়। ES module-এর import হলো রপ্তানিকারীর আসল binding-এর দিকে খোলা একটি শুধু-পড়া জানালা। রপ্তানিকারী মান বদলালে জানালা দিয়ে নতুন মানই দেখা যায়; কিন্তু জানালা দিয়ে হাত ঢুকিয়ে মান বদলানো যায় না:

1// counter.js2export let count = 0;3export function increment() { count++; }4// main.js5import { count, increment } from "./counter.js";6console.log(count);7increment(); increment();8console.log(count);9count = 10;

খেয়াল করুন সূক্ষ্ম পার্থক্যটি: binding বদলানো নিষেধ, কিন্তু binding যে object-এর দিকে তাকিয়ে আছে তার ভেতরটা বদলানো যায়। import { config } from "./config.js"; config.currency = "USD"; — এটি চলবে, আর সব ফাইল নতুন মান দেখবে, কারণ সবাই একই object দেখছে। এটি সুবিধা আবার বিপদও; কেউ যেন ভুলে বদলাতে না পারে, সেজন্য Object.freeze(config) দিয়ে রপ্তানি করুন।

এবার সব কথা একসাথে, আসল Node.js 20-এ। নিচের প্রোগ্রাম নিজেই তিনটি ছোট module ফাইল লেখে — একটি ESM price.mjs, একটি ESM cart.mjs যে price আর একটি পুরোনো CommonJS SMS helper (sms.cjs) import করে — তারপর সেগুলো লোড করে:

"use strict";
const fs = require("node:fs");
fs.writeFileSync("price.mjs", `console.log("  (price.mjs চলল)");
export const VAT = 0.15;
export let sold = 0;
export function addVat(tk) { sold++; return Math.round(tk * (1 + VAT)); }
export default (n) => "৳" + n;`);
fs.writeFileSync("sms.cjs", `console.log("  (sms.cjs চলল)");
module.exports = { send: (to, text) => to + "-এ SMS: " + text };`);
fs.writeFileSync("cart.mjs", `import taka, { addVat, sold } from "./price.mjs";
import sms from "./sms.cjs";
export function checkout(items) {
  const total = items.reduce((sum, tk) => sum + addVat(tk), 0);
  console.log("  cart.mjs দেখছে sold =", sold);
  return sms.send("01711", "মোট " + taka(total));
}`);
(async () => {
  const cart = await import("./cart.mjs");
  const price = await import("./price.mjs");
  console.log(cart.checkout([1000, 250]));
  console.log("main দেখছে sold =", price.sold);
  try { price.sold = 99; } catch (e) { console.log(e.name + ":", e.message); }
  const viaRequire = require("./sms.cjs");
  console.log("require আর import একই object?", viaRequire === (await import("./sms.cjs")).default);
})();

Circular dependency — যখন দুই ফাইল একে অপরকে চায়

orders.js import করে customers.js, আর customers.js import করে orders.js — একে বলে circular dependency. ES module এটি অনুমতি দেয়, graph-এ চক্র থাকলে একটি ফাইল আরেকজনের আগে চলবেই। সমস্যা হয় যদি সেই আগের ফাইল top level-এ অন্যজনের এখনো-না-চলা const পড়ে:

1// a.js  (main এটিকে import করে)2import { b } from "./b.js";3export const a = "A";4console.log("a.js দেখছে", b);5// b.js6import { a } from "./a.js";7export const b = "B";8console.log("b.js দেখছে", a);

৬ · import(), import.meta আর top-level await

Dynamic import() — দরকার হলে তবেই লোড

Static import-এর একটি অসুবিধা: graph-এর সব ফাইল শুরুতেই নামে। দোকানের পাতায় একটি “PDF ইনভয়েস নামান” বোতাম আছে; PDF বানানোর library ৩০০ KB, আর শতকরা পাঁচজনও বোতামটি চাপেন না। বাকি পঁচানব্বই জন কেন সেই ৩০০ KB নামাবেন? এর উত্তর dynamic import — import(specifier), যা function-এর মতো দেখতে কিন্তু একটি বিশেষ syntax (ES2020). এটি যেকোনো জায়গায় লেখা যায় — if-এর ভেতরে, event handler-এ — ঠিকানা ভ্যারিয়েবলও হতে পারে, আর ফেরত দেয় একটি Promise, যা module namespace object দিয়ে পূর্ণ হয়:

const btn = document.querySelector("#invoice-btn");
btn.addEventListener("click", async () => {
  btn.disabled = true;
  try {
    const { makeInvoicePdf } = await import("./invoice-pdf.js");   // প্রথম চাপে নামে
    makeInvoicePdf(currentOrder);
  } catch (err) {
    showToast("ইনভয়েস লোড হলো না — নেটওয়ার্ক দেখে আবার চেষ্টা করুন");
  } finally {
    btn.disabled = false;
  }
});

bundler এই import() দেখে invoice-pdf.js আর তার নির্ভরতাগুলোকে একটি আলাদা ছোট ফাইলে (chunk) রাখে — এর নাম code splitting. Route ধরে পাতা ভাগ করা (React-এর lazy), ভারী chart library শুধু রিপোর্ট পাতায়, বাংলা-ইংরেজি অনুবাদের ফাইল ভাষা বাছাইয়ের পর — সবই একই কৌশল। দ্বিতীয়বার চাপলে module আর নামে না, cache থেকে সাথে সাথে আসে। আর নেটওয়ার্কের যেকোনো কাজের মতো এটিও ব্যর্থ হতে পারে, তাই try/catch জরুরি (পর্ব ৩৪)।

import.meta — module নিজের সম্পর্কে জানে

import.meta (ES2020) প্রতিটি module-এর নিজের তথ্যের একটি object. সব জায়গায় আছে import.meta.url — এই module ফাইলের পূর্ণ ঠিকানা। এর সাহায্যে ফাইলের পাশে রাখা জিনিসের ঠিকানা বানানো যায়: new URL("./logo.png", import.meta.url). Node-এ CommonJS-এর __dirname আর __filename ES module-এ নেই; তার বদলে Node 20.11 আর 21.2 থেকে import.meta.dirname আর import.meta.filename. পুরোনো Node-এও চলবে এমন কোড চাইলে fileURLToPath(new URL(".", import.meta.url)). ব্রাউজারে import.meta.dirname নেই — এটি শুধু Node-এর। আর Vite-এর মতো টুল import.meta.env যোগ করে (পর্ব ৪৬) — সেটিও মানদণ্ডের অংশ নয়, টুলের।

Top-level await — module-এর মাথায় অপেক্ষা

ES2022 থেকে module-এর top level-এ, কোনো async function ছাড়াই, await লেখা যায় (top-level await, পর্ব ৩৪)। যেমন const settings = await loadSettings();. তখন যে module একে import করে, তার evaluation এই অপেক্ষা শেষ হওয়া পর্যন্ত থেমে থাকে — তাই একটি ধীর top-level await পুরো অ্যাপের শুরু আটকে দিতে পারে। এটি শুধু ES module-এ চলে; classic script আর CommonJS-এ SyntaxError.

এখন এই তিনটি জিনিস নিজে চালিয়ে দেখুন। নিচের কোড-বক্সটি নিজেই একটি module হিসেবে চলে (<script type="module">). অন্য ফাইল এখানে রাখা যায় না, তাই “ইনভয়েস” module-টি কোডের ভেতরেই একটি data: URL হিসেবে বানানো হয়েছে, তারপর import() দিয়ে লোড:

var shopName = "রহিম স্টোর";
console.log("top-level this:", this);
console.log("var কি window-এ গেল?", "shopName" in window);
try { undeclaredTotal = 5; } catch (e) { console.log("strict mode:", e.name); }

const invoiceSource = `
  console.log("  (invoice module এইমাত্র লোড হলো)");
  export const meta = import.meta.url.slice(0, 5);
  export default function makeInvoice(items) {
    const total = items.reduce((s, i) => s + i.qty * i.price, 0);
    return items.length + "টি লাইন, মোট ৳" + total;
  }`;
const url = "data:text/javascript;charset=utf-8," + encodeURIComponent(invoiceSource);

console.log("বোতাম চাপার আগে: invoice এখনো নামেনি");
const mod = await import(url);                       // top-level await
console.log(mod.default([{ qty: 2, price: 60 }, { qty: 1, price: 450 }]));
console.log("module-এর ঠিকানা শুরু:", mod.meta);
const again = await import(url);
console.log("দ্বিতীয় import — একই module?", again === mod);

৭ · ব্রাউজারে module — type="module", CORS, import map

<!-- module: নিজে থেকেই defer, strict, নিজের scope -->
<script type="module" src="/js/main.js"></script>

<!-- খুব পুরোনো ব্রাউজারের জন্য বিকল্প (আজ প্রায় অপ্রয়োজনীয়) -->
<script nomodule src="/js/legacy-bundle.js"></script>

<!-- আগেভাগে নামিয়ে parse করে রাখো -->
<link rel="modulepreload" href="/js/cart.js">

• নিজে থেকেই deferred: type="module"-এর script HTML পড়া আটকায় না, পাশাপাশি নামে, আর HTML পড়া শেষ হলে লেখার ক্রমে চলে — পর্ব ০২-এর defer-এর মতো। আলাদা করে defer লিখতে হয় না। async দিলে নামানো শেষ হলেই চলে।
• একবারই চলে: একই src-এর module পাতায় দুবার থাকলেও একবার চলে; classic script দুবারই চলত।
• CORS লাগে: অন্য origin থেকে module আনলে সেই সার্ভারকে CORS header দিতে হয় (পর্ব ৪৩)। আর সার্ভারকে ফাইলটি JavaScript-এর MIME type (যেমন text/javascript) দিয়ে পাঠাতে হয় — ভুল type হলে ব্রাউজার চালাবে না।
• ঠিকানায় extension লাগে: ব্রাউজার "./price" থেকে নিজে .js যোগ করে না — "./price.js" লিখতে হয়। bundler এই ছাড় দেয় বলে অনেকে অবাক হন।
• nomodule: module বোঝে এমন ব্রাউজার এই script উপেক্ষা করে, পুরোনোগুলো চালায়। আজকের প্রায় সব ব্রাউজার module বোঝে, তাই নতুন প্রজেক্টে সাধারণত লাগে না।
• modulepreload: graph-এর গভীরের ফাইলগুলো ব্রাউজার একে একে আবিষ্কার করে — main পড়ে cart, cart পড়ে price. এই “জলপ্রপাত” এড়াতে আগেভাগে বলে দেওয়া যায়; ব্রাউজার নামিয়ে parse করে রাখে।

Bare specifier আর import map

Node-এ আপনি লেখেন import confetti from "canvas-confetti" — শুধু package-এর নাম, কোনো ./ বা URL নেই। এমন ঠিকানাকে বলে bare specifier. Node জানে node_modules-এ খুঁজতে হবে, কিন্তু ব্রাউজার জানে না — Chrome/Edge বলে TypeError: Failed to resolve module specifier "canvas-confetti". Relative references must start with either "/", "./", or "../". সাধারণত bundler এই নামগুলোকে আসল ফাইলে বদলে দেয়। bundler ছাড়া পথ হলো import map — নাম থেকে URL-এর একটি তালিকা, পাতার মাথায়:

<script type="importmap">
{
  "imports": {
    "canvas-confetti": "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/+esm",
    "@shop/": "/js/shop/"
  }
}
</script>
<script type="module">
  import confetti from "canvas-confetti";       // এখন ব্রাউজার জানে কোথায়
  import { addVat } from "@shop/price.js";      // → /js/shop/price.js
</script>

Import map প্রথম module script-এর আগে থাকতে হয়। এখন সব প্রধান ব্রাউজারে আছে (Safari-তে ২০২৩ সাল থেকে)। এর ওপর ভর করে “build ধাপ ছাড়াই ওয়েব অ্যাপ”-এর একটি আন্দোলন গড়ে উঠেছে — ভাবনার প্রশ্ন ৫. CDN থেকে কোড আনলে পর্ব ৪৩-এর supply-chain সতর্কতা আর নির্দিষ্ট সংস্করণ লেখার নিয়ম মনে রাখুন।

৮ · CommonJS আর Node-এর নিয়ম — require, .mjs/.cjs, interop

const https = require("node:https");          // যেকোনো জায়গায়, যেকোনো সময়
const path = require("node:path");

function send(to, text) { /* ... SMS gateway-তে অনুরোধ ... */ }
function isValidBdNumber(n) { return /^01[3-9]\d{8}$/.test(n); }

module.exports = { send, isValidBdNumber };   // যা ফেরত যাবে
console.log(__dirname, this === module.exports);   // ফোল্ডারের পথ, true

import https from "node:https";                // শুধু top level-এ
import path from "node:path";

export function send(to, text) { /* ... */ }
export function isValidBdNumber(n) { return /^01[3-9]\d{8}$/.test(n); }

console.log(import.meta.dirname, this);        // ফোল্ডারের পথ, undefined

module.exports বনাম exports — একটি পুরোনো ফাঁদ

Node প্রতিটি ফাইলের শুরুতে কার্যত করে let exports = module.exports = {}; — দুটি নাম, একই খালি object. আর require সবসময় ফেরত দেয় module.exports. তাই exports.send = send; চলে (একই object-এ property যোগ), কিন্তু exports = { send }; কাজ করে না — এটি শুধু স্থানীয় exports নামটিকে নতুন object-এর দিকে ঘুরিয়ে দেয়, module.exports সেই পুরোনো খালি {}-ই থাকে। ফলে require দেয় {}, আর sms.send হয় undefined. নিরাপদ নিয়ম: পুরো জিনিস দিতে চাইলে সবসময় module.exports = ….

CommonJS-এর cache-ও আছে: প্রথম require-এ ফাইল চলে, ফলটি require.cache-এ পূর্ণ পথ ধরে জমা থাকে, পরের সব require সেখান থেকে একই object পায়। Circular-এ CommonJS TDZ error দেয় না, বরং অসম্পূর্ণ module.exports ফেরত দেয় — যা পরে রহস্যময় undefined is not a function হয়ে দেখা দেয়।

Node কীভাবে ঠিক করে ফাইলটি ESM না CJS

{
  "name": "rahim-store",
  "type": "module",
  "exports": {
    ".": { "import": "./dist/index.js", "require": "./dist/index.cjs" },
    "./format": "./dist/format.js"
  }
}

"type": "module" দিলে প্রজেক্টের সব .js ESM; কোনো পুরোনো ফাইল CommonJS রাখতে চাইলে তার নাম .cjs. "exports" field বলে দেয় package-এর বাইরের দরজা কোনগুলো — কে import করলে কোন ফাইল, কে require করলে কোনটি, আর তালিকার বাইরের ভেতরের ফাইল বাইরে থেকে আমদানিই করা যায় না। package.json-এর বাকি ঘর আর npm-এর খুঁটিনাটি পর্ব ৪৬-এ।

ESM আর CJS-এর মিলন (interop)

• ESM থেকে CJS আমদানি — সবসময় চলে। import sms from "./sms.cjs" দিলে module.exports আসে default হিসেবে (ওপরের Node উদাহরণে দেখেছেন)। Named import (import { send } from "./sms.cjs") Node চেষ্টা করে কোড বিশ্লেষণ করে দিতে; সরল module.exports = { … } বা exports.x =-এ সাধারণত চলে, জটিল ক্ষেত্রে নয় — তখন default নিয়ে destructure করুন।
• CJS থেকে ESM — ঐতিহাসিকভাবে শুধু await import(). কারণ ESM-এ top-level await থাকতে পারে, আর synchronous require অপেক্ষা করতে পারে না। নতুন Node-এ require(esm) সম্ভব হয়েছে: Node 22.12 আর 23 থেকে flag ছাড়াই (শুরুতে experimental সতর্কবার্তাসহ), পরে 20.19-এও — শর্ত হলো সেই ESM graph-এ কোথাও top-level await থাকবে না; থাকলে ERR_REQUIRE_ASYNC_MODULE. পুরোনো Node 20-এ require করলে ERR_REQUIRE_ESM.
• JSON module: ESM-এ import data from "./zones.json" with { type: "json" }; — import attributes আর JSON module ES2025-এ মানদণ্ডে এসেছে, Chrome/Edge আর নতুন Node-এ চলে। পুরোনো লেখায় assert { type: "json" } দেখবেন — সেটি পুরোনো খসড়া, এখন বাদ। CommonJS-এ সহজভাবে require("./zones.json").

প্রজেক্ট সাজানো — ধরন নয়, বৈশিষ্ট্য ধরে

নতুনরা প্রায়ই ফোল্ডার বানান ধরন ধরে: utils/, helpers/, services/ — কিছুদিন পর utils.js দুই হাজার লাইনের নতুন “এক ফাইল”. বড় প্রজেক্টে ভালো কাজ করে বৈশিষ্ট্য (feature) ধরে সাজানো: cart/ (cart.js, cart-view.js, cart.test.js), checkout/, products/, আর সত্যিই সবার কাজে লাগে এমন জিনিসের জন্য একটি ছোট shared/ (format.js, config.js). একটি feature-এর সব ফাইল পাশাপাশি, অন্য feature শুধু তার সামনের দরজা দিয়ে আসে, আর একটি feature মুছতে হলে একটি ফোল্ডার মুছলেই হয়।

৯ · AI-এর যুগে — module কোডে AI-এর চেনা ভুল

AI-কে “একটি Node API বানিয়ে দাও” বললে সে প্রায়ই ইন্টারনেটের দশ বছরের লেখা মিশিয়ে ফেলে — কিছু ২০১৫-র CommonJS tutorial থেকে, কিছু ২০২৪-এর ESM docs থেকে। কোড দেখতে ঠিক, কিন্তু চালালেই প্রথম লাইনে error. সবচেয়ে বেশি দেখা ভুলগুলো:

AI-এর লেখা module কোড — যাচাইয়ের চেকলিস্ট

• পুরো প্রজেক্টে একটিই ব্যবস্থা; এক ফাইলে require আর import মেশানো নেই
• package.json-এর "type" আর ফাইলের extension (.js/.mjs/.cjs) মিলছে
• ESM-এ __dirname, __filename, require নেই; লোকাল import-এ extension আছে
• named export ব্যবহার হয়েছে; import-এর নামগুলো সত্যিই export হয়েছে (link-এর SyntaxError নেই)
• বিশাল barrel file আর circular import নেই; ভারী অংশ import()-এ, error সামলানোসহ
• ব্রাউজারের কোড type="module" দিয়ে লোড হয়, আর লোকাল সার্ভারে (file:// নয়) নিজে চালিয়ে দেখেছি