【记录】如何造一个vite插件（1）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在看文章前，先做个定位，这不是一篇纯粹的技术性文章，可以把它理解成一个叙述文章，记录我开发插件的过程。

开始前简单的吹个牛

vue2 也写了很多年了，多人合作始终避不开用到别人的组件。关键是有些组件没有文档看起来是真的费劲。props还可以直接通过组件看出来，emit,ref,slot代码一多看起来就比较费劲了。也想过一些解决方案，比如每个组件写一个 readme。这就有一个问题，时间太紧了，谁来给你写 readme 哦，开玩笑。

所以如果有一个能够自动解析 vue 组件的东西就好了。在网上搜索了一下，vue 自动生成文档，还真的有这么个东西vuese，基本满足要求，但是有几点不是很满意。

不支持 vue3
每次生成文档需要 run 一下命令，当然也可以用 nodemon 监听。但就是觉得有点 low
ui 不是很好看(这个有点鸡蛋挑骨头,也是后面开始自己造 vite 插件的原因)

总体来说 vuese 是一个很好的项目，我的插件里面很多的思路都是参考(其实就是抄 )了 vuese，我列出他的不好的，只是单纯的给自己找个理由造个轮子。。。

说了这么多你可能已经猜到我要造一个什么插件了，总结一下：

自动解析 vue，并且支持 vue3
支持热更新，写了代码能立即看到实时预览
好看的 ui，最好能够让别人一看到文档就觉得我写的代码很 nb,先不说代码好不好，就看文档就要能唬住人

那么为什么是 vite 插件南？

刚出来没多久，相比于 webpack 轮子比较少
初步了解好像大多数轮子都是用 ts 写的，所以蹭着机会，学一波 ts。
vite 介绍比传统快 10-100 倍，初步体验确实比较快。不过这不是主要原因，主要的是他比较新呀，轮子少，我可以顺势蹭一波热度，说不定火了，就涨工资了。

吹了牛，需求也明确了

一直以为做一个开源最难的不是开发，而是弄到一个好一点的需求。但是这个 vite 插件的开发，还真的有点麻烦，差点就推翻了我的想法。

刚一开始就遇到了一个问题

如何从 vue 文件中获取到 props,slots？

在此之前没有做过类似的项目，也没有遇到过类似的问题，完全不知道如何下手。初步想法是用正则去匹配，仔细想了哈，感觉不是很靠谱，主要是因为我的正则不行。

我想不到怎么去实现，总有人知道怎么做嘛，去瞅瞅vuese怎么实现的。首先看哈 package.json 里面用了那些插件，把不认识的插件全部搜一下，了解有些啥作用。最后发现了这么几个库，可以将 js 代码解析成 ast 语法树，完美的解析 vue。

{ "dependencies": { "@babel/parser": "^7.10.3", "@babel/traverse": "^7.10.3", "@babel/types": "^7.3.0", "vue-template-compiler": "^2.6.11" } }

经常听到 bable 这个东西，却没有深入了解过，没想到 vue 是用 bable 解析出来的，看来还是不行呀

言归正传，一一列举一下他们的作用

插件	作用
@babel/parser	通过 parse 方法将 script 解析成 ast 语法树
@babel/traverse	遍历 ast 语法树，可以更新删除节点
@babel/types	判断当前这个节点是什么类型的
vue-template-compiler	解析.vue 为 ast，vue3 用的是@vue/compiler-sfc

在使用中勒，发现@vue/compiler-sfc 中暴露除了@bable/parse的 parse 方法，bableParse

// compiler-sfc.d.ts import { parse as babelParse } from '@babel/parser'; ... export { babelParse }

同时还发现了一个好工具，可在线将 js 代码转换成 ast：astexplorer

搭建开发环境

解决了一个技术性难题后，就开始创建项目，搭建开发环境了。这里就忽略体验 vite demo 和插件 demo 了。

在awesome-vite,看了很多的插件源码，总结了一下几个特点

几乎都有两个项目，一个是插件源码，一个是 example 实例，有些插件是 vue、react 等多个框架公用的还会有多个实例
开发环境为了快速打包环境，用的比较多的是 tsup、tsc 这两个插件
因为是源码是 ts 的需要打包成 js，所以 package.json 里面都要 main,types 这两个字段

基础项目结构创建

既然有了这些特点，就可以创建项目，逐步搭建开发环境了

大概的目录结构是这样的

- pacakges/ -vue-docs # 插件源码 - example # example - packages.json

看到这个 packages，里面还有多个模块，首先想到的就是 lerna + yarn + workspaces，所以直接一把梭

yarn init -y yarn add lerna -D npx lerna init npx lerna create vue-docs npx lerna create @vue-docs/exampe # 本来应该是这样的，但是example他是一个vite的vue项目，所以用vite来创建 yarn create vite

最后的目录是这样的

- .git - pacakges/ - example # vite创建的vue项目 - ... - vue-docs # 插件代码 - ... - lerna.json - package.json

修改一下 package.json，结果如下

{ "name": "monorepo", // 参考了一下lerna的写法 "version": "0.0.0", // 0.0.0 "main": "index.js", "license": "MIT", "devDependencies": { "lerna": "^4.0.0" }, // 新增的 "private": true, "workspaces": ["packages/*"] }

项目结构有了，接下来搞一搞vue-docs这个目录

vue-docs 插件目录的搭建

前面已经说了，大多数插件用的都是 ts，并且用到了 tsup/tsc 这两个插件。所以就按照这个标准去搭建

先来安装插件, 这里就直接使用 tsup 了

yarn workspace vue-docs add typescript tsup @babel/preset-typescript @babel/preset-env -D

配置 bable.config.js

// babel.config.js module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript", ], };

在 lib 中新建一个 index.ts,测试一下

export function sum(a: number, b: number): number { return a + b; }sum(1, 2);

npx tsup ./lib/index.ts

发现生成了一个 dist/index.js 文件

"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // lib/index.ts function sum(a, b) { return a + b; } sum(1, 2);exports.sum = sum;

到这里基本 vue-docs 的搭建也算完成了，最后把命令加载 package.jsonscripts中

{ "scripts": "tsup ./lib/index.ts" }

到这里，项目基本的雏形已经有了，接下来就是继续完善开发环境。下一节在再见

最后再来推广一波