Vue Academy · 课时

Vite 库模式配置

Q: 「Vite 库模式配置」这节课中我会学到什么？

vite.config.ts 中的 build.lib、入口点、格式（es/cjs/umd），以及外部依赖 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

vite.config.ts 中的 build.lib、入口点、格式（es/cjs/umd），以及外部依赖

Vite 库模式配置 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

库模式

Vite 的库模式用于构建供其他应用导入的软件包，而不是用于运行网站。您可以在 vite.config.ts 的 build.lib 下进行配置。

入口点

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"]
  }
}

用于 UMD 的 output.globals

如果还要输出 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 函数。通过 rollupOptions.external 外置 vue（以及对等依赖），并使用 output.globals 映射 UMD 全局变量，让使用者提供 Vue。

常见问题解答

「Vite 库模式配置」课时是免费的吗？

是的 — 「Vite 库模式配置」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Vite 库模式配置」这节课中我会学到什么？

vite.config.ts 中的 build.lib、入口点、格式（es/cjs/umd），以及外部依赖你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Vite 库模式配置」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy