हालांकि GatsbyJS एक React फ्रेमवर्क है, यह जानना उपयोगी हो सकता है कि अपने Gatsby प्रोजेक्ट में कस्टम JavaScript कैसे जोड़ें। शायद आपने अपनी पुरानी वेबसाइट को Gatsby में स्थानांतरित कर दिया है, और आपके पास बहुत सारा कस्टम वेनिला JavaScript है जिसे आप वास्तव में अभी ReactJS सिंटैक्स में बदलना नहीं चाहते — मैं समझता हूँ।
सौभाग्य से Gatsby में प्लेन JavaScript जोड़ना बिल्कुल भी कठिन नहीं है, आपको बस एक साधारण फ़ाइल, html.js को एक्सपोज़ करने की आवश्यकता है, जो डिफ़ॉल्ट रूप से आपके Gatsby प्रोजेक्ट में दिखाई नहीं देती।
html.js फ़ाइल को एक्सपोज़ (उपलब्ध कराने) के लिए, अपना टर्मिनल खोलें, अपने Gatsby प्रोजेक्ट फ़ोल्डर के रूट पर नेविगेट करें, और निम्न दर्ज करें:
cp .cache/default-html.js src/html.jsअब html.js आपके Gatsby प्रोजेक्ट में src फ़ोल्डर में उपलब्ध है।
html.js फ़ाइल के अंदर HTML सिंटैक्स का एक गुच्छा है जिसे आप शायद पहचानते हैं। मौजूदा कोड में से किसी को न छुएं, लेकिन dangerouslySetInnerHTML एट्रिब्यूट वाले div एलिमेंट पर ध्यान दें। हमें <script> एलिमेंट के साथ उसी एट्रिब्यूट का उपयोग करने की आवश्यकता है।
निम्न स्निपेट को अपने html.js फ़ाइल के क्लोजिंग बॉडी टैग </body> के ठीक ऊपर कॉपी और पेस्ट करें:
<script dangerouslySetInnerHTML={{ __html: ` console.log('Plain JavaScript inside Gatsby!'); ` }} />अपने परिवर्तन सेव करें, और अपना Gatsby सर्वर शुरू करें, या यदि Gatsby पहले से चल रहा है तो अपने ब्राउज़र टैब को रिफ्रेश करें। यदि आपने इसे सही किया, तो आपको अपने क्रोम कंसोल में निम्न संदेश दिखाई देना चाहिए:
Plain JavaScript inside Gatsby!अपने स्क्रिप्ट एलिमेंट के अंदर एक अलर्ट मैसेज के साथ क्लिक इवेंट जोड़ने का प्रयास करें:
document.body.addEventListener('click', function() { alert('JavaScript!') })अब जब आप अपने पेज पर कहीं भी क्लिक करेंगे, तो यह "JavaScript!" कहते हुए एक अलर्ट मैसेज के साथ पॉप अप होना चाहिए।
संसाधन:
आधिकारिक GatsbyJS डॉक्स देखें (कस्टम JavaScript जोड़ने के लिए)[https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]
