Vite 开发插件如何生成 .d.ts 类型声明文件

随着 Vue3 生态的不断扩展与日渐成熟，Vue3 已从最开始的尝鲜阶段步入到投入生产项目中。随之而来的还有开发脚手架的更新换代，全新的 Vite 脚手架，基于 esbuild 利用 go 语言的性能优势，相较 Webpack 有着不在一个量级的性能优势，打包方面基于 Rollup 拓展，继承了轻量化和明朗的插件 Api 的优点。

什么，你还不知道？你该抓紧了。

Vue3 官方中文文档

Vite 官方中文文档

废话不多说，开始进入的正题。

创建项目

本文重点讲述如何生成类型声明文件，因此项目创建部分只一些简单描述。

通过官方提供的模版快速搭建一个简单的项目：

yarn create @vitejs/app my-vue-app --template vue-ts

随后更名 src/main.ts 为 src/index.ts 并修改其内容：

export { default as App } from './App.vue'

不要在意 App 这个名字，我们只是假设我们写了一个组件，并且作为插件导出。

接着调整 vite.config.ts 的配置为库模式打包：

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

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

至此，一个简单的插件项目就完成了。

生成类型声明文件

以前在开发 Rollup 插件时，我们主要借助 rollup-plugin-typescript2 这个插件来实现根据源码生成 .d.ts 声明文件。

但是该插件存在几个问题，一是无法解析 .vue 文件，二是在 Vite + Vue3 的环境下，存在不兼容性（三是 Vite 内部支持 typescript，该插件存在很大部分的重复功能），说白了就是不太靠谱。

当然，也有人在 issue 中提出希望 Vite 内部支持在库模式打包时导出声明文件，但 Vite 官方表示不希望因此增加维护的负担和结构的复杂性。

因此在 Vite 开发中，我们要想一些其他办法来生成声明文件。

本文介绍的生成方式还是依赖一些现成的库，然后通过一些编程脚本以达到目的，毕竟从打包原理开始讲，那篇幅可能不太够。

安装生成声明文件用到的库：

yarn add ts-morph -D

其实 .vue 文件想要生成类型声明文件的核心点在于把