জাভাস্ক্রিপ্ট ইম্পোর্ট অ্যাট্রিবিউটস: JSON মডিউল লোড করার আধুনিক, নিরাপদ উপায়

বহু বছর ধরে, জাভাস্ক্রিপ্ট ডেভেলপাররা একটি আপাতদৃষ্টিতে সহজ কাজ নিয়ে संघर्ष করেছেন: JSON ফাইল লোড করা। যদিও জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন (JSON) ওয়েবে ডেটা আদান-প্রদানের জন্য ডি ফ্যাক্টো স্ট্যান্ডার্ড, জাভাস্ক্রিপ্ট মডিউলে এটিকে নির্বিঘ্নে একীভূত করা বয়লারপ্লেট, ওয়ার্কঅ্যারাউন্ড এবং সম্ভাব্য নিরাপত্তা ঝুঁকির একটি যাত্রা ছিল। Node.js-এ সিনক্রোনাস ফাইল রিড থেকে শুরু করে ব্রাউজারে ভার্বোস `fetch` কল পর্যন্ত, সমাধানগুলি নেটিভ ফিচারের চেয়ে প্যাচের মতো মনে হয়েছে। সেই যুগের এখন অবসান ঘটছে।

ইম্পোর্ট অ্যাট্রিবিউটস-এর জগতে আপনাকে স্বাগতম, এটি ECMAScript ভাষার নিয়ন্ত্রক কমিটি TC39 দ্বারা প্রমিত একটি আধুনিক, নিরাপদ এবং চমৎকার সমাধান। এই ফিচারটি, যা সহজ কিন্তু শক্তিশালী `with { type: 'json' }` সিনট্যাক্স দিয়ে চালু হয়েছে, তা নন-জাভাস্ক্রিপ্ট অ্যাসেটগুলি, বিশেষ করে সবচেয়ে সাধারণ অ্যাসেট JSON, হ্যান্ডেল করার পদ্ধতিতে বিপ্লব আনছে। এই নিবন্ধটি বিশ্বব্যাপী ডেভেলপারদের জন্য একটি বিস্তৃত নির্দেশিকা প্রদান করে যে ইম্পোর্ট অ্যাট্রিবিউটস কী, তারা কোন জটিল সমস্যাগুলি সমাধান করে এবং কীভাবে আপনি আজই এগুলি ব্যবহার করে আরও পরিচ্ছন্ন, নিরাপদ এবং কার্যকর কোড লিখতে পারেন।

পুরানো বিশ্ব: জাভাস্ক্রিপ্টে JSON হ্যান্ডেল করার দিকে এক ঝলক

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

সার্ভার-সাইড (Node.js): `require()` এবং `fs` যুগ

CommonJS মডিউল সিস্টেমে, যা বহু বছর ধরে Node.js-এর নেটিভ ছিল, JSON ইম্পোর্ট করা প্রতারণামূলকভাবে সহজ ছিল:

// একটি CommonJS ফাইলে (যেমন, index.js) const config = require('./config.json'); console.log(config.database.host);

এটি সুন্দরভাবে কাজ করত। Node.js স্বয়ংক্রিয়ভাবে JSON ফাইলটিকে একটি জাভাস্ক্রিপ্ট অবজেক্টে পার্স করত। যাইহোক, ECMAScript মডিউল (ESM)-এর দিকে বিশ্বব্যাপী পরিবর্তনের সাথে, এই সিনক্রোনাস `require()` ফাংশনটি আধুনিক জাভাস্ক্রিপ্টের অ্যাসিঙ্ক্রোনাস, টপ-লেভেল-অ্যাওয়েট প্রকৃতির সাথে বেমানান হয়ে পড়ে। এর সরাসরি ESM সমতুল্য, `import`, প্রাথমিকভাবে JSON মডিউল সমর্থন করত না, যা ডেভেলপারদের পুরানো, আরও ম্যানুয়াল পদ্ধতিতে ফিরে যেতে বাধ্য করেছিল:

// একটি ESM ফাইলে ম্যানুয়াল ফাইল রিডিং (যেমন, index.mjs) import fs from 'fs'; import path from 'path'; const configPath = path.resolve('config.json'); const configFile = fs.readFileSync(configPath, 'utf8'); const config = JSON.parse(configFile); console.log(config.database.host);

