Vue Academy · Lekcja

Konfiguracja trybu biblioteki Vite

build.lib w vite.config.ts, punkt wejścia, formaty (es/cjs/umd) oraz zewnętrzne zależności.

Lekcja 1 z 413 kroki

Konfiguracja trybu biblioteki Vite to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Tryb biblioteki

Tryb biblioteki Vite buduje pakiet przeznaczony do importowania przez inne aplikacje, a nie do uruchamiania jako witryna. Konfiguruje się go w sekcji build.lib pliku vite.config.ts.

Punkt wejścia

Plik entry jest publicznym interfejsem biblioteki — re-eksportuje każdy komponent i każde narzędzie, do których konsumenci powinni mieć dostęp.

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

Konfigurowanie build.lib

Należy wskazać ten plik w build.lib.entry i nadać bibliotece globalną name (używaną w kompilacji UMD).

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

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

Tablica formats

Element formats wybiera formaty modułów wyjściowych. W przypadku nowoczesnych bibliotek ["es", "cjs"] obsługuje bundlery ESM oraz użytkowników Node/CommonJS.

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

Funkcja fileName

fileName może być funkcją przyjmującą format, co pozwala tworzyć odrębne nazwy dla poszczególnych plików wyjściowych.

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

Dlaczego należy traktować Vue jako zewnętrzne

Nie należy dołączać Vue do biblioteki — konsument już je ma. Bundlowanie Vue powoduje jego duplikację i zakłóca reaktywność. Należy oznaczyć je jako zewnętrzne.

rollupOptions.external

W sekcji build.rollupOptions należy umieścić vue na liście external, aby w wynikowym kodzie pozostało importem zamiast zostać wbudowane.

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

output.globals dla UMD

Jeśli emitowana jest również kompilacja UMD, przeglądarka musi znać nazwę zmiennej globalnej każdej zewnętrznej zależności. Należy zmapować vue na globalną zmienną Vue.

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

Oznaczanie zależności peer jako zewnętrznych

Każda zależność peer (zestawy ikon czy biblioteki narzędziowe, które konsument już instaluje) również powinna zostać oznaczona jako zewnętrzna, a nie dołączona do bundla.

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

Budowanie

Należy uruchomić kompilację, aby wygenerować skonfigurowane formaty w dist. Ten sam potok wtyczek (vue, vueJsx) nadal dotyczy plików źródłowych.

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

Zachowanie CSS w osobnym pliku

Style komponentów można wygenerować w osobnym pliku CSS, który konsumenci importują, dzięki czemu bundel JS pozostaje niewielki i mogą oni kontrolować dołączanie stylów.

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

Szybkie sprawdzenie

Dlaczego podczas budowania biblioteki Vue należy umieścić vue na liście rollupOptions.external?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Tryb biblioteki Vite konfiguruje się w sekcji build.lib za pomocą pliku wejściowego entry, wartości name, tablicy formats (es i cjs) oraz funkcji fileName. Należy oznaczyć vue (i zależności peer) jako zewnętrzne za pomocą rollupOptions.external oraz zmapować zmienne globalne UMD za pomocą output.globals, aby Vue było dostarczane przez konsumenta.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Konfiguracja trybu biblioteki Vite” jest bezpłatna?

Tak — pełny tekst „Konfiguracja trybu biblioteki Vite” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja trybu biblioteki Vite”?

build.lib w vite.config.ts, punkt wejścia, formaty (es/cjs/umd) oraz zewnętrzne zależności. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja trybu biblioteki Vite”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja trybu biblioteki Vite
Deklaracje TypeScript dla bibliotek komponentów
Tree-shaking i automatyczny import
Publikowanie w npm i wersjonowanie semantyczne

← Powrót do Vue Academy