คู่มือการสร้างปลั๊กอิน remark เพื่อให้ข้อมูลเวลาการอ่านสามารถใช้งานได้เมื่อทำการนำเข้าไฟล์ MDX เป็น ES modules
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
มาดูกันว่าเราต้องทำอะไรบ้างเพื่อให้บรรลุเป้าหมาย:
โชคดีที่มีไลบรารีอยู่แล้วที่ช่วยเราในเรื่องการคำนวณเวลาการอ่านและการทำงานกับ AST เบื้องต้น:
reading-time เพื่อคำนวณเวลาการอ่านmdast-util-to-string เพื่อแปลง AST ของ MDX เป็นข้อความestree-util-value-to-estree เพื่อแปลงข้อมูลเวลาการอ่านเป็นโหนด ESTreeถ้าคุณเป็นผู้ใช้ TypeScript คุณอาจจะต้องติดตั้งแพ็กเกจเหล่านี้สำหรับประเภทต่างๆ:
@types/mdast สำหรับประเภทโหนด root ของ MDXunified สำหรับประเภทของปลั๊กอินตราบใดที่เรามีแพ็กเกจที่ติดตั้งไว้ เราสามารถเริ่มสร้างปลั๊กอินได้:
เราจะเห็นได้ว่าปลั๊กอินจะดึงเนื้อหา MDX เป็นข้อความและคำนวณเวลาการอ่าน ตอนนี้เราต้องแนบข้อมูลเวลาการอ่านไปกับเนื้อหา MDX ซึ่งดูเหมือนไม่ตรงไปตรงมา แต่ถ้าเราดูไลบรารีอื่นๆ ที่น่าทึ่งเช่น remark-mdx-frontmatter เราสามารถหาวิธีทำได้:
โปรดสังเกต type: 'mdxjsEsm' ในโค้ดด้านบน นี้เป็นประเภทโหนดที่ใช้ในการ ซีเรียลไลซ์ MDX ESM โค้ดด้านบนจะเป็นการแนบข้อมูลเวลาการอ่านโดยใช้ชื่อ readingTime ไปกับเนื้อหา MDX ซึ่งจะให้เอาต์พุตดังนี้เมื่อทำการนำเข้าไฟล์ MDX เป็น ES module:
หากคุณต้องการเปลี่ยนชื่อของข้อมูลเวลาการอ่าน คุณสามารถอัปเดตพร็อพเพอร์ตี้ name ของโหนด Identifier ได้
เพื่อให้ปลั๊กอินเป็นมิตรกับนักพัฒนายิ่งขึ้น เราสามารถทำสุดท้ายโดยการเพิ่มประเภทของ MDX:
ตอนนี้เมื่อทำการนำเข้าไฟล์ MDX, TypeScript จะรู้จักพร็อพเพอร์ตี้ readingTime:
ฉันหวังว่าคู่มือนี้จะช่วยให้คุณได้รับประสบการณ์ที่ดียิ่งขึ้นเมื่อต้องทำงานกับไฟล์ MDX ด้วยปลั๊กอิน remark นี้ คุณสามารถใช้ข้อมูลเวลาการอ่านได้โดยตรงและแม้แต่จะใช้ ESM tree-shaking สำหรับประสิทธิภาพที่ดียิ่งขึ้น