การบันเดิลด้วย Rollup และ tsup สำหรับไลบรารี

การตั้งค่าเริ่มต้นของ Vite ปรับให้เหมาะกับแอปพลิเคชัน โดยจะรวมไฟล์ จัดการทรัพยากร และสร้าง index.html สำหรับไลบรารีคอมโพเนนต์ คุณต้องการผลลัพธ์ที่แตกต่างออกไป นั่นคือไฟล์ JavaScript แบบ ESM/CJS ล้วนที่ไม่มีค่าใช้จ่ายขณะทำงาน ไม่มี React ที่รวมมาด้วย และมีคำประกาศ TypeScript ที่ถูกต้อง โหมดไลบรารีของ Vite ใช้งานได้ แต่ Rollup และ tsup ออกแบบมาเฉพาะทางกว่าสำหรับงานนี้

Rollup เป็นตัวรวมไฟล์มาตรฐานสำหรับไลบรารี JavaScript มาหลายปีแล้ว โดยสร้างผลลัพธ์ที่สะอาดและมีประสิทธิภาพ พร้อมการตัดโค้ดที่ไม่ได้ใช้งานอย่างยอดเยี่ยม และรองรับรูปแบบผลลัพธ์ทั้ง ESM และ CJS การยกขอบเขตโมดูลของ Rollup ช่วยขจัดค่าใช้จ่ายส่วนเกินจากตัวห่อโมดูล ทำให้ได้ชุดไฟล์ไลบรารีที่มีขนาดเล็กที่สุดเท่าที่เป็นไปได้

tsup เป็นตัวรวมไฟล์ TypeScript ที่ไม่ต้องตั้งค่า โดยขับเคลื่อนด้วย esbuild และทำงานเร็วกว่า Rollup อย่างมาก (esbuild คอมไพล์เสร็จในระดับไมโครวินาที เทียบกับระดับมิลลิวินาที) การตั้งค่าขั้นต่ำคือ { entry: ['src/index.ts'], format: ['esm', 'cjs'], dts: true } ซึ่งสร้างทั้งรูปแบบโมดูลและคำประกาศ TypeScript โดยอัตโนมัติ

ตัวเลือกหลักของ tsup ได้แก่ จุดเข้า ซึ่งเป็นอาร์เรย์ของไฟล์จุดเข้า รูปแบบ ใช้ระบุรูปแบบผลลัพธ์: ['esm', 'cjs'] คำประกาศ: true จะสร้างไฟล์คำประกาศ TypeScript .d.ts ควบคู่กับผลลัพธ์ JS เป้าหมาย ใช้กำหนดสภาพแวดล้อม JavaScript ขั้นต่ำ (esnext หรือ es2020) และ การแยกไฟล์: false จะทำให้ผลลัพธ์อยู่ในไฟล์เดียว

esbuild (ผ่าน tsup) คอมไพล์ได้เร็วกว่า Rollup 10–100 เท่า Rollup สร้างผลลัพธ์ที่ปรับให้เหมาะสมกว่าเล็กน้อย โดยมีระดับความละเอียดในการตัดส่วนที่ไม่ใช้งานและการควบคุมขอบเขตของชังก์ที่ดีกว่า สำหรับไลบรารีคอมโพเนนต์ส่วนใหญ่ ความเร็วของ tsup เหมาะกว่าในระหว่างการพัฒนา หากต้องการควบคุมการตัดส่วนที่ไม่ใช้งานอย่างละเอียดที่สุด หรือต้องตั้งค่าหลายจุดเริ่มต้นที่ซับซ้อน ควรใช้ Rollup

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

ในการกำหนดค่า tsup ให้ใช้ตัวเลือก external: external: ['react', 'react-dom'] ในการกำหนดค่า Rollup ให้ตั้งค่า external: ['react', 'react-dom', 'react/jsx-runtime'] ให้รวม react/jsx-runtime ด้วย หากไลบรารีของคุณใช้ JSX Transform และให้กำหนดข้อกำหนดร่วมอื่น ๆ ที่ไลบรารีของคุณประกาศไว้เป็นรายการภายนอกด้วย

การกำหนดค่า Rollup ขั้นต่ำสำหรับไลบรารี TypeScript ต้องใช้ปลั๊กอินสามตัว ได้แก่ @rollup/plugin-typescript สำหรับคอมไพล์ TypeScript, @rollup/plugin-node-resolve เพื่อแก้ไขการนำเข้าจาก node_modules และ @rollup/plugin-commonjs เพื่อแปลง dependency ของ CommonJS เป็น ESM สำหรับบันเดิล ให้เพิ่ม rollup-plugin-dts สำหรับไฟล์ประกาศด้วย

ผลลัพธ์ทั่วไปของไลบรารีที่รองรับสองรูปแบบ ได้แก่ dist/esm/index.js และ dist/esm/index.d.ts สำหรับผู้ใช้ ESM รวมถึง dist/cjs/index.js และ dist/cjs/index.cjs สำหรับผู้ใช้ CJS ฟิลด์ exports ใน package.json จะจับคู่เส้นทางเหล่านี้กับสภาพแวดล้อมที่ถูกต้อง ไฟล์ประกาศ TypeScript จะอยู่คู่กับไฟล์ JS ที่สอดคล้องกัน

ไลบรารีขนาดใหญ่จะได้ประโยชน์จากจุดเริ่มต้นหลายจุด เพื่อให้ผู้ใช้สามารถนำเข้าเฉพาะสิ่งที่ต้องการได้ ตัวอย่างเช่น entry: ['src/index.ts', 'src/utils.ts', 'src/hooks.ts'] จุดเริ่มต้นแต่ละจุดจะมีไฟล์ผลลัพธ์ของตัวเอง ฟิลด์ exports ใน package.json จะจับคู่เส้นทางสาธารณะแต่ละเส้นทางกับผลลัพธ์ของตนเอง: './utils' → './dist/utils.js'

เพิ่มคำสั่งสร้างลงในสคริปต์ของ package.json: "build": "tsup" tsup จะอ่านการกำหนดค่าจาก tsup.config.ts ที่ไดเรกทอรีราก สคริปต์ prepublish ควรเรียกใช้การสร้าง: "prepublishOnly": "npm run build" เพื่อให้แน่ใจว่าแพ็กเกจของคุณถูกสร้างเสมอก่อนเผยแพร่ไปยัง npm

เหตุใดจึงต้องทำเครื่องหมายให้ React เป็นภายนอกเมื่อรวมไลบรารีคอมโพเนนต์ React

tsup ซึ่งขับเคลื่อนด้วย esbuild ให้การสร้างบันเดิลที่รวดเร็วโดยไม่ต้องกำหนดค่ามาก โดยใช้ format: ['esm', 'cjs'] และ dts: true ส่วน Rollup ให้การควบคุมการตัดส่วนที่ไม่ใช้งานในระดับละเอียดกว่าเมื่อใช้ @rollup/plugin-typescript กฎสำคัญคือ ต้องทำเครื่องหมายให้ react, react-dom และข้อกำหนดร่วมทั้งหมดเป็นรายการภายนอกเสมอ เพื่อป้องกันไม่ให้รวมสิ่งเหล่านี้ไว้ในบันเดิล ให้สร้างผลลัพธ์ไว้ใน dist/esm/ และ dist/cjs/ พร้อมไฟล์ประกาศ TypeScript ที่สร้างควบคู่กัน จุดเริ่มต้นหลายจุดช่วยให้ผู้ใช้สามารถตัดส่วนที่ไม่ใช้งานได้อย่างละเอียด