ดาวน์โหลด mdx bundler - mdx bundler Source Source Download

mdx bundler

ซอร์สโค้ดอื่น ๆ

v10.0.3

ดาวน์โหลด

MDX-Bundler?

รวบรวมและรวมไฟล์ MDX ของคุณและการอ้างอิง เร็ว.

ปัญหา

คุณมีสตริงของ MDX และไฟล์ TS/JS ต่างๆที่ใช้และคุณต้องการรับไฟล์เหล่านี้รุ่นเหล่านี้เพื่อประเมินในเบราว์เซอร์

โซลูชันนี้

นี่คือฟังก์ชั่น async ที่จะรวบรวมและรวมไฟล์ MDX ของคุณและการอ้างอิง ใช้ MDX V3 และ ESBUILD ดังนั้นจึงเร็วมากและรองรับไฟล์ typeScript (สำหรับการอ้างอิงของไฟล์ MDX ของคุณ)

ไฟล์ต้นฉบับของคุณอาจเป็นแบบท้องถิ่นใน Remote GitHub Repo ใน CMS หรือที่อื่น ๆ และไม่สำคัญ mdx-bundler ทั้งหมดใส่ใจคือคุณส่งผ่านไฟล์และซอร์สโค้ดทั้งหมดที่จำเป็นและจะดูแลการรวมทุกอย่างให้คุณ

คำถามที่พบบ่อย:

"อะไรเจ๋งมากเกี่ยวกับ MDX"

MDX ช่วยให้คุณสามารถรวมไวยากรณ์การทำเครื่องหมายสั้น ๆ สำหรับเนื้อหาของคุณเข้ากับพลังของส่วนประกอบปฏิกิริยา สำหรับเว็บไซต์ที่มีเนื้อหาหนักการเขียนเนื้อหาด้วย HTML แบบตรงขึ้นอาจเป็นคำอธิบายที่น่ารำคาญ บ่อยครั้งที่ผู้คนแก้ปัญหานี้โดยใช้เครื่องมือแก้ไข Wsywig แต่บ่อยครั้งที่ผู้ที่ขาดในการทำแผนที่ความตั้งใจของนักเขียนกับ HTML หลายคนชอบใช้ Markdown เพื่อแสดงแหล่งที่มาของเนื้อหาและมีการแยกวิเคราะห์เป็น HTML เพื่อแสดงผล

ปัญหาเกี่ยวกับการใช้ markdown สำหรับเนื้อหาของคุณคือถ้าคุณต้องการมีการโต้ตอบบางอย่างที่ฝังอยู่ในเนื้อหาของคุณคุณค่อนข้าง จำกัด คุณต้องแทรกองค์ประกอบที่ JavaScript ตั้งเป้าหมาย (ซึ่งเป็นทางอ้อมที่น่ารำคาญ) หรือคุณสามารถใช้ iframe หรือบางอย่างได้

ตามที่ระบุไว้ก่อนหน้านี้ MDX ช่วยให้คุณสามารถรวมไวยากรณ์การทำเครื่องหมายแบบย้อนกลับสำหรับเนื้อหาของคุณเข้ากับพลังของส่วนประกอบปฏิกิริยา ดังนั้นคุณสามารถนำเข้าองค์ประกอบที่ตอบสนองและแสดงผลภายในตัวเอง มันเป็นสิ่งที่ดีที่สุดของทั้งสองโลก

"สิ่งนี้แตกต่างจาก next-mdx-remote อย่างไร"

mdx-bundler รวมการพึ่งพาไฟล์ MDX ของคุณ ตัวอย่างเช่นสิ่งนี้จะไม่ทำงานกับ next-mdx-remote แต่จะมี mdx-bundler :

 --- ชื่อเรื่อง: ตัวอย่างโพสต์เผยแพร่: 2021-02-13Description: นี่คือคำอธิบายบางส่วน ---# Wahooimport Demo จาก './demo'

นี่คือ ** การสาธิต **:

<สาธิต />

next-mdx-remote โช้คในการนำเข้านั้นเพราะมันไม่ใช่ Bundler มันเป็นแค่คอมไพเลอร์ mdx-bundler เป็นคอมไพเลอร์ MDX และ Bundler นั่นคือความแตกต่าง

"สิ่งนี้แตกต่างจากปลั๊กอิน MDX สำหรับ WebPack หรือ Rollup อย่างไร"

เครื่องมือเหล่านั้นมีวัตถุประสงค์เพื่อเรียกใช้ "เวลาสร้าง" จากนั้นคุณจะปรับใช้ไฟล์เวอร์ชันที่สร้างขึ้นของคุณ ซึ่งหมายความว่าหากคุณมีเนื้อหาบางอย่างใน MDX และต้องการเปลี่ยนการพิมพ์ผิดคุณต้องสร้างและปรับใช้ทั้งไซต์ทั้งหมด นี่ก็หมายความว่าทุกหน้า MDX ที่คุณเพิ่มลงในเว็บไซต์ของคุณจะเพิ่มเวลาในการสร้างของคุณดังนั้นมันจึงไม่ได้ปรับขนาดทั้งหมดให้ดี

mdx-bundler สามารถใช้งานได้อย่างแน่นอนในเวลาสร้าง แต่มันใช้อย่างมีประสิทธิภาพมากขึ้นเป็น Bundler รันไทม์ กรณีการใช้งานทั่วไปคือการมีเส้นทางสำหรับเนื้อหา MDX ของคุณและเมื่อคำขอนั้นเข้ามาคุณจะโหลดเนื้อหา MDX และส่งมอบให้กับ mdx-bundler เพื่อรวมกลุ่ม ซึ่งหมายความว่า mdx-bundler สามารถปรับขนาดได้อย่างไม่ จำกัด งานสร้างของคุณจะไม่เป็นอีกต่อไปไม่ว่าคุณจะมีเนื้อหา MDX มากแค่ไหนก็ตาม นอกจากนี้ mdx-bundler นั้นค่อนข้างเร็ว แต่เพื่อให้การรวมกันตามความต้องการนี้เร็วขึ้นคุณสามารถใช้ส่วนหัวแคชที่เหมาะสมเพื่อหลีกเลี่ยงการรวมเงินใหม่ที่ไม่จำเป็น

WebPack/Rollup/etc ยังต้องการให้ไฟล์ MDX ทั้งหมดของคุณอยู่ในระบบไฟล์ท้องถิ่นเพื่อให้ทำงานได้ หากคุณต้องการจัดเก็บเนื้อหา MDX ของคุณใน repo หรือ CMS แยกต่างหากคุณจะโชคไม่ดีหรือต้องทำยิมนาสติกแบบสร้างเวลาเพื่อรับไฟล์สำหรับการสร้าง

ด้วย mdx-bundler มันไม่สำคัญว่าเนื้อหา MDX ของคุณมาจากไหนคุณสามารถรวมไฟล์ได้จากทุกที่คุณเพียงแค่รับผิดชอบในการนำเนื้อหาเข้าสู่หน่วยความจำแล้วส่งมอบให้กับ mdx-bundler เพื่อรวมการรวมตัวกัน

"สิ่งนี้ใช้งานได้กับ Remix/Gatsby/next/CRA/etc หรือไม่"

โดยสิ้นเชิง. มันทำงานกับเครื่องมือเหล่านั้น ขึ้นอยู่กับว่า meta-framework ของคุณรองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์คุณจะใช้มันแตกต่างกันหรือไม่ คุณอาจตัดสินใจที่จะใช้วิธีการในตัว (สำหรับ Gatsby/CRA) แต่ดังกล่าวพลังที่แท้จริงของ mdx-bundler มาในรูปแบบของการรวมกันตามความต้องการ ดังนั้นจึงเหมาะที่สุดสำหรับเฟรมเวิร์ก SSR เช่นรีมิกซ์/ถัดไป

"ทำไมอีโมจินกโดโด?"

ทำไมไม่?

"ทำไม Esbuild ถึงเป็นพึ่งพาเพื่อน"

Esbuild ให้บริการที่เขียนใน GO ที่มันโต้ตอบกับ มีเพียงหนึ่งอินสแตนซ์ของบริการนี้เท่านั้นที่สามารถทำงานได้ครั้งละและต้องมีเวอร์ชันที่เหมือนกันกับแพ็คเกจ NPM หากเป็นการพึ่งพาอย่างหนักคุณจะสามารถใช้ MDX-Bundler รุ่น Esbuild ได้เท่านั้น

สารบัญ

การติดตั้ง
การใช้งาน

ตัวเลือก
ผลตอบแทน
ประเภท
การทดแทนส่วนประกอบ
frontmatter และ const
การเข้าถึงการส่งออกที่มีชื่อ
ภาพรวม
รวมไฟล์
ส่วนประกอบที่กำหนดเองในไฟล์ดาวน์สตรีม
ปัญหาที่รู้จัก