এই পদ্ধতির বেশ কিছু অসুবিধা রয়েছে:

• শব্দবাহুল্য: একটিমাত্র কাজের জন্য একাধিক লাইনের বয়লারপ্লেট কোড প্রয়োজন হয়।
• সিনক্রোনাস I/O: `fs.readFileSync` একটি ব্লকিং অপারেশন, যা উচ্চ কনকারেন্সি অ্যাপ্লিকেশনগুলিতে পারফরম্যান্সের জন্য একটি বাধা হতে পারে। একটি অ্যাসিঙ্ক্রোনাস সংস্করণ (`fs.readFile`) কলব্যাক বা প্রমিসসহ আরও বেশি বয়লারপ্লেট যোগ করে।
• ইন্টিগ্রেশনের অভাব: এটি মডিউল সিস্টেম থেকে বিচ্ছিন্ন মনে হয়, JSON ফাইলটিকে একটি সাধারণ টেক্সট ফাইল হিসাবে বিবেচনা করে যার ম্যানুয়াল পার্সিং প্রয়োজন।

ক্লায়েন্ট-সাইড (ব্রাউজার): `fetch` API বয়লারপ্লেট

ব্রাউজারে, ডেভেলপাররা সার্ভার থেকে JSON ডেটা লোড করার জন্য দীর্ঘকাল ধরে `fetch` API-এর উপর নির্ভর করেছেন। যদিও এটি শক্তিশালী এবং নমনীয়, তবে যা একটি সহজবোধ্য ইম্পোর্ট হওয়া উচিত তার জন্য এটি বেশ ভার্বোস।

// ক্লাসিক fetch প্যাটার্ন let config; fetch('/config.json') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON বডি পার্স করে }) .then(data => { config = data; console.log(config.api.key); }) .catch(error => console.error('Error fetching config:', error));

এই প্যাটার্নটি কার্যকর হলেও, এতে কিছু সমস্যা রয়েছে:

• বয়লারপ্লেট: প্রতিটি JSON লোডের জন্য প্রমিসের একটি অনুরূপ চেইন, প্রতিক্রিয়া পরীক্ষা এবং ত্রুটি হ্যান্ডলিং প্রয়োজন।
• অ্যাসিঙ্ক্রোনিসিটির ওভারহেড: `fetch`-এর অ্যাসিঙ্ক্রোনাস প্রকৃতি পরিচালনা করা অ্যাপ্লিকেশনের লজিককে জটিল করে তুলতে পারে, প্রায়শই লোডিং পর্যায়টি পরিচালনা করার জন্য স্টেট ম্যানেজমেন্টের প্রয়োজন হয়।
• স্ট্যাটিক অ্যানালাইসিসের অভাব: যেহেতু এটি একটি রানটাইম কল, তাই বিল্ড টুলগুলি সহজেই এই নির্ভরতা বিশ্লেষণ করতে পারে না, যা অপটিমাইজেশনের সুযোগ হারাতে পারে।

এক ধাপ এগিয়ে: অ্যাসারশনসহ ডাইনামিক `import()` (পূর্বসূরি)

এই চ্যালেঞ্জগুলো উপলব্ধি করে, TC39 কমিটি প্রথমে ইম্পোর্ট অ্যাসারশন প্রস্তাব করেছিল। এটি একটি সমাধানের দিকে একটি গুরুত্বপূর্ণ পদক্ষেপ ছিল, যা ডেভেলপারদের একটি ইম্পোর্ট সম্পর্কে মেটাডেটা প্রদান করার অনুমতি দেয়।

// আসল ইম্পোর্ট অ্যাসারশন প্রস্তাব const configModule = await import('./config.json', { assert: { type: 'json' } }); const config = configModule.default;

