Vue Academy · 课时

发布 Vue 插件并添加类型

Q: 「发布 Vue 插件并添加类型」这节课中我会学到什么？

包结构、扩展 ComponentCustomProperties 的 TypeScript 声明，以及 npm 分发 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

包结构、扩展 ComponentCustomProperties 的 TypeScript 声明，以及 npm 分发

第 4 / 4 课13 个步骤

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

为 npm 打包插件

要共享 Vue 插件，您需要将其作为 npm 包发布。该包必须声明正确的依赖项、提供适当的构建结果、包含 TypeScript 类型，并以正确的方式发布。本课将介绍每个步骤。

Vue 的 peerDependencies

请将 Vue 列为peerDependency，而不是常规依赖项。这样可以确保由宿主 app 提供 Vue，避免同一个捆绑包中出现两份 Vue（这会破坏响应性）。

{
  "name": "vue-toast-kit",
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vue": "^3.4.0"
  }
}

Vite 库模式

使用 Vite 的库模式构建包。使用入口、名称和输出格式（ES + UMD）配置 build.lib，并将 Vue 标记为外部依赖，使其不会被打包。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'VueToastKit',
      fileName: 'index',
      formats: ['es', 'umd']
    }
  }
})

在 rollupOptions 中将 Vue 设为外部依赖

将 vue 标记为外部依赖，并在 UMD 构建中将其映射到一个全局变量，这样使用的就是使用者的 Vue。

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: { vue: 'Vue' }
    }
  }
}

生成类型声明

请提供 .d.ts 文件，让使用者获得自动补全和类型检查。使用 vite-plugin-dts 在库构建期间生成声明。

import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    dts({ insertTypesEntry: true })
  ]
})

package.json 导出映射

使用 exports 字段将使用者指向正确的文件，公开 ESM 构建结果和类型声明。对于以 ESM 为优先的包，请将 type: module 设置为 ESM。

{
  "type": "module",
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  }
}

发布类型扩展

如果插件添加了全局属性（例如 this.$toast），请将 ComponentCustomProperties 扩展包含在发布的类型中，这样使用者的编辑器就能自动识别它。

// src/types.d.ts (included in the build)
import type { ToastService } from './toast'

declare module 'vue' {
  interface ComponentCustomProperties {
    $toast: ToastService
  }
}

export {}

公共入口

src/index.ts 入口应将插件作为默认导出，同时导出使用者所需的可组合函数、键和类型。

import ToastPlugin from './plugin'
export default ToastPlugin

export { useToast } from './composable'
export { toastKey } from './toast'
export type { ToastService, Toast } from './toast'

文件字段

使用 files 字段仅发布构建输出，使包保持小巧，并排除源代码和配置。

{
  "files": ["dist"],
  "sideEffects": false
}

使用来源证明发布

使用来源证明发布到 npm。它会以加密方式将软件包与 CI 构建和源代码提交关联起来。请在具有正确权限的可信 CI（GitHub Actions）中执行发布。

# in CI (GitHub Actions)
npm publish --provenance --access public

# package.json can also set:
# "publishConfig": { "provenance": true }

发布前检查清单

发布前请确认：Vue 是对等依赖项，dist 包含 ESM 和类型声明，exports 能正确解析，版本已更新，并且试运行结果正确。

# inspect what will be published
npm publish --dry-run

# verify the tarball contents
npm pack

快速检查

请检验您对发布 Vue 插件的理解。

在交互式课程中回答

回顾

您学会了如何发布插件并为其添加类型：

将 Vue 列为peerDependency，避免出现重复的 Vue
使用 Vite库模式构建，并将 Vue 设为外部依赖
生成 .d.ts（vite-plugin-dts）并发布类型扩展
配置 exports、files 和 type: module
从可信 CI 使用 --provenance 发布

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「发布 Vue 插件并添加类型」课时是免费的吗？

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

「发布 Vue 插件并添加类型」这节课中我会学到什么？

包结构、扩展 ComponentCustomProperties 的 TypeScript 声明，以及 npm 分发你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「发布 Vue 插件并添加类型」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy