एक JS फ़ाइल को दूसरे के अंदर कैसे कनेक्ट करें: 5 कार्यशील विधियाँ

"अपने कोड को टुकड़ों में जोड़ें": एक JS फ़ाइल को दूसरे में सीधे क्यों नहीं डाल सकते

जो कोई भी JavaScript पर दो सप्ताह से अधिक समय से लिख रहा है, वह देर-सबेर एक दीवार से टकराता है: "मैं दूसरी फ़ाइल के फ़ंक्शन का उपयोग कैसे करूँ? क्या मुझे उन्हें इधर-उधर कॉपी करना होगा?!" पुराना और अच्छा Stack Overflow इस बारे में अच्छी तरह से जानता है — प्रश्न "How do I include a JavaScript file in another JavaScript file?" हर महीने हज़ारों बार देखा जाता है। और यह तर्कसंगत है: वास्तविक परियोजनाओं में कोड तेज़ी से बढ़ता है, और सब कुछ एक फ़ाइल में रखना अराजकता का रास्ता है।

इस लेख में हम एक JS फ़ाइल को दूसरे के अंदर कनेक्ट करने के 5 सिद्ध तरीकों पर चर्चा करेंगे। प्राचीन विधियों से लेकर आधुनिक मानकों तक। चलिए शुरू करते हैं!

विधि 1: HTML में क्लासिक <script>

सबसे सरल और प्राचीन तरीका — बस अपनी HTML फ़ाइल में कई <script> टैग जोड़ना है। लेकिन एक बारीकी है: फ़ाइलें क्रमिक रूप से लोड होती हैं। यदि आपका main.js utils.js पर निर्भर है, तो utils.js ऊपर होना चाहिए।

<!DOCTYPE html>\n<html>\n<head>\n    <script src="utils.js"></script>\n    <script src="main.js"></script>\n</head>\n<body>\n    ...\n</body>\n</html>

समस्या: यह किसी JS फ़ाइल को दूसरी JS फ़ाइल के अंदर कनेक्ट करना नहीं है, बल्कि केवल लोडिंग का क्रम है। यदि आपके पास 20 स्क्रिप्ट हैं, तो आप निर्भरताओं में भ्रमित होने का जोखिम उठाते हैं। इसके अलावा, सभी वेरिएबल और फ़ंक्शन ग्लोबल हो जाते हैं — नमस्ते, नामों का टकराव!

विधि 2: ES6 मॉड्यूल (आधुनिक मानक)

ES6 (ECMAScript 2015) से शुरू करते हुए, JavaScript में एक अंतर्निहित मॉड्यूल सिस्टम आया। यह आधुनिक परियोजनाओं में एक JS फ़ाइल को दूसरे में शामिल करने का सबसे सही तरीका है।

फ़ाइल से निर्यात (math.js)

// math.js\nexport function add(a, b) {\n    return a + b;\n}\n\nexport const PI = 3.14159;\n\nexport default function multiply(a, b) {\n    return a * b;\n}

दूसरी फ़ाइल में आयात (app.js)

// app.js\nimport multiply, { add, PI } from './math.js';\n\nconsole.log(add(2, 3));      // 5\nconsole.log(PI);             // 3.14159\nconsole.log(multiply(4, 5)); // 20

महत्वपूर्ण: इसे ब्राउज़र में काम करने के लिए, HTML में type="module" विशेषता जोड़नी होगी:

<script type="module" src="app.js"></script>

यह विधि सभी समस्याओं का समाधान करती है: कोड अलगाव, स्पष्ट निर्भरताएँ, ग्लोबल वेरिएबल का अभाव। आधुनिक वेब एप्लिकेशन के लिए आदर्श।

विधि 3: Node.js require (CommonJS)

यदि आप Node.js के लिए लिख रहे हैं, तो मानक require() फ़ंक्शन के साथ CommonJS है। यह तरीका एक JS फ़ाइल को दूसरी JS फ़ाइल में शामिल करने के लिए सर्वर-साइड डेवलपमेंट में अभी भी उपयोग किया जाता है (हालाँकि ES6 मॉड्यूल वहाँ भी आ चुके हैं)।

निर्यात (utils.js)

// utils.js\nfunction greet(name) {\n    return `नमस्ते, ${name}!`;\n}\n\nconst secret = 'myPassword123';\n\nmodule.exports = {\n    greet,\n    secret\n};

आयात (server.js)

// server.js\nconst utils = require('./utils.js');\n\nconsole.log(utils.greet('अलेक्से')); // नमस्ते, अलेक्से!\nconsole.log(utils.secret);          // myPassword123

सरल, विश्वसनीय, जहाँ भी Node.js है वहाँ काम करता है। ब्राउज़र के लिए — नहीं, केवल बंडलर्स (Webpack, Vite) के माध्यम से।

विधि 4: स्क्रिप्ट की डायनामिक लोडिंग (script टैग बनाना)

कभी-कभी एक JS फ़ाइल को दूसरी JS फ़ाइल से रनटाइम के दौरान ही कनेक्ट करने की आवश्यकता होती है। उदाहरण के लिए, जब आप केवल आवश्यकता होने पर एनालिटिक्स या प्लगइन लोड करते हैं। इसके लिए डायनामिक रूप से <script> टैग बनाया जा सकता है।

// loadScript.js\nfunction loadScript(src, callback) {\n    const script = document.createElement('script');\n    script.src = src;\n    script.onload =