এটি একটি বিশাল উন্নতি ছিল। এটি JSON লোডিংকে ESM সিস্টেমে একীভূত করেছে। `assert` ক্লজ জাভাস্ক্রিপ্ট ইঞ্জিনকে যাচাই করতে বলত যে লোড করা রিসোর্সটি সত্যিই একটি JSON ফাইল কিনা। যাইহোক, প্রমিতকরণ প্রক্রিয়ার সময়, একটি গুরুত্বপূর্ণ শব্দার্থগত পার্থক্য ortaya আসে, যা এটিকে ইম্পোর্ট অ্যাট্রিবিউটসে রূপান্তরিত করে।

ইম্পোর্ট অ্যাট্রিবিউটসের আগমন: একটি ঘোষণামূলক এবং নিরাপদ পদ্ধতি

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

স্ট্যাটিক ইম্পোর্ট: import config from './config.json' with { type: 'json' };

ডাইনামিক ইম্পোর্ট: const configModule = await import('./config.json', { with: { type: 'json' } }); const config = configModule.default;

`with` কীওয়ার্ড: শুধু একটি নাম পরিবর্তনের চেয়েও বেশি কিছু

`assert` থেকে `with`-এ পরিবর্তনটি কেবল বাহ্যিক নয়। এটি উদ্দেশ্যের একটি মৌলিক পরিবর্তনকে প্রতিফলিত করে:

• `assert { type: 'json' }`: এই সিনট্যাক্সটি একটি পোস্ট-লোড ভেরিফিকেশন বা লোড-পরবর্তী যাচাইকরণ বোঝাতো। ইঞ্জিন মডিউলটি ফেচ করবে এবং তারপর পরীক্ষা করবে যে এটি অ্যাসারশনের সাথে মেলে কিনা। যদি না মেলে, তবে এটি একটি ত্রুটি থ্রো করবে। এটি প্রাথমিকভাবে একটি নিরাপত্তা পরীক্ষা ছিল।
• `with { type: 'json' }`: এই সিনট্যাক্সটি একটি প্রি-লোড ডিরেক্টিভ বা লোড-পূর্ববর্তী নির্দেশ বোঝায়। এটি হোস্ট পরিবেশকে (ব্রাউজার বা Node.js) শুরু থেকেই মডিউলটি কীভাবে লোড এবং পার্স করতে হবে সে সম্পর্কে তথ্য প্রদান করে। এটি কেবল একটি পরীক্ষা নয়; এটি একটি নির্দেশ।

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

এটি কেন একটি গেম চেঞ্জার? নিরাপত্তার অপরিহার্যতা

ইম্পোর্ট অ্যাট্রিবিউটসের সবচেয়ে গুরুত্বপূর্ণ সুবিধা হল নিরাপত্তা। এগুলি MIME-টাইপ কনফিউশন নামে পরিচিত এক শ্রেণীর আক্রমণ প্রতিরোধ করার জন্য ডিজাইন করা হয়েছে, যা রিমোট কোড এক্সিকিউশন (RCE)-এর কারণ হতে পারে।

অস্পষ্ট ইম্পোর্টের সাথে RCE ঝুঁকি

ইম্পোর্ট অ্যাট্রিবিউটস ছাড়া এমন একটি পরিস্থিতি কল্পনা করুন যেখানে একটি সার্ভার থেকে কনফিগারেশন ফাইল লোড করার জন্য একটি ডাইনামিক ইম্পোর্ট ব্যবহার করা হয়:

// সম্ভাব্য অনিরাপদ ইম্পোর্ট const { settings } = await import('https://api.example.com/user-settings.json');

যদি `api.example.com`-এর সার্ভারটি আপোস করা হয়? একজন দূষিত অভিনেতা `.json` এক্সটেনশনটি রেখেও `user-settings.json` এন্ডপয়েন্টটিকে একটি JSON ফাইলের পরিবর্তে একটি জাভাস্ক্রিপ্ট ফাইল পরিবেশন করার জন্য পরিবর্তন করতে পারে। সার্ভারটি `Content-Type` হেডার `text/javascript`-সহ এক্সিকিউটেবল কোড ফেরত পাঠাবে।

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

ইম্পোর্ট অ্যাট্রিবিউটস কীভাবে ঝুঁকি হ্রাস করে

