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

开始前简单的吹个牛

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插件(1)的更多相关文章

  1. 【记录】如何造一个vite插件(2)

    上一篇已经把vite插件的基础结构搭建起来了,这一次就来聊聊继续完善开发环境. 完善开发环境 生成d.ts文件 先来修改一下lib/index.ts这个文件 export interface user ...

  2. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  3. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

  4. 手把手教你实现一个支持插件化的 uTools 工具箱(一)

    前言 对于前端同学来说,我们会经常用到各种小工具,比如:图床.颜色拾取.二维码生成器.url 管理.文本比对.json 格式化.当然我们可以 chrome 收藏夹来管理各种在线的小工具,但作为一个有追 ...

  5. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  6. 哇 真的是一个好插件!!!Sublime Text编辑文件后快速刷新浏览器

    http://9iphp.com/web/html/sublime-text-refresh-browser.html这篇博文咯 来源:[Tips]Sublime Text编辑文件后快速刷新浏览器 - ...

  7. 如何自己编写一个easyui插件续

    接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”. 参考了combobox的源码中继承combo,当然我这个简单很多了.都是根据自己的理解来 ...

  8. CKEditor在线编辑器增加一个自定义插件

    CKEditor是一个非常优秀的在线编辑器,它的前身就是FCKEditor,CKEditor据官方说是重写了内核的,但功能和性能比FCKEditor更为强大和优越.记得07年的时候第一次接触FCKEd ...

  9. 【转】怎样创建一个Xcode插件(Part 1)

      原文:How To Create an Xcode Plugin: Part 1/3 原作者:Derek Selander 译者:@yohunl 译者注:原文使用的是xcode6.3.2,我翻译的 ...

随机推荐

  1. Nginx 配置文件介绍

    目录 1.1 常用命令 1.2 Nginx的配置文件结构 1.3 Nginx的全局配置 1.4 HTTP服务器配置 1.5 HttpGzip配置 1.6 负载均衡配置 1.7 server虚拟主机配置 ...

  2. UF_TRNS 变换相关

    Open C uf5940uf5941uf5942  矩阵乘积变换uf5943  平移变换uf5944  缩放变换uf5945  旋转变换uf5946  镜像变换uf5947  实现变换,根据变换矩阵 ...

  3. Java-学习日记(Atomic,Volatile)

    很早之前在公司就看到了atomicInteger,atomicLong这些变量了,一直不明白是什么意思,今天花了点时间了解下. volatile: 先从volatile开始讲起,volatile是多线 ...

  4. 基于ABP落地领域驱动设计-06.正确区分领域逻辑和应用逻辑

    目录 系列文章 领域逻辑和应用逻辑 多应用层 示例:正确区分应用逻辑和领域逻辑 学习帮助 系列文章 基于ABP落地领域驱动设计-00.目录和前言 基于ABP落地领域驱动设计-01.全景图 基于ABP落 ...

  5. python-geopandas读取、创建shapefile文件

    作者:fungis 描述:一个热带生活.乐于分享.努力搬砖的giser 交流邮箱:fungis@163.com shapefile是GIS中非常重要的一种数据类型,在ArcGIS中被称为要素类(Fea ...

  6. Vue前端基础学习

    vue-cli vue-cli 官方提供的一个脚手架(预先定义好的目录结构及基础代码,咱们在创建Maven项目的时可以选择创建一个骨架项目,这个骨架项目就是脚手架),用于快速生成一个vue项目模板 主 ...

  7. 关于XXE漏洞

    XXE漏洞 0x01.xxe是什么 介绍 XXE 之前,我先来说一下普通的 XML 注入,这个的利用面比较狭窄,如果有的话应该也是逻辑漏洞 1.1xml定义 XML用于标记电子文件使其具有结构性的标记 ...

  8. 05 jumpserver权限管理

    5.权限管理: 在同一个组下的用1户之间,资产是共享的. (1)为10.0.0.121_slavenode1资产授权: (2)为10.0.0.201_lc-pc资产授权: (3)查看授权列表:

  9. 腾讯互动白板+即时通讯+实时音视频,Android学生端接入

    腾讯互动白板+即时通讯+实时音视频,Android学生端接入 一.简介 线上教学方案:腾讯云互动白板(Tencent Interactive Whiteboard,TIW)+即时通信(Instant ...

  10. Vue $refs无法操作element-ui组件

    比如我要操作这个dom元素↓↓↓ <el-badge :value="1" :max="99" class="message"> ...