การกำหนดค่าโหมดไลบรารีของ Vite
build.lib ใน vite.config.ts จุดเริ่มต้น รูปแบบ (es/cjs/umd) และการขึ้นต่อกันภายนอก
การกำหนดค่าโหมดไลบรารีของ Vite เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
โหมดไลบรารี
โหมดไลบรารีของ Vite จะสร้างแพ็กเกจที่มีไว้ให้นำเข้าโดยแอปอื่น แทนที่จะทำงานเป็นเว็บไซต์ คุณกำหนดค่าโหมดนี้ภายใต้ build.lib ใน vite.config.ts
ไฟล์จุดเข้า
ไฟล์ entry คือส่วนติดต่อสาธารณะของไลบรารี โดยส่งออกคอมโพเนนต์และเครื่องมือทุกอย่างที่ผู้ใช้แพ็กเกจควรเข้าถึงอีกครั้ง
// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";การกำหนดค่า build.lib
กำหนด build.lib.entry ให้ชี้ไปยังไฟล์นั้น และตั้งค่า name ทั่วทั้งระบบให้ไลบรารี ซึ่งจะใช้กับการสร้างแบบ UMD
import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib"
}
}
});อาร์เรย์รูปแบบผลลัพธ์
formats ใช้เลือกรูปแบบโมดูลผลลัพธ์ สำหรับไลบรารีสมัยใหม่ ["es", "cjs"] ครอบคลุมตัวรวมโมดูล ESM และผู้ใช้ Node/CommonJS
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib",
formats: ["es", "cjs"]
}ฟังก์ชัน fileName
fileName สามารถเป็นฟังก์ชันที่รับรูปแบบ ทำให้คุณสร้างชื่อที่แตกต่างกันสำหรับผลลัพธ์แต่ละรูปแบบได้
lib: {
// ...
fileName: (format) => "my-ui-lib." + format + ".js"
}เหตุผลที่ต้องแยก Vue เป็นภายนอก
ห้ามรวม Vue ไว้ในไลบรารีของคุณ เพราะผู้ใช้แพ็กเกจมี Vue อยู่แล้ว การรวม Vue จะทำให้มี Vue ซ้ำและทำให้การตอบสนองเสียหาย ให้กำหนดเป็นรายการภายนอก
rollupOptions.external
ภายใต้ build.rollupOptions ให้ระบุ vue ใน external เพื่อให้ยังคงเป็นการนำเข้าในผลลัพธ์ แทนที่จะถูกแทรกเนื้อหาไว้ภายใน
build: {
lib: { /* ... */ },
rollupOptions: {
external: ["vue"]
}
}output.globals สำหรับ UMD
หากสร้างผลลัพธ์แบบ UMD ด้วย เบราว์เซอร์จำเป็นต้องทราบชื่อตัวแปรทั่วทั้งระบบสำหรับรายการภายนอกแต่ละรายการ ให้จับคู่ vue กับตัวแปรทั่วทั้งระบบชื่อ Vue
rollupOptions: {
external: ["vue"],
output: {
globals: { vue: "Vue" }
}
}การแยกการพึ่งพาของผู้ใช้แพ็กเกจเป็นภายนอก
การพึ่งพาใด ๆ ที่ผู้ใช้แพ็กเกจจัดเตรียมไว้แล้ว เช่น ชุดไอคอนและไลบรารีเครื่องมือ ก็ควรแยกเป็นภายนอกเช่นกัน ไม่ควรรวมไว้ในแพ็กเกจ
external: ["vue", "vue-router", "@vueuse/core"]การสร้าง
เรียกใช้การสร้างเพื่อสร้างผลลัพธ์ตามรูปแบบที่กำหนดค่าไว้ลงใน dist กระบวนการปลั๊กอินชุดเดิม (vue, vueJsx) ยังคงใช้กับไฟล์ต้นฉบับ
npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.jsแยก CSS ไว้ต่างหาก
สไตล์ของคอมโพเนนต์สามารถสร้างเป็นไฟล์ CSS แยกต่างหากให้ผู้ใช้แพ็กเกจนำเข้าได้ ซึ่งช่วยให้ชุดรวม JS มีขนาดเล็กและเปิดให้ผู้ใช้ควบคุมการรวมสไตล์
// consumer side
import "my-ui-lib/dist/style.css";ตรวจสอบอย่างรวดเร็ว
เหตุใดจึงต้องระบุ vue ใน rollupOptions.external เมื่อสร้างไลบรารี Vue
สรุป
โหมดไลบรารีของ Vite กำหนดค่าภายใต้ build.lib โดยมีไฟล์รวมจุดเข้า entry ค่า name อาร์เรย์ formats (es และ cjs) และฟังก์ชัน fileName แยก vue (รวมถึงการพึ่งพาของผู้ใช้แพ็กเกจ) เป็นภายนอกผ่าน rollupOptions.external และจับคู่ตัวแปรทั่วทั้งระบบของ UMD ด้วย output.globals เพื่อให้ผู้ใช้แพ็กเกจเป็นผู้จัดเตรียม Vue
คำถามที่พบบ่อย
บทเรียน “การกำหนดค่าโหมดไลบรารีของ Vite” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดค่าโหมดไลบรารีของ Vite” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดค่าโหมดไลบรารีของ Vite”
build.lib ใน vite.config.ts จุดเริ่มต้น รูปแบบ (es/cjs/umd) และการขึ้นต่อกันภายนอก คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดค่าโหมดไลบรารีของ Vite” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดค่าโหมดไลบรารีของ Vite
- คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์
- การตัดโค้ดที่ไม่ใช้และการนำเข้าอัตโนมัติ
- การเผยแพร่ไปยัง npm และการกำหนดเวอร์ชันเชิงความหมาย