在此之前，先做个定位，这不是一篇纯正的技术性文章，能够把它了解成一个叙述文章，记录我开发插件的过程。

开始前简略的吹个牛

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.tsimport { 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 -yyarn add lerna -Dnpx lerna initnpx lerna create vue-docsnpx 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.jsmodule.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.tsfunction sum(a, b) {  return a + b;}sum(1, 2);exports.sum = sum;

到这里根本 vue-docs 的搭建也算实现了，最初把命令加载 package.json scripts中

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

到这里，我的项目根本的雏形曾经有了，接下来就是持续欠缺开发环境。下一节在再见

最初再来推广一波

  • 仓库链接: vite-plugin-vue-docs
  • 在线体验: 解析.vue 文件，主动生成文档