从零开始开发一个Vite插件

1 简介

使用vite开发Vue库项目编译需要生成d.ts声明文件以支持ts调用的语法提示，故此编写该组件用来简化d.ts声明文件生成的过程。

2 开发

新建文件夹
mkdir vite-plugin-build-types
cd vite-plugin-build-types

2.1 初始化npm

npm init -y

2.2 添加依赖

yarn add -D vite typescript @types/node rimraf @babel/types
yarn add path fs fast-glob ts-morph @vue/compiler-sfc

2.3 添加命令

{
“main”: “dist/index.js”,
“type”: “module”,
“types”: “dist/index.d.ts”,
“typings”: “dist/index.d.ts”,
“scripts”: {
“dev”: “tsc -w -p .”,
“build”: “rimraf dist && tsc -p .”
},
}

2.3 编码

新建文件src/index.ts

源码地址：https://gitee.com/bitem/vite-plugin-build-types

2.4 开发时建立npm软连接

建立软连接使得可以再不发布的情况下直接在其他项目中引入

npm link

3 其他项目使用

3.1 引入软连接

npm link vite-plugin-build-types

// vite.config.ts
// 无关代码省略，仅保留关键代码

import VitePluginBuildTypes from "vite-plugin-build-types"

export default defineConfig({
  build: {
    // 如果下方插件配置的aim目录与vite编译输出目录一致，则必须配置该项为false，目录不一致，则不需该配置
    emptyOutDir: false,
    rollupOptions: {
      plugins: [
        VitePluginBuildTypes({
          // 项目根目录
          root: path.resolve(__dirname),
          // 源代码目录 string | string[]
          source: path.resolve(__dirname, "src"),
          // 输出目录
          aim: path.resolve(__dirname, "dist")
        })
      ]
    }
    // build end
  }
})

4 发布

yarn publish

5 正式使用

yarn add -D vite-plugin-build-types

NPM包地址：https://www.npmjs.com/package/vite-plugin-build-types