Vue Academy · Pelajaran

Konfigurasi Mode Pustaka Vite

build.lib dalam vite.config.ts, titik masuk, format (es/cjs/umd), serta dependensi eksternal.

Konfigurasi Mode Pustaka Vite adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mode Pustaka

Mode pustaka Vite membangun paket yang dimaksudkan untuk diimpor oleh aplikasi lain, bukan dijalankan sebagai situs web. Anda mengonfigurasinya di bawah build.lib dalam vite.config.ts.

Titik Masuk

Berkas entry adalah antarmuka publik pustaka Anda—berkas ini mengekspor ulang setiap komponen dan utilitas yang dapat diakses pengguna.

// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";

Mengonfigurasi build.lib

Arahkan build.lib.entry ke berkas tersebut dan berikan name global kepada pustaka (yang digunakan untuk build UMD).

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "MyUiLib"
    }
  }
});

Larik formats

formats memilih format modul output. Untuk pustaka modern, ["es", "cjs"] mencakup penggabung ESM dan pengguna Node/CommonJS.

lib: {
  entry: resolve(__dirname, "src/index.ts"),
  name: "MyUiLib",
  formats: ["es", "cjs"]
}

Fungsi fileName

fileName dapat berupa fungsi yang menerima format, sehingga Anda dapat menghasilkan nama yang berbeda untuk setiap output.

lib: {
  // ...
  fileName: (format) => "my-ui-lib." + format + ".js"
}

Mengapa Vue Harus Dijadikan Eksternal

Anda tidak boleh memasukkan Vue ke dalam pustaka—pengguna sudah memilikinya. Memasukkannya akan menggandakan Vue dan merusak reaktivitas. Tandai Vue sebagai eksternal.

rollupOptions.external

Di bawah build.rollupOptions, cantumkan vue dalam external agar tetap menjadi impor pada output, bukan disisipkan langsung.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ["vue"]
  }
}

output.globals untuk UMD

Jika Anda juga menghasilkan build UMD, peramban perlu mengetahui nama variabel global untuk setiap dependensi eksternal. Petakan vue ke global Vue.

rollupOptions: {
  external: ["vue"],
  output: {
    globals: { vue: "Vue" }
  }
}

Menjadikan Dependensi Sejawat Eksternal

Dependensi sejawat apa pun (set ikon atau pustaka utilitas yang sudah dipasang pengguna) juga harus dijadikan eksternal, bukan dimasukkan ke dalam paket.

external: ["vue", "vue-router", "@vueuse/core"]

Membangun

Jalankan proses pembangunan untuk menghasilkan format yang dikonfigurasi ke dalam dist. Alur pengaya yang sama (vue, vueJsx) tetap berlaku untuk berkas sumber.

npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.js

Memisahkan CSS

Gaya komponen dapat dihasilkan sebagai berkas CSS terpisah yang diimpor pengguna. Dengan begitu, paket JS tetap ringkas dan pengguna dapat mengendalikan penyertaan gaya.

// consumer side
import "my-ui-lib/dist/style.css";

Pemeriksaan Singkat

Mengapa vue dicantumkan dalam rollupOptions.external saat membangun pustaka Vue?

Ringkasan

Mode pustaka Vite dikonfigurasi di bawah build.lib dengan berkas agregator entry, name, larik formats (es dan cjs), serta fungsi fileName. Jadikan vue (dan dependensi sejawat) eksternal melalui rollupOptions.external, lalu petakan global UMD dengan output.globals agar pengguna menyediakan Vue.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Konfigurasi Mode Pustaka Vite” gratis?

Ya — teks lengkap “Konfigurasi Mode Pustaka Vite” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Konfigurasi Mode Pustaka Vite”?

build.lib dalam vite.config.ts, titik masuk, format (es/cjs/umd), serta dependensi eksternal. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Konfigurasi Mode Pustaka Vite” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Konfigurasi Mode Pustaka Vite
Deklarasi TypeScript untuk Pustaka Komponen
Tree-Shaking dan Impor Otomatis
Mempublikasikan ke npm dan Penerapan Versi Semantik

← Kembali ke Vue Academy