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