ES Modules

जर तुम्ही रिऍक्ट किंवा तत्सम जावास्क्रिप्ट वर आधारित नवीन टेकनॉलॉजि वापरात असाल तर तुम्हाला import आणि export स्टेटमेंट महित असतील.

तर मुळात आपण import आणि export काय करतो?

तर ते मोड्यूल्स आहेत.

मॉड्यूल म्हणजे वेगवेगळे फंक्शन आहेत जे फाईलद्वारे विभक्त केले जातात आणि असिंक्रोनस लोड केले जातात.

export कीवर्ड वापरून ते export केले जातात; आणि import कीवर्डसह त्यांच्या values import केल्या जाऊ शकतात.

values import आणि export करण्याच्या मूलभूत गोष्टी समजून घेणे आणि वापरणे खूप सोपे आहे, परंतु ES मॉड्यूल्ससह कार्य करण्याचे इतर अनेक मार्ग आहेत जेणेकरुन import आणि export आपल्याला आवश्यक त्या मार्गाने कार्य करेल.

या धड्यात, आपण module import आणि export कसे करायचे हे बघूया.

एक गोष्ट लक्षात ठेवा की static import आणि export  केवळ मॉड्यूलच्या top वरच होऊ शकते.

तुम्ही फंक्शनमधून, स्टेटमेंट किंवा इतर कोणत्याही ब्लॉकमधून static import आणि export करू शकत नाही.

डायनॅमिक import मात्र फंक्शनमधून केले जाऊ शकते; आपण धड्याच्या शेवटी त्याबद्दल बोलू.

Exports 

Default Export 

प्रत्येक मॉड्यूलमध्ये एकच "default" import असतो, जे मॉड्यूलमधून import केलेल्या मुख्य value चे  प्रतिनिधित्व करते.

अधिक गोष्टीसुद्धा export केल्या जाऊ शकतात, परंतु "default" import हे मॉड्यूल define करते.

तुम्ही मॉड्यूलमध्ये फक्त एक डीफॉल्ट एक्सपोर्ट करू शकता.

const sport = new Sport ();
export default sport;

इथे एक बाब लक्षात घ्या की माझ्या डीफॉल्ट एक्सपोर्टमध्ये जोडण्यापूर्वी मला प्रथम value define करावी लागेल.

मला हवे असल्यास, मी माझे मूल्य व्हेरिएबलला न देता त्वरित export करू शकतो.

पण मी ते एक्सपोर्ट करताना एकाच वेळी व्हेरिएबलला assign करू शकत नाही.

आपण फंक्शन डिक्लेरेशन आणि क्लास डिक्लेरेशन बाय डीफॉल्ट व्हेरिएबलला न देता एक्सपोर्ट करू शकतो.

export default function addSport(sport) {
  // ... implementation goes here
}

किंवा असा पण करू शकतो

export default 123;

Named export 

कोणतीही व्हेरिएबल डिक्लेरेशन तयार केल्यावर एक्सपोर्ट करता येते. अशा एक्स्पोर्ट ला named export म्हणतात.

export const sport = new Sport ();

आपण फंक्शन आणि क्लास पण initialize करतानाच export करू शकतो.

export function addSport(sport) {
  // ...कोड
}
export class Sport {
  // ...कोड
}

जर आपल्याला व्हेरिएबल एक्सपोर्ट करायचे असेल जे आधीच define केले आहे, तर आपण ते व्हेरिएबल आपल्या व्हेरिएबलच्या नावाभोवती curly ब्रॅकेट मध्ये टाकू शकतो.

const sport = new Sport();
export { sport };

व्हेरिएबलच्या नावापेक्षा वेगळ्या नावाने export करण्यासाठीआपण as कीवर्ड वापरू शकतो. आपल्याला हवे असल्यास आपण एकाच वेळी इतर व्हेरिएबल्स export करू शकतो.

const sport = new Sport ();
class Game {}

export { sport as s, Game };

Aggregate exports  

एक गोष्ट जी खूप वेळा दिसतेे ती म्हणजे एका मॉड्यूलमधून मॉड्यूल्स import करणे आणि नंतर त्या values त्वरित export करणे. हे असे काहीतरी दिसते.

import sports from "./sports.js";

export { sports };

तुम्ही एकाच वेळी बर्‍याच गोष्टी import आणि export  करता तेव्हा हे कंटाळवाणे होऊ शकते.

ES मॉड्यूल्स आपल्याला एकाच वेळी अनेक values import आणि export करण्यास अनुमती देतात.

export * from "./sports.js";

हे ./fruitBasket.js ची सर्व named exports घेईल आणि त्यांची value पुन्हा export करेल.

Imports  

Default imports  

डीफॉल्ट मूल्य import करताना, आपल्याला त्यास एक नाव नियुक्त करणे आवश्यक आहे. ते डीफॉल्ट असल्याने, आपण त्याला काय नाव देतो याने काही फरक पडत नाही.

import sports from "./sports.js";

आपण एकाच वेळी named आणि default export एकत्र export करू शकतो. हे सर्व imports एका ऑब्जेक्टमध्ये ठेवले जातात आणि डीफॉल्ट export ला "डिफॉल्ट" नाव दिले जाईल.

import * as sports from "./sports.js";

Named imports 

कुठलाही named export आपण curly ब्रॅकेट मध्ये टाकून इम्पोर्ट करू शकतो.

import { sports } from "./sports.js";

आपण named import चे नाव पण बदलू शकतो.

import { sports as s } from "./sports.js";