如何创建含Vue3组件的TypeScript插件包？打包及导入问题咨询

问题核心 #

tsc 本身无法处理 .vue 单文件组件，因为它仅负责编译TypeScript/JavaScript代码，不支持Vue单文件组件的语法解析。下面提供两种可行的解决方案：

方案一：构建后发布编译好的包（推荐） #

通过Vue官方构建工具（Vite或Vue CLI）将源码编译成可直接导入的产物，适合大多数生产场景。

1. 使用Vite配置库模式 #

在插件包根目录创建 vite.config.ts：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/index.ts', // 你的模块入口文件
      name: 'WidgetModule',
      fileName: (format) => `widget-module.${format}.js`
    },
    rollupOptions: {
      // 排除Vue作为外部依赖，避免主项目重复打包
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

2. 配置package.json #

{
  "name": "your-widget-package",
  "version": "1.0.0",
  "main": "./dist/widget-module.umd.js",
  "module": "./dist/widget-module.es.js",
  "types": "./dist/index.d.ts", // 确保生成类型定义
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "vite build && tsc --emitDeclarationOnly"
  },
  "peerDependencies": {
    "vue": "^3.0.0" // 声明Vue为对等依赖，由主项目提供
  }
}

3. 编译并发布 #

运行 npm run build 生成编译产物，之后执行 npm publish 发布到npm仓库。主项目安装后可直接导入使用。

方案二：发布未构建的源码，由主项目编译 #

这种方案可行，但需要主项目配合配置，适合内部协作或特殊定制场景。

1. 配置插件包的package.json #

{
  "name": "your-widget-package",
  "version": "1.0.0",
  "source": "./src/index.ts", // 指向源码入口
  "types": "./src/index.d.ts", // 类型定义文件路径
  "files": [
    "src"
  ],
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

2. 主项目配置调整 #

• 如果主项目用Vite，在 vite.config.ts 中添加：

  export default defineConfig({
    optimizeDeps: {
      include: ['your-widget-package']
    }
  })
  

• 如果主项目用Vue CLI，在 vue.config.js 中配置：

  module.exports = {
    transpileDependencies: ['your-widget-package']
  }
  

注意事项 #

• 主项目必须安装Vue相关编译依赖（如 @vitejs/plugin-vue 或 vue-loader），且版本与插件包兼容。
• 插件包中的TypeScript代码需确保主项目能正确解析，可在插件根目录提供 tsconfig.json 作为参考。

额外提示 #

• 将 WidgetModule 接口抽成单独的类型文件（如 src/types/widget.ts），确保主项目能正确识别类型。
• 发布前测试两种导入方式：构建后导入和源码导入，验证组件功能与类型提示是否正常。

内容的提问来源于stack exchange，提问作者JoeBayLD