目的
有时候学一个东西,感觉学会了, 但其实动手就废, 还耽误了不少时间, 所以有必要学习一下优秀的源码, 虽然也花时间, 但真有磨刀不误砍柴功的效果
起因
我想学习vue-demi, 看介绍讲开发出来的组件既能在vue2中使用,也能在vue3中使用, 这太方便了, 公司老项目都是vue2写的, 要扩展插件, 还得用vue2写, 然后新项目又是vue3写的, 写完还得升成3, 虽然有@vue/composition-api支持在vue2中写3的代码, 但还是不方便, 发布插件时还得vue2和vue3分开发,太难受了, 一了百了用上vue-demi,我就发布一个插件, 2和3一起用, 维护时也只维护一套, 它不香么?
问题
- 目前大多数vue-demi都是用rend函数写的, 支持模板书写和发布么?
- 咋发布一个支持两版本的, 是不是v2和v3要打包两套?
- 写出来了咋测试它同时支持v2和v3呢?
意外收获
要回答上面的问题, 先讲讲我的意外收获, 答案也在收获里面
- codesandbox JavaScript线上沙箱环境——codesandbox.io,
一、 任何地方都能写代码：一个完备的线上web开发 IDE
二、快速开始：codesandbox拥有所有流行框架的模板，方便你快速创建项目
三、急速构建原型：你可以在 codesandbox 上创建web app，试验代码和想法，分享创作
docs.js 里面写的就是怎么自动生成codesandbox, 有兴趣的小伙伴可以看源码
这里面自动生成完了codesandbox, 还自动生成md, md里面还写着codesandbox的地址, 艾玛, 真的简直不要太方便!
写到这里其实已经解决第3个问题
- cdn.jsdelivr.net引用cdn 看sandbox时发现,引用的链接都是cdn的, 还是自动的, 于是去百度查了查,发现只要是发布到npm上的资源都可以自动生成cdn,而且速度还杠杠的, 于是我实验了一下我开源的尺规组件, 还真有 cdn.jsdelivr.net/npm/vue3-sk…
规则是: 前缀+ 包名+版本 +位置
前缀: https://cdn.jsdelivr.net/npm/
包名:vue3-sketch-ruler
版本: @1.2.6
位置:(自己定义的,不清楚查看package.json的main) lib/index.es.js
有了这家伙,后面做啥新插件要测试或者分享,或者给某插件提bug,或pr, 直接一个沙箱链接过去, 杠杠的!
vue-echarts
这插件是支持echarts用vue的方式去书写的一个中转插件, 早就知道, 但还有一个特效, 它就是支持v2和v3同时使用的插件, 咱们来扒扒源码,它咋实现的
先首先用看源码必备神器---agmd 一个agmd命令,把目录结构和注释给扒下来, 关于这个插件的具体使用方法,点击链接可以看到, 其中代码注释是我事先看源码,标注好的， 有需要的可以点击链接下载
sandbox中是codesandbox配置的一些代码用来演示v2和v3不同情况使用的测试案例
docs.js功能也挺强大的,能够自动生成该工程的readme文件, 自动贴上codesandbox的链接
ECharts.ts作为核心主功能, 里面使用了主角vue-demi替换vue使用
模板使用render函数
这个是关键，目前支持vue-demi的插件都是写的render函数，因为v2和v3都支持这种渲染方式
其他就是一些常规操作吧, 这里就不一一解读了
解决问题一: 目前大多数vue-demi都是用rend函数写的, 支持模板书写和发布么?
- 首先打包vue模板是个问题, vue2和vue3打包出来的模板一样么? 能通用么? 带着这个疑问, 我先试试用vite打包一下代码, 毕竟vite是尤大的亲儿子, 打包vue的功能肯定杠杠的, 于是我便新建了一个vite工程, 按vue-demi的方式配了congfig文件，结果打包出来后vue-demi不见了，这样子肯定是在vue2中用不了的，尝试失败
- 使用@vue/compiler-sfc 对模板转成render函数？ git上面找了一波， 没看到什么好的例子
- 相同代码用vue-demi 在vue2中和vue3中分别打两个版本的文件出来，但只维护一个源码，就目前而言可能第三种更加现实，比较v2和v3模板解析不一样，目前得出的结论， 问题二也是这么回事。
这边由于时间原因，为了准备这篇稿子，今天是第二个晚上了，还是先把它给发出来吧，后续我调试成功了， 会在留言中继续回复
下面贴两个链接
往期文章：自动生成目录md文件
插件链接： agmd源码--自动生成markdown
