ESM মডিউল: আমদানি/রপ্তানি

যখন একটি প্রোগ্রাম বৃদ্ধি পায়, তখন একটি ফাইলে সবকিছু রাখা বিশ্রী হয়ে ওঠে। আধুনিক জাভাস্ক্রিপ্ট ES মডিউল (ESM) দিয়ে সমস্যার সমাধান করে: প্রতিটি ফাইল একটি মডিউল যা রপ্তানি করতে পারে ফাংশন, ধ্রুবক, ক্লাস, এবং অন্যান্য ফাইল আমদানি করতে পারে।

export

আপনি যা প্রকাশ করতে চান তা রপ্তানি করুন। দুটি ফর্ম:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

অথবা, ফাইলের শেষে:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

অন্য ফাইল থেকে:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

অবজেক্ট { somma, PI } হল সেই নামের তালিকা যা আপনি আমদানি করতে চান। তাদের অবশ্যই মিলবে রপ্তানিকৃত নাম।

ডিফল্ট রপ্তানি

প্রতিটি মডিউলের নাম ছাড়াই এক "প্রধান" রপ্তানি থাকতে পারে:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

আপনি স্থানীয়ভাবে নাম নির্বাচন করে এটি আমদানি করুন:

import log from './log.js';
log('ciao');

নাম পরিবর্তন করা হচ্ছে

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

ফাইল প্রতি একটি "নেমস্পেস"

মডিউলগুলি বিচ্ছিন্ন: একটি ফাইলে ঘোষিত একটি ভেরিয়েবল বিশ্বব্যাপী পরিসরে শেষ হয় না। আপনি এটিকে অন্য কোথাও দৃশ্যমান করতে এটি স্পষ্টভাবে রপ্তানি করতে হবে। এই উপর একটি বিশাল উন্নতি ওল্ড-স্কুল JS যেখানে প্রত্যেক <script> ভাগ করেছে window।

চেষ্টা করে দেখুন

নীচের অনুশীলনে আপনি প্রকৃত import/export সিনট্যাক্স লিখবেন না** — স্যান্ডবক্সটি একটি একক ফাইল পরিবর্তে, আমরা আপনাকে কোডটিকে **ছোট আলাদা ফাংশনে** সংগঠিত করতে বলব সহযোগিতা করুন, যেমন আপনি প্রত্যেকে আলাদা ফাইলে থাকলে।

ব্যায়াম পর্যালোচনা করুন