Vue Academy · Урок

Настройка библиотечного режима Vite

build.lib в vite.config.ts, точка входа, форматы (es/cjs/umd) и внешние зависимости

Урок 1 из 413 шагов

«Настройка библиотечного режима Vite» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 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 дублирует её и нарушает реактивность. Объявите её внешней зависимостью.

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 указывать vue в rollupOptions.external?

Ответь в интерактивном уроке

Итоги

Режим библиотеки Vite настраивается в build.lib с помощью файла entry, выполняющего роль общего входного файла, имени name, массива formats (es и cjs) и функции fileName. Объявите vue (и одноранговые зависимости) внешней через rollupOptions.external и сопоставьте глобальные переменные UMD с помощью output.globals, чтобы Vue предоставлялась пользователем.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Настройка библиотечного режима Vite» бесплатный?

Да — полный текст урока «Настройка библиотечного режима Vite» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка библиотечного режима Vite»?

build.lib в vite.config.ts, точка входа, форматы (es/cjs/umd) и внешние зависимости Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка библиотечного режима Vite»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка библиотечного режима Vite
Объявления TypeScript для библиотек компонентов
Удаление неиспользуемого кода и автоматический импорт
Публикация в npm и семантическое версионирование

← Назад к Vue Academy