Vite构建vue3-drag-resize-rotate包：入口解析失败及TS类型导出问题

一、修复包入口解析失败问题 #

• 修正package.json的入口配置，确保路径指向打包后的正确文件，示例配置：

{
  "name": "vue3-drag-resize-rotate",
  "main": "./dist/vue3-drag-resize-rotate.umd.js",
  "module": "./dist/vue3-drag-resize-rotate.es.js",
  "exports": {
    ".": {
      "import": "./dist/vue3-drag-resize-rotate.es.js",
      "require": "./dist/vue3-drag-resize-rotate.umd.js"
    }
  },
  // 其他字段...
}

• 确保vite.config.ts的lib配置正确，指定入口、输出名称及格式，示例：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/index.ts', // 你的组件入口文件路径
      name: 'Vue3DragResizeRotate',
      fileName: (format) => `vue3-drag-resize-rotate.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

• 重新执行npm run build，确认dist目录下生成了对应格式的umd和es模块文件，无打包报错。

二、修复TypeScript类型推导问题 #

• 在package.json中添加types字段，指向生成的类型文件：

{
  "types": "./dist/index.d.ts",
  // 其他字段...
}

• 在vite.config.ts的build配置中开启自动生成类型文件：

build: {
  // 已有lib配置...
  dts: true, // 自动生成类型文件到dist目录
}

若需自定义类型输出规则，可配置dts对象：

build: {
  dts: {
    entryRoot: './src',
    outputDir: './dist',
    include: ['src/**/*.ts', 'src/**/*.vue']
  }
}

• 确保入口文件（如src/index.ts）正确导出组件及相关类型，示例：

import Vue3DragResizeRotate from './components/Vue3DragResizeRotate.vue'
import type { DragResizeRotateProps, DragResizeRotateEmits } from './types'

export { Vue3DragResizeRotate }
export type { DragResizeRotateProps, DragResizeRotateEmits }

// 可选：支持Vue插件全局注册
export default {
  install(app: any) {
    app.component('Vue3DragResizeRotate', Vue3DragResizeRotate)
  }
}

• 重新打包后，检查dist目录下是否生成index.d.ts文件，将包安装到项目后即可获得完整的类型提示。

内容的提问来源于stack exchange，提问作者Norman Yonion Chen