हालांकि GatsbyJS एक रिएक्ट फ्रेमवर्क है, यह जानना उपयोगी हो सकता है कि अपने Gatsby प्रोजेक्ट में कस्टम जावास्क्रिप्ट कैसे जोड़ें। शायद आपने अपनी पुरानी वेबसाइट को Gatsby में स्थानांतरित कर दिया है, और कस्टम वेनिला जावास्क्रिप्ट का एक गुच्छा है जिसे आप वास्तव में अभी ReactJS सिंटैक्स में परिवर्तित करना पसंद नहीं करते हैं - मुझे लगता है।
सौभाग्य से गैट्सबी में सादा जावास्क्रिप्ट जोड़ना बिल्कुल भी कठिन नहीं है, आपको बस एक साधारण फ़ाइल, html.js को उजागर करने की आवश्यकता है , जो डिफ़ॉल्ट रूप से आपके Gatsby प्रोजेक्ट में दिखाई नहीं देता है।
html.js . को बेनकाब करने (उपलब्ध कराने) के लिए फ़ाइल, अपना टर्मिनल खोलें, अपने Gatsby प्रोजेक्ट फ़ोल्डर के मूल में नेविगेट करें, और निम्नलिखित दर्ज करें:
cp .cache/default-html.js src/html.js
अब html.js आपके src . में उपलब्ध है आपके Gatsby प्रोजेक्ट में फ़ोल्डर।
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!')
})अब जब आप अपने पेज पर कहीं भी क्लिक करते हैं, तो यह "जावास्क्रिप्ट!" कहते हुए एक अलर्ट संदेश के साथ पॉप अप होना चाहिए।
संसाधन:
(कस्टम जावास्क्रिप्ट जोड़ने) के लिए आधिकारिक GatsbyJS दस्तावेज़ देखें [https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]