แม้ว่า GatsbyJS จะเป็นเฟรมเวิร์ก React แต่การรู้วิธีเพิ่ม JavaScript ที่กำหนดเองให้กับโปรเจ็กต์ Gatsby ก็มีประโยชน์ บางทีคุณเพิ่งย้ายเว็บไซต์เก่าของคุณไปที่ Gatsby และมี JavaScript วานิลลาแบบกำหนดเองจำนวนมากที่คุณไม่ต้องการแปลงเป็นไวยากรณ์ ReactJS ในตอนนี้ - ฉันรู้สึกว่าใช่
โชคดีที่การเพิ่ม JavaScript ธรรมดาลงใน Gatsby นั้นไม่ยากเลย คุณเพียงแค่ต้องเปิดเผยไฟล์อย่างง่าย html.js ซึ่งไม่ปรากฏในโปรเจ็กต์ Gatsby ของคุณโดยค่าเริ่มต้น
เพื่อเปิดเผย (ทำให้พร้อมใช้งาน) html.js เปิดเทอร์มินัลของคุณ ไปที่รูทของโฟลเดอร์โปรเจ็กต์ Gatsby แล้วป้อนข้อมูลต่อไปนี้:
cp .cache/default-html.js src/html.js
ตอนนี้ html.js มีอยู่ใน src . ของคุณ โฟลเดอร์ในโปรเจ็กต์ Gatsby ของคุณ
ภายใน html.js ไฟล์มีไวยากรณ์ HTML มากมายที่คุณอาจรู้จัก อย่าแตะต้องโค้ดใดๆ ที่มีอยู่ แต่ให้ความสนใจกับองค์ประกอบ div ด้วย dangerouslySetInnerHTML คุณลักษณะ. เราจำเป็นต้องใช้แอตทริบิวต์เดียวกันกับ <script> องค์ประกอบ.
คัดลอกและวางข้อมูลโค้ดต่อไปนี้ ด้านบน html.js . ของคุณ แท็กปิดเนื้อความของไฟล์ </body> :
<script
dangerouslySetInnerHTML={{
__html: `
console.log('Plain JavaScript inside Gatsby!');
`
}}
/>บันทึกการเปลี่ยนแปลงของคุณ และเริ่มเซิร์ฟเวอร์ Gatsby ของคุณ หรือรีเฟรชแท็บเบราว์เซอร์ของคุณหาก Gatsby ทำงานอยู่แล้ว หากคุณทำถูกต้อง คุณควรเห็นข้อความต่อไปนี้ในคอนโซล Chrome ของคุณ:
Plain JavaScript inside Gatsby!ลองเพิ่มเหตุการณ์การคลิกด้วยข้อความเตือนภายในองค์ประกอบสคริปต์ของคุณ:
document.body.addEventListener('click', function() {
alert('JavaScript!')
})ตอนนี้เมื่อคุณคลิกที่ใดก็ได้บนหน้าของคุณ ควรมีข้อความแจ้งเตือนว่า “JavaScript!”
แหล่งข้อมูล:
ดูเอกสาร GatsbyJS อย่างเป็นทางการสำหรับ (การเพิ่ม JavaScript ที่กำหนดเอง)[https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]