ইম্পোর্ট অ্যাট্রিবিউটস এই সমস্যাটি চমৎকারভাবে সমাধান করে। যখন আপনি অ্যাট্রিবিউটসহ ইম্পোর্টটি লেখেন, তখন আপনি ইঞ্জিনের সাথে একটি কঠোর চুক্তি তৈরি করেন:

// নিরাপদ ইম্পোর্ট const { settings } = await import('https://api.example.com/user-settings.json' with { type: 'json' });

এখন যা ঘটে তা হল:

1. ব্রাউজার `user-settings.json`-এর জন্য অনুরোধ করে।
2. আপোস করা সার্ভারটি জাভাস্ক্রিপ্ট কোড এবং একটি `Content-Type: text/javascript` হেডার দিয়ে প্রতিক্রিয়া জানায়।
3. ব্রাউজারের মডিউল লোডার দেখে যে প্রতিক্রিয়ার MIME টাইপ (`text/javascript`) ইম্পোর্ট অ্যাট্রিবিউটে উল্লেখিত প্রত্যাশিত টাইপ (`json`)-এর সাথে মেলে না।
4. ফাইলটি পার্স বা এক্সিকিউট করার পরিবর্তে, ইঞ্জিন অবিলম্বে একটি `TypeError` থ্রো করে, অপারেশনটি থামিয়ে দেয় এবং কোনো দূষিত কোড চালানো থেকে বিরত রাখে।

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

ব্যবহারিক প্রয়োগ এবং কোড উদাহরণ

JSON-এর জন্য ইম্পোর্ট অ্যাট্রিবিউটস কেবল একটি তাত্ত্বিক নিরাপত্তা বৈশিষ্ট্য নয়। এটি বিভিন্ন ডোমেনে দৈনন্দিন ডেভেলপমেন্টের কাজগুলিতে আর্গোনোমিক উন্নতি নিয়ে আসে।

১. অ্যাপ্লিকেশন কনফিগারেশন লোড করা

এটি ক্লাসিক ব্যবহারের ক্ষেত্র। ম্যানুয়াল ফাইল I/O-এর পরিবর্তে, আপনি এখন সরাসরি এবং স্ট্যাটিক্যালি আপনার কনফিগারেশন ইম্পোর্ট করতে পারেন।

ফাইল: `config.json` { "database": { "host": "db.production.example.com", "port": 5432, "user": "api_user" }, "featureFlags": { "newDashboard": true, "enableLogging": false } }

ফাইল: `database.mjs` import config from './config.json' with { type: 'json' }; export function getDbHost() { return config.database.host; } console.log(`Connecting to database at: ${getDbHost()}`);

এই কোডটি পরিচ্ছন্ন, ঘোষণামূলক এবং মানুষ ও বিল্ড টুল উভয়ের জন্যই বোঝা সহজ।

২. আন্তর্জাতিকীকরণ (i18n) ডেটা

অনুবাদ পরিচালনা করা আরেকটি নিখুঁত ক্ষেত্র। আপনি ভাষার স্ট্রিংগুলি পৃথক JSON ফাইলে সংরক্ষণ করতে এবং প্রয়োজন অনুযায়ী সেগুলি ইম্পোর্ট করতে পারেন।

ফাইল: `locales/en-US.json` { "welcomeMessage": "Hello, welcome to our application!", "logoutButton": "Log Out" }

ফাইল: `locales/es-MX.json` { "welcomeMessage": "¡Hola, bienvenido a nuestra aplicación!", "logoutButton": "Cerrar Sesión" }

ফাইল: `i18n.mjs` // ডিফল্ট ভাষা স্ট্যাটিক্যালি ইম্পোর্ট করুন import defaultStrings from './locales/en-US.json' with { type: 'json' }; // ব্যবহারকারীর পছন্দের উপর ভিত্তি করে অন্যান্য ভাষা ডাইনামিক্যালি ইম্পোর্ট করুন async function getTranslations(locale) { if (locale === 'es-MX') { const module = await import('./locales/es-MX.json', { with: { type: 'json' } }); return module.default; } return defaultStrings; } const userLocale = 'es-MX'; const strings = await getTranslations(userLocale); console.log(strings.welcomeMessage); // স্প্যানিশ বার্তাটি আউটপুট করে

