【记录】如何造一个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"
}
到这里，项目基本的雏形已经有了，接下来就是继续完善开发环境。下一节在再见
最后再来推广一波
- 仓库链接: vite-plugin-vue-docs
- 在线体验: 解析.vue 文件，自动生成文档
