สร้างปลั๊กอิน remark เพื่อดึงเวลาการอ่าน MDX

Remark เป็นตัวประมวลผล markdown ที่ทรงพลังซึ่งสามารถใช้สร้างปลั๊กอินที่กำหนดเองเพื่อแปลงเนื้อหา markdown เมื่อพาร์สไฟล์ markdown ด้วย remark เนื้อหาจะถูกแปลงเป็นต้นไม้ไวยากรณ์นามธรรม (AST) ที่สามารถจัดการได้โดยใช้ปลั๊กอิน

เพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น มันเป็นเรื่องธรรมดาที่จะต้องแสดงเวลาการอ่านโดยประมาณของบทความ ในคู่มือนี้เราจะสร้างปลั๊กอิน remark เพื่อดึงข้อมูลเวลาการอ่านจากไฟล์ MDX และทำให้สามารถใช้งานได้เมื่อทำการนำเข้าไฟล์ MDX เป็น ES module

เริ่มต้น#

มาเริ่มต้นด้วยการสร้างไฟล์ MDX:

สมมติว่าเรากำลังใช้ Vite เป็นตัวรวม โดยมีปลั๊กอิน @mdx-js/rollup อย่างเป็นทางการเพื่อแปลงไฟล์ MDX ดังนั้นเราสามารถนำเข้าไฟล์ MDX เป็น ES module การกำหนดค่า Vite ควรมีลักษณะดังนี้:

ถ้าเรานำเข้าไฟล์ MDX เป็น ES module เนื้อหาจะเป็นอ็อบเจ็กต์ที่มีพร็อพเพอร์ตี้ default ที่มี JSX ที่ถูกคอมไพล์ ตัวอย่างเช่น:

จะให้ผลลัพธ์ดังนี้:

เมื่อเรามีเอาต์พุตแบบนี้แล้ว เราก็พร้อมที่จะสร้างปลั๊กอิน remark

สร้างปลั๊กอิน remark#

มาดูกันว่าเราต้องทำอะไรบ้างเพื่อให้บรรลุเป้าหมาย:

1. ดึงเนื้อหา MDX เป็นข้อความเพื่อคำนวณเวลาการอ่าน
2. คำนวณเวลาการอ่าน
3. แนบข้อมูลเวลาการอ่านไปกับเนื้อหา MDX ทำให้ใช้งานได้เมื่อทำการนำเข้าไฟล์ MDX เป็น ES module

โชคดีที่มีไลบรารีอยู่แล้วที่ช่วยเราในเรื่องการคำนวณเวลาการอ่านและการทำงานกับ AST เบื้องต้น:

• reading-time เพื่อคำนวณเวลาการอ่าน
• mdast-util-to-string เพื่อแปลง AST ของ MDX เป็นข้อความ
• estree-util-value-to-estree เพื่อแปลงข้อมูลเวลาการอ่านเป็นโหนด ESTree

ถ้าคุณเป็นผู้ใช้ TypeScript คุณอาจจะต้องติดตั้งแพ็กเกจเหล่านี้สำหรับประเภทต่างๆ:

• @types/mdast สำหรับประเภทโหนด root ของ MDX
• unified สำหรับประเภทของปลั๊กอิน

ตราบใดที่เรามีแพ็กเกจที่ติดตั้งไว้ เราสามารถเริ่มสร้างปลั๊กอินได้:

เราจะเห็นได้ว่าปลั๊กอินจะดึงเนื้อหา MDX เป็นข้อความและคำนวณเวลาการอ่าน ตอนนี้เราต้องแนบข้อมูลเวลาการอ่านไปกับเนื้อหา MDX ซึ่งดูเหมือนไม่ตรงไปตรงมา แต่ถ้าเราดูไลบรารีอื่นๆ ที่น่าทึ่งเช่น remark-mdx-frontmatter เราสามารถหาวิธีทำได้:

โปรดสังเกต type: 'mdxjsEsm' ในโค้ดด้านบน นี้เป็นประเภทโหนดที่ใช้ในการ ซีเรียลไลซ์ MDX ESM โค้ดด้านบนจะเป็นการแนบข้อมูลเวลาการอ่านโดยใช้ชื่อ readingTime ไปกับเนื้อหา MDX ซึ่งจะให้เอาต์พุตดังนี้เมื่อทำการนำเข้าไฟล์ MDX เป็น ES module:

หากคุณต้องการเปลี่ยนชื่อของข้อมูลเวลาการอ่าน คุณสามารถอัปเดตพร็อพเพอร์ตี้ name ของโหนด Identifier ได้

การสนับสนุน TypeScript#

เพื่อให้ปลั๊กอินเป็นมิตรกับนักพัฒนายิ่งขึ้น เราสามารถทำสุดท้ายโดยการเพิ่มประเภทของ MDX:

ตอนนี้เมื่อทำการนำเข้าไฟล์ MDX, TypeScript จะรู้จักพร็อพเพอร์ตี้ readingTime:

สรุป#

ฉันหวังว่าคู่มือนี้จะช่วยให้คุณได้รับประสบการณ์ที่ดียิ่งขึ้นเมื่อต้องทำงานกับไฟล์ MDX ด้วยปลั๊กอิน remark นี้ คุณสามารถใช้ข้อมูลเวลาการอ่านได้โดยตรงและแม้แต่จะใช้ ESM tree-shaking สำหรับประสิทธิภาพที่ดียิ่งขึ้น