৩. ওয়েব অ্যাপ্লিকেশনের জন্য স্ট্যাটিক ডেটা লোড করা

একটি ড্রপডাউন মেনুকে দেশের তালিকা দিয়ে পূরণ করা বা একটি পণ্য ক্যাটালগ প্রদর্শন করার কথা ভাবুন। এই স্ট্যাটিক ডেটা একটি JSON ফাইলে পরিচালনা করা যায় এবং সরাসরি আপনার কম্পোনেন্টে ইম্পোর্ট করা যায়।

ফাইল: `data/countries.json` [ { "code": "US", "name": "United States" }, { "code": "DE", "name": "Germany" }, { "code": "JP", "name": "Japan" } ]

ফাইল: `CountrySelector.js` (কাল্পনিক কম্পোনেন্ট) import countries from '../data/countries.json' with { type: 'json' }; export class CountrySelector { constructor(elementId) { this.element = document.getElementById(elementId); this.render(); } render() { const options = countries.map(country => `${country.name}` ).join(''); this.element.innerHTML = options; } } // ব্যবহার new CountrySelector('country-dropdown');

এটি পর্দার আড়ালে কীভাবে কাজ করে: হোস্ট পরিবেশের ভূমিকা

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

ব্রাউজারে

একটি ব্রাউজার প্রেক্ষাপটে, প্রক্রিয়াটি HTTP এবং MIME টাইপের মতো ওয়েব স্ট্যান্ডার্ডের সাথে ঘনিষ্ঠভাবে জড়িত।

1. যখন ব্রাউজার `import data from './data.json' with { type: 'json' }`-এর সম্মুখীন হয়, তখন এটি `./data.json`-এর জন্য একটি HTTP GET অনুরোধ শুরু করে।
2. সার্ভার অনুরোধটি গ্রহণ করে এবং JSON সামগ্রী দিয়ে প্রতিক্রিয়া জানানো উচিত। গুরুত্বপূর্ণভাবে, সার্ভারের HTTP প্রতিক্রিয়াতে অবশ্যই এই হেডারটি অন্তর্ভুক্ত থাকতে হবে: `Content-Type: application/json`।
3. ব্রাউজার প্রতিক্রিয়াটি গ্রহণ করে এবং `Content-Type` হেডারটি পরীক্ষা করে।
4. এটি হেডারের মানকে ইম্পোর্ট অ্যাট্রিবিউটে নির্দিষ্ট `type`-এর সাথে তুলনা করে।
5. যদি তারা মেলে, ব্রাউজার প্রতিক্রিয়ার বডিকে JSON হিসাবে পার্স করে এবং মডিউল অবজেক্ট তৈরি করে।
6. যদি তারা না মেলে (যেমন, সার্ভার `text/html` বা `text/javascript` পাঠিয়েছে), ব্রাউজার একটি `TypeError` দিয়ে মডিউল লোড প্রত্যাখ্যান করে।

Node.js এবং অন্যান্য রানটাইমে

স্থানীয় ফাইল সিস্টেম অপারেশনের জন্য, Node.js এবং Deno MIME টাইপ ব্যবহার করে না। পরিবর্তে, ফাইলটি কীভাবে হ্যান্ডেল করতে হবে তা নির্ধারণ করতে তারা ফাইল এক্সটেনশন এবং ইম্পোর্ট অ্যাট্রিবিউটের সংমিশ্রণের উপর নির্ভর করে।

1. যখন Node.js-এর ESM লোডার `import config from './config.json' with { type: 'json' }` দেখে, তখন এটি প্রথমে ফাইলের পাথ শনাক্ত করে।
2. এটি `with { type: 'json' }` অ্যাট্রিবিউটটিকে তার অভ্যন্তরীণ JSON মডিউল লোডার নির্বাচন করার জন্য একটি শক্তিশালী সংকেত হিসাবে ব্যবহার করে।
3. JSON লোডার ডিস্ক থেকে ফাইলের বিষয়বস্তু পড়ে।
4. এটি বিষয়বস্তুকে JSON হিসাবে পার্স করে। যদি ফাইলে অবৈধ JSON থাকে, তবে একটি সিনট্যাক্স ত্রুটি থ্রো করা হয়।
5. একটি মডিউল অবজেক্ট তৈরি করা হয় এবং ফেরত দেওয়া হয়, সাধারণত পার্স করা ডেটা `default` এক্সপোর্ট হিসাবে থাকে।

