这是篇关于vue制作vue2/3通用版本的技术实践文章, 从最开始有想法 到实现,前后陆续有一个月时间, 熟悉vue-demi原理的, 可以略过前面的源码阅读环节, 直接看后面的打造通用组件
背景
作为技术主管，你会不会一直在考虑要不要上vue3？疑虑无非以下几点
- 老项目都是vue2写的，上了vue3，怎么跟vue2的代码进行融合？
- 老项目vue2太大了，不想全部翻成3，但是ts真香，特别适合团队开发，怎么搞？
- 新开工程用的vue3新技术研发出来的，老板一看不错！给其中原来老项目也加上这个模块，继续卖！咱要不要把代码降级？
推荐
赶紧上vue3，使用vue-demi，打穿vue2-vue3的壁垒，这么操作直接解决上面所讲的三个问题。
准备
之前我有写过相关的文章，关于对这方面的思考，但是当时没有给出明确的一个实践demo，往期思考准备查看这篇文章，这里不赘述vue-echarts源码解读
当时提出以下问题：
- 目前大多数vue-demi都是用rend函数写的, 支持模板书写和发布么?
- 咋发布一个支持两版本的, 是不是v2和v3要打包两套?
- 写出来了咋测试它同时支持v2和v3呢? 为此，我专门仔细研究了一下vue-demi的工作原理
vue-demi源码解读
首先阅读源码, 打好注释，然后用源码阅读神器agmd生成如下md，主要模块功能如图所示
进一步查看v3核心代码，这里我截图为其历史版本，为了更加直观让大家看其功能实现，干了啥？ vue3环境时候，啥也没干，因为我们写代码就是用vue3的方式
看看v2,使用了@vue/composition-api，这不就是尤大推荐的vue2中使用composition-api的方式么？对没错！@vue/composition-api随着vue的版本变化也一直在升级中，由尤大大专门维护着，所以大家使用vue-demi时有问题，不要跑那去提issue，vue-demi表示很无辜，他只是做了个转接，功能是由@vue/composition-api完成的
总结一句，就是vue-demi会根据用户使用vue的版本号来判断，vu3啥也不干，vue2时加入@vue/composition-api
打造vue2/3通用插件
进入正题，咱们也可以使用相同的原理，做一个组件，打两个包，一个v2的，一个v3的代码，然后再根据vue版本进行判断使用对应版本，下面贴上我的案例vue3-sketch-ruler 同时用agmd生成一个md，进行辅助说明
大家可能有个疑惑，为什么要分两个版本？像vue-echarts那样子打一套代码，他不香么？
我也想，但是经过测试，它不行，我的核心功能是用sfc的vue文件打包的，写的是template，并不是render函数，大家查看源码就知道，关于template的解析，v2和v3解析出来的不能通用的，因为v3之所以快，是因为对temlate的比对优化了，具体咋优化的大家可以查看vue3的源码
既然打包出来的模板不能通用，那就分两个环境进行打包，分别打出v2和v3两个版本,然后通过postinstalll安装脚本,进行版本的切换,切换原理如下:
这个切换是参照vue-demi写的, 几乎和它的一模一样
最后把含有v2和v3版本的包发布出去, 用户下载安装时会执行这个脚本安装得到对应的文件, 到这里一个通用插件就完成了, 其中细节源码就在这里展现了, 大家可以把我介绍的这个插件源码下载下来看
注意点
- 期间为了做这个测试是踩了不少坑, 要不然也不会等到现在才出来这篇文章, 首先vue-demi的官方案例并没有template的打包, 其他案例要么是使用jsx,要么使用render, 反正我没有找到打包template的, 最终实践证明是可行的.
- 无论开发还是打包,都要注意vue版本的切换, 要不然很容易报错,出现诡异事件,要么就是vue2可以,vue3时不行,要么就是开发可以,打包生产环境不行
最后
其实就在我写这篇文章时,我都还是觉得我这个demo不够完美,我这么组建工程的方式,只实现了需要打包的代码公用,并没有实现demo也能共用, 咱能不能一个工程里面就把vue2/3的包都打了?我认为是可以的, 大家可以去尝试一下, 好了可以给我提一个pr,或者留言区贴上你的demo地址, 咱讨论讨论
码字不易, 大家觉得这篇文章对大家有些许帮助的话, 麻烦大家点个赞支持一下, 如果能有个关注就更好, 关注不迷路, 后续再为大家送上更多干货!
演示案例: vue3-sketch-ruler
