Kodokon kodokon.com

ES मॉड्यूल: import/export, किसी प्रोजेक्ट की संरचना

ES मॉड्यूल के स्टैटिक विश्लेषण का लाभ उठाकर और ज़हरीले बैरल तथा सर्कुलर निर्भरताओं से बचकर अपने प्रोजेक्ट संरचित करें।

8 मिनट · 3 प्रश्न

इस पाठ को Kodokon में खोलें

ES मॉड्यूल स्टैटिक होते हैं: import और export स्टेटमेंट फ़ाइल के पार्स होते समय हल होते हैं, किसी भी कोड के चलने से पहले। यही चीज़ ट्री-शेकिंग (उस कोड को हटाना जो कभी import नहीं होता) और बिल्ड टाइम पर नामकरण की गलतियाँ पकड़ना संभव बनाती है। नेम्ड एक्सपोर्ट या डिफ़ॉल्ट एक्सपोर्ट? नेम्ड एक्सपोर्ट लगभग हर मोर्चे पर जीतते हैं: रीफ़ैक्टर-अनुकूल रीनेमिंग, भरोसेमंद ऑटोकम्प्लीशन, और एक ही चीज़ को दस अलग-अलग नामों से import करने की कोई गुंजाइश नहीं। डिफ़ॉल्ट को उस स्थिति के लिए बचाकर रखें जहाँ मॉड्यूल एक स्पष्ट चीज़ एक्सपोर्ट करता है।

JAVASCRIPT
export const TAX_RATE = 0.2;

export function applyTax(price) {
  return price * (1 + TAX_RATE);
}

export default class Cart {
  items = [];
  add(item) {
    this.items.push(item);
    return this;
  }
}
cart.js: उपयोगिताओं के लिए नेम्ड एक्सपोर्ट, केंद्रीय क्लास के लिए डिफ़ॉल्ट।

उपभोग करने वाले पक्ष पर, चार रूप: नेम्ड import (as के ज़रिए वैकल्पिक उपनाम के साथ), डिफ़ॉल्ट import, नेमस्पेस import (* as), और डायनैमिक import import(), जो किसी नेमस्पेस का प्रॉमिस लौटाता है। यह अंतिम वाला कोड स्प्लिटिंग का बुनियादी घटक है: किसी भारी मॉड्यूल (एडिटर, चार्ट, PDF) को ठीक उसी क्षण लोड करें जब उपयोगकर्ता को उसकी सचमुच ज़रूरत हो।

JAVASCRIPT
import Cart, { applyTax, TAX_RATE } from "./cart.js";
import * as cartModule from "./cart.js";

console.log(applyTax(100), TAX_RATE); // 120 0.2
console.log(cartModule.TAX_RATE); // 0.2

const lazy = await import("./cart.js");
const cart = new lazy.default();
console.log(cart instanceof Cart); // true
एक ही मॉड्यूल के स्टैटिक रूप और डायनैमिक import।

संगठन के लिए, तकनीकी प्रकार (controllers/, helpers/) के बजाय फ़ीचर के अनुसार (features/cart/, features/auth/) विभाजन को प्राथमिकता दें: जो कोड साथ बदलता है वह साथ रहता है, और किसी फ़ीचर को हटाने का मतलब है एक फ़ोल्डर मिटा देना। हर फ़ीचर को एक संकीर्ण एंट्री पॉइंट के ज़रिए उजागर करें और उस एंट्री पॉइंट को दरकिनार करने वाले किसी भी import को सीमा-उल्लंघन मानें।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

  1. ES मॉड्यूल के साथ ट्री-शेकिंग क्या संभव बनाता है?
    • बंडलर यह देखने के लिए कोड चलाते हैं कि क्या उपयोग होता है
    • import और export स्टैटिक होते हैं और कोड चलाए बिना उनका विश्लेषण किया जा सकता है
    • ES मॉड्यूल स्वतः ही डेड कोड को संपीड़ित कर देते हैं
  2. import("./module.js") अभिव्यक्ति क्या लौटाती है?
    • मॉड्यूल नेमस्पेस, सिंक्रोनस रूप से
    • मॉड्यूल नेमस्पेस के साथ हल हुआ एक प्रॉमिस
    • एक फंक्शन जो कॉल होने पर मॉड्यूल लोड करता है
    • केवल मॉड्यूल का डिफ़ॉल्ट एक्सपोर्ट
  3. बैरल फ़ाइलों (एक index जो पूरे फ़ोल्डर को फिर से एक्सपोर्ट करती है) का मुख्य जोखिम क्या है?
    • वे नेम्ड एक्सपोर्ट को असंभव बना देती हैं
    • वे एक ही import के लिए पूरा फ़ोल्डर लोड कर सकती हैं और ट्री-शेकिंग में बाधा डालती हैं
    • वे फ़ोल्डर के डायनैमिक import को रोकती हैं