অ্যাট্রিবিউট থেকে এই সুস্পষ্ট নির্দেশটি অস্পষ্টতা এড়ায়। Node.js নিশ্চিতভাবে জানে যে এটি ফাইলটিকে জাভাস্ক্রিপ্ট হিসাবে এক্সিকিউট করার চেষ্টা করবে না, তার বিষয়বস্তু যাই হোক না কেন।

ব্রাউজার এবং রানটাইম সাপোর্ট: এটি কি প্রোডাকশনের জন্য প্রস্তুত?

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

• Google Chrome / Chromium Engines (Edge, Opera): সংস্করণ 117 থেকে সমর্থিত।
• Mozilla Firefox: সংস্করণ 121 থেকে সমর্থিত।
• Safari (WebKit): সংস্করণ 17.2 থেকে সমর্থিত।
• Node.js: সংস্করণ 21.0 থেকে সম্পূর্ণরূপে সমর্থিত। পূর্ববর্তী সংস্করণগুলিতে (যেমন, v18.19.0+, v20.10.0+), এটি `--experimental-import-attributes` ফ্ল্যাগের পিছনে উপলব্ধ ছিল।
• Deno: একটি প্রগতিশীল রানটাইম হিসাবে, Deno সংস্করণ 1.34 থেকে এই বৈশিষ্ট্যটি (অ্যাসারশন থেকে বিকশিত) সমর্থন করেছে।
• Bun: সংস্করণ 1.0 থেকে সমর্থিত।

যেসব প্রোজেক্টকে পুরানো ব্রাউজার বা Node.js সংস্করণ সমর্থন করতে হবে, তাদের জন্য Vite, Webpack (উপযুক্ত লোডারসহ), এবং Babel (একটি ট্রান্সফর্ম প্লাগইনসহ) এর মতো আধুনিক বিল্ড টুল এবং বান্ডলারগুলি নতুন সিনট্যাক্সটিকে একটি সামঞ্জস্যপূর্ণ ফর্ম্যাটে ট্রান্সপাইল করতে পারে, যা আপনাকে আজই আধুনিক কোড লেখার সুযোগ দেয়।

JSON-এর বাইরে: ইম্পোর্ট অ্যাট্রিবিউটসের ভবিষ্যৎ

যদিও JSON প্রথম এবং সবচেয়ে প্রমুখ ব্যবহারের ক্ষেত্র, `with` সিনট্যাক্সটি প্রসারণযোগ্য হিসাবে ডিজাইন করা হয়েছিল। এটি মডিউল ইম্পোর্টের সাথে মেটাডেটা সংযুক্ত করার জন্য একটি জেনেরিক মেকানিজম সরবরাহ করে, যা অন্যান্য ধরণের নন-জাভাস্ক্রিপ্ট রিসোর্সগুলিকে ES মডিউল সিস্টেমে একীভূত করার পথ প্রশস্ত করে।

CSS মডিউল স্ক্রিপ্ট

দিগন্তে পরবর্তী প্রধান বৈশিষ্ট্য হল CSS মডিউল স্ক্রিপ্ট। এই প্রস্তাবনাটি ডেভেলপারদের সরাসরি CSS স্টাইলশীটগুলিকে মডিউল হিসাবে ইম্পোর্ট করার অনুমতি দেয়:

import sheet from './styles.css' with { type: 'css' }; document.adoptedStyleSheets = [sheet];

যখন একটি CSS ফাইল এইভাবে ইম্পোর্ট করা হয়, তখন এটি একটি `CSSStyleSheet` অবজেক্টে পার্স করা হয় যা একটি ডকুমেন্ট বা শ্যাডো DOM-এ প্রোগ্রাম্যাটিকভাবে প্রয়োগ করা যেতে পারে। এটি ওয়েব কম্পোনেন্ট এবং ডাইনামিক স্টাইলিংয়ের জন্য একটি বিশাল লাফ, যা DOM-এ ম্যানুয়ালি `