แรงบันดาลใจ
วิธีแก้ปัญหาอื่น ๆ
ปัญหา

- ข้อบกพร่อง
คำขอคุณสมบัติ

ผู้มีส่วนร่วม
ใบอนุญาต

การติดตั้ง

โมดูลนี้มีการกระจายผ่าน NPM ซึ่งรวมกับโหนดและควรติดตั้งเป็นหนึ่งใน dependencies ของโครงการของคุณ:

npm install --save mdx-bundler esbuild

หนึ่งในการพึ่งพาของ MDX-Bundler ต้องใช้การตั้งค่าโหนดโหนดที่ใช้งานได้เพื่อให้สามารถติดตั้งได้อย่างถูกต้อง

การใช้งาน

 นำเข้า {bundlemdx} จาก 'mdx-bundler'const mdxsource = `--- ชื่อเรื่อง: ตัวอย่างโพสต์เผยแพร่: 2021-02-13description: นี่คือคำอธิบาย ---# wahooimport Demo จาก' ./demo'here * ตัวอย่าง: <สาธิต />`.Trim()Const result = รอ Bundlemdx ({{{
  ที่มา: mdxsource,
  ไฟล์: {'./demo.tsx': `นำเข้า * เป็นปฏิกิริยาจาก 'React'function Demo () {return <div> การสาธิตที่เรียบร้อย!
  },}) const {รหัส, frontmatter} = ผลลัพธ์

จากนั้นคุณส่ง code ไปยังลูกค้าของคุณแล้ว:

 นำเข้า * เป็นปฏิกิริยาจาก 'react'import {getMdxComponent} จาก' mdx-bundler/client'function post ({code, frontmatter}) {
  // โดยทั่วไปเป็นความคิดที่ดีที่จะบันทึกการเรียกใช้ฟังก์ชันนี้
  // หลีกเลี่ยงการสร้างส่วนประกอบใหม่ทุกครั้ง
  const component = react.usememo (() => getMdxComponent (รหัส), [รหัส])
  return (<> <header> <h1> {frontmatter.title} </h1> <p> {frontmatter.description} </p> </header> <main> <ponent/> </main> </>
  -

ในที่สุดสิ่งนี้จะได้รับการแสดงผล (โดยทั่วไป):

 <ส่วนหัว>
  <H1> นี่คือชื่อ </h1>
  <p> นี่คือคำอธิบาย </p> </header> <main>
  <div> <h1> wahoo </h1> <p> นี่คือ <strong> การสาธิต </strong>: </p> <div> การสาธิตที่เรียบร้อย! </div>
  </div> </ain>

ตัวเลือก

แหล่งที่มา

แหล่ง string ของ MDX ของคุณ

ไม่สามารถตั้งค่าได้หากตั้งค่า file

ไฟล์

พา ธ ไปยังไฟล์บนดิสก์ของคุณด้วย MDX คุณอาจต้องการตั้งค่า CWD ด้วย

ไม่สามารถตั้งค่าได้หากมีการตั้ง source

ไฟล์

การกำหนด files เป็นวัตถุของไฟล์ทั้งหมดที่คุณรวมกัน คีย์คือพา ธ ไปยังไฟล์ (สัมพันธ์กับแหล่ง MDX) และค่าคือสตริงของซอร์สโค้ดไฟล์ คุณสามารถรับสิ่งเหล่านี้ได้จากระบบไฟล์หรือจากฐานข้อมูลระยะไกล หาก MDX ของคุณไม่ได้อ้างอิงไฟล์อื่น ๆ (หรือนำเข้าเฉพาะสิ่งต่าง ๆ จาก node_modules ) คุณสามารถละเว้นสิ่งนี้ทั้งหมด

mdxoptions

สิ่งนี้ช่วยให้คุณสามารถปรับเปลี่ยนการกำหนดค่า MDX ในตัว (ส่งผ่านไปยัง @mdx-js/esbuild ) สิ่งนี้จะเป็นประโยชน์สำหรับการระบุ moundingplugins/rehypeplugins ของคุณเอง

ฟังก์ชั่นถูกส่งผ่าน mdxoptions เริ่มต้นและ frontmatter

 Bundlemdx ({
  ที่มา: mdxsource,
  mdxoptions (ตัวเลือก, frontmatter) {// นี่เป็นวิธีที่แนะนำในการเพิ่มคำพูดที่กำหนดเอง/ปลั๊กอิน rehype: // ไวยากรณ์อาจดูแปลก ๆ แต่มันช่วยปกป้องคุณในกรณีที่เราเพิ่ม/ลบ // ปลั๊กอินในอนาคต. remarkplugins = [... (ตัวเลือก remarkplugins ?? []), myremarkplugin] ตัวเลือก. rehypeplugins = [... (ตัวเลือก
  -

Esbuildoptions

คุณสามารถปรับแต่งตัวเลือก ESBUILD ใด ๆ ด้วยตัวเลือก esbuildOptions ใช้ฟังก์ชั่นที่ผ่านตัวเลือก Esbuild เริ่มต้นและ frontmatter และคาดว่าจะส่งคืนวัตถุตัวเลือก

 Bundlemdx ({
  ที่มา: mdxsource,
  ESBUILDOPTIONS (ตัวเลือก, frontmatter) {opotions.minify = talseoptions.target = ['es2020', 'Chrome58', 'firefox57', 'Safari11', 'Edge16', 'node12'
  -

ข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกที่มีอยู่สามารถพบได้ในเอกสาร ESBUILD

ขอแนะนำให้ใช้คุณสมบัตินี้เพื่อกำหนด target ไปยังผลลัพธ์ที่คุณต้องการมิฉะนั้นค่าเริ่มต้นของ Esbuild เป็น esnext ซึ่งบอกว่ามันไม่ได้รวบรวมคุณสมบัติที่เป็นมาตรฐานใด ๆ ดังนั้นผู้ใช้เบราว์เซอร์ที่มีอายุมากกว่าจะได้รับข้อผิดพลาด

ลูกโลก

สิ่งนี้บอก Esbuild ว่ามีโมดูลที่กำหนดอยู่ภายนอก ตัวอย่างเช่นหากไฟล์ MDX ของคุณใช้ไลบรารี D3 และคุณใช้ไลบรารี D3 ในแอพของคุณแล้วคุณจะต้องจัดส่ง d3 ไปยังผู้ใช้สองครั้ง (หนึ่งครั้งสำหรับแอปของคุณและอีกครั้งสำหรับส่วนประกอบ MDX นี้) สิ่งนี้สิ้นเปลืองและคุณจะดีกว่าเพียงแค่บอกให้ Esbuild ไม่ รวม d3 และคุณสามารถส่งผ่านไปยังส่วนประกอบด้วยตัวเองเมื่อคุณเรียก getMDXComponent

ตัวเลือกการกำหนดค่าภายนอกทั่วโลก: https://www.npmjs.com/package/@fal-works/esbuild-plugin-global-externals

นี่คือตัวอย่าง:

 // รหัสด้านข้างหรือเซิร์ฟเวอร์หรือเวลาที่ทำงานในโหนด: นำเข้า {bundlemdx} จาก 'mdx-bundler'const mdxsource = `# นี่คือ titleimport leftpad จาก' ซ้าย '<div> {leftpad ( ! ", 12, '!')} </div>` .Trim () const result = รอ bundlemdx ({
  ที่มา: mdxsource,
  // หมายเหตุ: นี่คือ * เฉพาะ * จำเป็นหากคุณต้องการแบ่งปัน deps ระหว่าง mdx ของคุณ
  // File Bundle และแอพโฮสต์ มิฉะนั้น deps ทั้งหมดจะมารวมกัน
  // ดังนั้นมันจะใช้ได้ทั้งสองวิธีนี่เป็นเพียงการเพิ่มประสิทธิภาพเพื่อหลีกเลี่ยงการส่ง
  // สำเนาของไลบรารีเดียวกันหลายชุดให้กับผู้ใช้ของคุณ
  Globals: {'left-pad': 'myleftpad'},})

 // เซิร์ฟเวอร์เรนเดอร์และ/หรือรหัสฝั่งไคลเอ็นต์ที่สามารถทำงานในเบราว์เซอร์หรือโหนด: นำเข้า * เป็นปฏิกิริยาจาก 'react'import leftpad จาก' left-pad'import {getMdxComponent} จาก 'mdx-bundler/client'function mdxPage ({code}: {code: string}) {
  const component = react.usememo (() => getMdxComponent (result.code, {myleftpad: leftpad}), [result.code, leftpad],
  -
  return (<main> <component /> </ain>
  -

CWD

การตั้งค่า cwd ( ไดเรกทอรีการทำงานปัจจุบัน ) ไปยังไดเรกทอรีจะช่วยให้ Esbuild สามารถแก้ไขการนำเข้าได้ ไดเรกทอรีนี้อาจเป็นไดเรกทอรีเนื้อหา MDX ถูกอ่านจากหรือไดเรกทอรีที่ควร เรียกใช้ MDX นอกดิสก์

เนื้อหา/หน้า/demo.tsx

 นำเข้า * เป็นปฏิกิริยาจาก 'React'function Demo () {
  ส่งคืน <div> การสาธิตที่เรียบร้อย! </div>} การสาธิตการส่งออกเริ่มต้น

src/build.ts

 นำเข้า {bundlemdx} จาก 'mdx-bundler'const mdxsource = `--- ชื่อเรื่อง: ตัวอย่างโพสต์เผยแพร่: 2021-02-13description: นี่คือคำอธิบาย ---# wahooimport Demo จาก' ./demo'here * ตัวอย่าง: <สาธิต />`.Trim()Const result = รอ Bundlemdx ({{{
  ที่มา: mdxsource,
  cwd: '/users/you/site/_content/pages',}) const {รหัส, frontmatter} = ผลลัพธ์

สีเทา

สิ่งนี้ช่วยให้คุณกำหนดค่าตัวเลือกสีเทา

ฟังก์ชั่นของคุณถูกส่งผ่านการกำหนดค่าสีเทาปัจจุบันเพื่อให้คุณแก้ไข ส่งคืนวัตถุการกำหนดค่าที่แก้ไขของคุณสำหรับสสารสีเทา

 Bundlemdx ({
  GreyMatterOptions: ตัวเลือก => {ตัวเลือก Excerpt = ตัวเลือก truereturn
  -

Bundledirectory & Bundlepath

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

ชุด JavaScript ไม่ได้เขียนไปยังไดเรกทอรีนี้และยังคงถูกส่งคืนเป็นสตริงจาก bundleMDX

คุณสมบัตินี้ใช้งานได้ดีที่สุดกับการปรับแต่งไปยัง mdxOptions และ esbuildOptions ในตัวอย่างด้านล่างไฟล์ .png ถูกเขียนลงในดิสก์แล้วเสิร์ฟจาก /file/

สิ่งนี้ช่วยให้คุณสามารถเก็บสินทรัพย์ไว้ใน MDX ของคุณแล้วให้ดำเนินการ ESBuild เหมือนอย่างอื่น

ขอแนะนำให้แต่ละมัดมี bundleDirectory ของตัวเองเพื่อให้หลายกลุ่มไม่ได้เขียนทับทรัพย์สินของกันและกัน

 const {code} = รอ bundlemdx ({
  ไฟล์: '/path/to/site/content/file.mdx'
  CWD: '/path/to/site/content'
  Bundledirectory: '/path/to/site/public/file'
  BundlePath: '/file/',
  mdxoptions: ตัวเลือก => {ตัวเลือก
  -
  ESBUILDOPTIONS: ตัวเลือก => {ตัวเลือก loader = {... ตัวเลือกการโหลด, '.png': 'ไฟล์',} ตัวเลือกส่งคืน
  -

ผลตอบแทน

bundleMDX ส่งคืนสัญญาสำหรับวัตถุที่มีคุณสมบัติต่อไปนี้

code - มัดของ MDX ของคุณเป็น string
frontmatter - object frontmatter จากสีเทา
matter - วัตถุทั้งหมดกลับมาโดยสีเทา

ประเภท

mdx-bundler จัดหาการพิมพ์ที่สมบูรณ์ภายในแพ็คเกจของตัวเอง

bundleMDX มีพารามิเตอร์ประเภทเดียวซึ่งเป็นประเภทของ frontmatter ของคุณ มันเริ่มต้นเป็น {[key: string]: any} และต้องเป็นวัตถุ สิ่งนี้จะใช้ในการพิมพ์ frontmatter ที่ส่งคืนและ frontmatter ส่งผ่านไปยัง esbuildOptions และ mdxOptions

 const {frontmatter} = bundlemdx <{title: string}> ({source}) frontmatter.title // มีประเภทสตริง

การทดแทนส่วนประกอบ

MDX Bundler ส่งผ่านความสามารถของ MDX ในการแทนที่ส่วนประกอบผ่าน components Prop บนส่วนประกอบที่ส่งคืนโดย getMDXComponent

นี่คือตัวอย่างที่ลบแท็ก P จากภาพรอบ ๆ

 นำเข้า * เป็นปฏิกิริยาจาก 'react'import {getMdxComponent} จาก' mdx-bundler/client'const ย่อหน้า: react.fc = props => {
  if (typeof props.children! == 'string' && props.children.type === 'img') {return <> {props.children} </>
  -

  return <p {... อุปกรณ์ประกอบฉาก} />} ฟังก์ชั่น mdxPage ({code}: {code: string}) {
  const component = react.usememo (() => getMdxComponent (รหัส), [รหัส])

  return (<main> <Component Components = {{P: PARAGRAPH}} /> < /main>
  -

frontmatter และ const

คุณสามารถอ้างอิง meta frontmatter หรือ consts ในเนื้อหา MDX

 --- ชื่อเรื่อง: ตัวอย่างการโพสต์ --- ส่งออก const examplemage = 'https://example.com/image.jpg'# {frontmatter.title} <img src = {ตัวอย่าง} alt = "ภาพข้อความ alt"/>> >>

การเข้าถึงการส่งออกที่มีชื่อ

คุณสามารถใช้ getMDXExport แทน getMDXComponent เพื่อปฏิบัติต่อไฟล์ MDX เป็นโมดูลแทนส่วนประกอบ ต้องใช้อาร์กิวเมนต์เดียวกันกับที่ getMDXComponent ทำ

 --- ชื่อเรื่อง: ตัวอย่างโพสต์ --- ส่งออก const toc = [{ความลึก: 1, ค่า: 'ชื่อ'}]# ชื่อเรื่อง

 นำเข้า * เป็นปฏิกิริยาจาก 'react'import {getMdxExport} จาก' mdx-bundler/client'function mdxpage ({code}: {code: string}) {
  const mdxExport = getMdxExport (รหัส)
  console.log (mdxexport.toc) // [{ความลึก: 1, ค่า: 'ชื่อ'}]

  const component = react.usememo (() => mdxExport.default, [รหัส])

  return <component />}

ภาพรวม

ด้วย CWD และปลั๊กอินหมายเหตุหมายเหตุ MDX-Images คุณสามารถรวมภาพใน MDX ของคุณ!

มีรถตักสองตัวใน Esbuild ที่สามารถใช้งานได้ที่นี่ ที่ง่ายที่สุดคือ dataurl ซึ่งส่งออกรูปภาพเป็น URL ข้อมูลแบบอินไลน์ในรหัสที่ส่งคืน

 นำเข้า {moundMdimxages} จาก 'ounding-mdx-images'const {code} = รอ bundlemdx ({{
  ที่มา: mdxsource,
  CWD: '/ผู้ใช้/คุณ/ไซต์/_Content/Pages'
  mdxoptions: ตัวเลือก => {ตัวเลือก remarkplugins = [... (opotions.remarkplugins ?? []), modximages] ตัวเลือกการส่งคืน
  -
  ESBUILDOPTIONS: ตัวเลือก => {options.loader = {... ตัวเลือกการโหลด, '.png': 'dataurl',} ตัวเลือกการส่งคืน
  -

ตัวโหลด file ต้องการการกำหนดค่าเพิ่มขึ้นเล็กน้อยเพื่อให้ทำงานได้ ด้วย file โหลดเดอร์รูปภาพของคุณจะถูกคัดลอกไปยังไดเรกทอรีเอาต์พุตเพื่อให้ Esbuild จำเป็นต้องตั้งค่าให้เขียนไฟล์และจำเป็นต้องรู้ว่าจะวางไว้ที่ไหนรวมทั้ง URL ของโฟลเดอร์ที่จะใช้ในแหล่งภาพ

การโทรแต่ละครั้งไปยัง bundleMDX นั้นแยกได้จากคนอื่น ๆ หากคุณตั้งค่าไดเรกทอรีเหมือนกันสำหรับทุกสิ่ง bundleMDX จะเขียนทับรูปภาพโดยไม่มีการเตือนล่วงหน้า เป็นผลให้แต่ละ ชุด ต้องการไดเรกทอรีเอาต์พุตของตัวเอง

 // สำหรับไฟล์ `_content/pages/about.mdx`const {code} = รอ bundlemdx ({{
  ที่มา: mdxsource,
  CWD: '/ผู้ใช้/คุณ/ไซต์/_Content/Pages'
  mdxoptions: ตัวเลือก => {ตัวเลือก remarkplugins = [... (opotions.remarkplugins ?? []), modximages] ตัวเลือกการส่งคืน
  -
  ESBUILDOPTIONS: ตัวเลือก => {// ตั้งค่า `outdir` เป็นตำแหน่งสาธารณะสำหรับชุดนี้ options.outdir = '/users/you/site/public/img/about'options.loader = {... ตัวเลือก , // บอก esbuild ให้ใช้ `file` loader สำหรับ pngs '.png': 'ไฟล์',} // ตั้งเส้นทางสาธารณะเป็น/img/aboutoptions.publicpath = '/img/เกี่ยวกับ' // ตั้งค่าเขียนเป็นจริง เพื่อให้ esbuild จะส่งออก files.options.write = ตัวเลือก truereturn
  -

รวมไฟล์

หากไฟล์ MDX ของคุณอยู่ในดิสก์ของคุณคุณสามารถประหยัดเวลาและรหัสได้โดยให้ mdx-bundler อ่านไฟล์ให้คุณ แทนที่จะจัดหาสตริง source คุณสามารถตั้งค่า file ไปยังเส้นทางของ MDX บนดิสก์ ตั้งค่า cwd เป็นโฟลเดอร์เพื่อให้การนำเข้าสัมพัทธ์ทำงาน

 นำเข้า {bundlemdx} จาก 'mdx-bundler'const {รหัส, frontmatter} = รอ bundlemdx ({
  ไฟล์: '/users/you/site/content/file.mdx'
  CWD: '/ผู้ใช้/คุณ/ไซต์/เนื้อหา/',})

ส่วนประกอบที่กำหนดเองในไฟล์ดาวน์สตรีม

เพื่อให้แน่ใจว่าส่วนประกอบที่กำหนดเองสามารถเข้าถึงได้ในไฟล์ Downstream MDX คุณสามารถใช้ MDXProvider จาก @mdx-js/react เพื่อส่งผ่านส่วนประกอบที่กำหนดเองไปยังการนำเข้าที่ซ้อนกันของคุณ

npm install --save @mdx-js/react

 const globals = {
  '@mdx-js/react': {varname: 'mdxjsreact', namedexports: ['usemdxcomponents'], defaultExport: false
  },}; const {code} = bundlemdx ({
  แหล่งที่มา,
  ลูกโลก
  mdxoptions (ตัวเลือก: บันทึก <สตริง, any>) {return {... ตัวเลือก, providerImportSource: '@mdx-js/react',};
  -

จากนั้นคุณส่ง code ไปยังลูกค้าของคุณแล้ว:

 นำเข้า {mdxprovider, usemdxcomponents} จาก '@mdx-js/react'; const mdx_global_config = {
  mdxjsreact: {usemdxComponents,
  },}; ส่งออก const mdxComponent: react.fc <{
  รหัส: สตริง;
  frontmatter: บันทึก <string, any>;}> = ({code}) => {
  const component = usememo (() => getMdxComponent (รหัส, mdx_global_config), [รหัส],
  -

  return (<mdxProvider Components = {{text: ({children}) => <p> {เด็ก} </p>}}> <component/> </mdxprovider>
  -

ปัญหาที่รู้จัก

คนงาน Cloudflare

เรา ชอบ ที่จะทำงานในคนงาน CloudFlare น่าเสียดายที่ Cloudflares มีข้อ จำกัด สองประการที่ป้องกันไม่ให้ mdx-bundler ทำงานในสภาพแวดล้อมนั้น:

คนงานไม่สามารถทำงานไบนารีได้ bundleMDX ใช้ esbuild (ไบนารี) เพื่อรวมรหัส MDX ของคุณ
คนงานไม่สามารถเรียกใช้ eval หรือคล้ายกัน getMDXComponent ประเมินรหัสที่รวมโดยใช้ new Function

วิธีแก้ปัญหาหนึ่งในนี้คือการวางรหัสที่เกี่ยวข้องกับ MDX-Bundler ของคุณในสภาพแวดล้อมที่แตกต่างกันและเรียกสภาพแวดล้อมนั้นจากภายใน CloudFlare Worker IMO สิ่งนี้เอาชนะจุดประสงค์ในการใช้คนงาน CloudFlare วิธีแก้ปัญหาที่อาจเกิดขึ้นอีกประการหนึ่งคือการใช้ WASM จากภายในคนงาน มี esbuild-wasm แต่มีปัญหาบางอย่างเกี่ยวกับแพ็คเกจนั้นที่อธิบายไว้ที่ลิงค์นั้น จากนั้นก็มี wasm-jseval แต่ฉันไม่สามารถเรียกใช้รหัสที่ใช้งานได้จาก mdx-bundler โดยไม่มีข้อผิดพลาด

หากมีคนอยากจะขุดสิ่งนี้นั่นจะเป็นตัวเอก แต่น่าเสียดายที่มันไม่น่าเป็นไปได้ที่ฉันจะได้ทำงานกับมัน

next.js esbuild enoent

Esbuild อาศัย __dirname ในการออกกำลังกายที่ปฏิบัติการได้คือ Next.js และ Webpack บางครั้งอาจทำลายสิ่งนี้ได้และ Esbuild จำเป็นต้องได้รับการบอกกล่าวด้วยตนเอง

การเพิ่มรหัสต่อไปนี้ก่อนที่ bundleMDX ของคุณจะชี้ Esbuild โดยตรงที่การปฏิบัติการที่ถูกต้องสำหรับแพลตฟอร์มของคุณ

 นำเข้าพา ธ จาก 'path'if (process.platform ===' win32 ') {
  process.env.esbuild_binary_path = path.join (process.cwd (), 'node_modules', 'esbuild', 'esbuild.exe', '
  )} อื่น {
  process.env.esbuild_binary_path = path.join (process.cwd (), 'node_modules', 'esbuild', 'bin', 'esbuild'
  -

ข้อมูลเพิ่มเติมเกี่ยวกับปัญหานี้สามารถพบได้ในบทความนี้

แรงบันดาลใจ

ขณะที่ฉันเขียนใหม่ kentcdodds.com เพื่อรีมิกซ์ฉันตัดสินใจว่าฉันต้องการเก็บโพสต์บล็อกของฉันเป็น MDX แต่ฉันไม่ต้องการรวบรวมพวกเขาทั้งหมดในเวลาที่สร้างหรือต้องใช้ใหม่ทุกครั้งที่ฉันแก้ไขการพิมพ์ผิด ดังนั้นฉันจึงทำสิ่งนี้ซึ่งช่วยให้เซิร์ฟเวอร์ของฉันสามารถรวบรวมตามความต้องการ

วิธีแก้ปัญหาอื่น ๆ

มี MDX-Remote ถัดไป แต่มันเป็นคอมไพเลอร์ MDX มากกว่า Bundler (ไม่สามารถรวม MDX ของคุณสำหรับการพึ่งพา) นอกจากนี้ยังมุ่งเน้นไปที่ next.js ในขณะที่นี่คือ Meta-Framework Agnostic

ปัญหา

ต้องการมีส่วนร่วม? มองหาฉลากฉบับแรกที่ดี

- ข้อบกพร่อง

โปรดยื่นปัญหาสำหรับข้อบกพร่องเอกสารที่ขาดหายไปหรือพฤติกรรมที่ไม่คาดคิด

ดูข้อบกพร่อง

คำขอคุณสมบัติ

โปรดยื่นปัญหาเพื่อแนะนำคุณสมบัติใหม่ โหวตตามคำขอคุณสมบัติโดยการเพิ่ม A? สิ่งนี้จะช่วยให้ผู้ดูแลจัดลำดับความสำคัญของสิ่งที่จะทำงาน

ดูคำขอคุณสมบัติ

ผู้มีส่วนร่วม

ขอบคุณไปกับคนเหล่านี้ (คีย์อีโมจิ):

_{Kent C. Dodds} -	_{เบ็นวิส} - -	_{อดัม Laycock} - -	_{ติตัส} - -	_{คริสเตียนเมอร์ฟี} -	_{เปโดร Duarte}	_{Erik Rasmussen}
_{Omar Syx} -	_GaëlHaméon	_{Gabriel Loiácono}	_{Spencer Miskoviak}	_{แคสเปอร์}	_{Apostolos Christodoulou}	_{Yordis Prieto}
_Xoumi	_{ยาซีน}	_{Mohammed 'Mo' Mulazada}	_{สามารถ rau ได้}	_{Hosenur Rahaman}	_{Maciek Sitkowski}	_{พรีธี}
_{โมเส้}	_Stefanprobst	_{วลาดโมโรซ}