一些前端项目转换工具
本文最后更新于：2023年8月15日 下午
一些前端项目转换工具
mpvue：star 20.4k mini program vue
美团出品，实现使用vue语法规范书写页面，可同时转化为H5和微信小程序，新版本也支持其他平台小程序。
先说下vue的编译原理，
1、vue-loader加载vue文件解析成js文件；
2、js经过vue的vue-template-compiler处理成ast语法树（这个语法树可以在下一步生成vue的VNode，也可以是weex的组件，这就是多端实现的底层逻辑）；
3、ast经过vue的creatElement处理再结合data数据变成VNode，就是虚拟Dom，虚拟dom就可以用diff了（有些文章这一步叫做生成render function，实际上render function返回的就是vnode）；
4、vue的render方法最后会把VNode转换为实际的dom结构
mpvue干了什么呢？
1、首先它修改了vue的runtime，vue的runtime支持生成vue的结构和weex的结构，现在加上了生成小程序的结构；
2、mpvue使用自己的模板加载器 mpvue-template-compiler直接生成了ast和render function，这里的ast和render function就跟vue的有点不一样了，但是和VNode基本类似；
3、再下一步用 mpvue-template-compiler的compileToWxml生成wxml，就是小程序的模板。
这里解释了模板的转化，生命周期，data数据的转化我就不说了（我不懂啊）；
提一嘴腾讯出的wepy框架，也是vue模板生成小程序，但是语法是vue语法加上自定义的规范，学习成本高一些，也没有mpvue好用，但是他是最早的小程序框架，值得夸奖；
wepy文档：https://wepyjs.github.io/wepy-docs/2.x/#/base/intro
个人感觉：mpvue出的比较早，是个很伟大的尝试，但是也因为出的比较早，局限性就大一些，项目立项之初，它主要考虑的是微信小程序，所以内部很多逻辑是和微信绑定的，实际上只是写法上利用了vue，其他的比如路由跳转还是要用小程序的，组件库可以用小程序的，第三方ui组件库的必须支持mpvue的一些特殊要求才行，还是很有局限性的；但是主要的局限性是不能生成APP。
trao：star 30.6k 因为部门是叫做凹凸实验室，谐音和奥特曼很像。当时就决定以后有新的开源项目，就以奥特曼来命名，所以 Taro（泰罗）是第一个。
文档：https://taro-docs.jd.com/taro/docs/
原理介绍：https://blog.csdn.net/sinat_17775997/article/details/103391294
京东出品，最新的trao3可以使用react/vue等框架，同时生成H5，微信京东字节小程序，RN等，尼玛，真牛逼！
1、trao支持的小程序众多，意味着内部封装继承的程度就更高，不同的客户端小程序在转换之前都必须支持统一的组件写法和api；
2、在页面组件转化逻辑上，它的本质也是上面的转化图，vue或者react编写的代码转化为ast，再根据不同的小程序端逻辑处理，生成不同端的页面代码；
3、在路由和api层面，参考对标的也是微信小程序，所以你不能用vue和react的路由；
4、taro有自己封装的组件库，是以微信小程序为标准设计的（其实我感觉广大的小程序都是依据微信小程序的理念设计的，本质上也就是h5加一部分原生的hybrid），当然api也是自己封装过的；
5、taro也支持vuex和redux，牛逼牛逼！
这里提到了一些babel的知识，挺有意思的：
- Babel 可以解析还没有进入 ECMAScript 规范的语法。例如装饰器这样的提案，虽然现在没有进入标准但是已经广泛使用有一段时间了；
- Babel 提供插件机制解析 TypeScript、Flow、JSX这样的 JavaScript 超集，不必单独处理这些语言；
- Babel 拥有庞大的生态，有非常多的文档和样例代码可供参考；除去 parser 本身，Babel 还提供各种方便的工具库可以优化、生成、调试代码…
我个人的简单理解就是babel是一个function，一个转化工具，输入原始js，输出你想要的的结构化js，比如输入es6输出es5，输入jsx输出js等等，另外注意一下babel是plugin插件可以作用于webpack的各个阶段（注意和loader的区别）；
由此又引申出一个polyfill垫片，babel的作用一般是把高级js写法变成低级的，polyfill垫片顾名思义是垫平各个浏览器的差异，是个兼容性处理插件，比如ie或者firefox不支持某个方法，polyfill就增加兼容性处理。
总结：taro真是个很牛逼的框架，我只搜了几篇文章看看原理就觉得很复杂，可想而知具体转化抹平差异的工作量有多大。taro的优势是可以使用vue或者react和其他前端框架写页面，这样群众基础就扩大了，支持转化的客户端类型也很多，估计大部分使用react的玩家都会选择taro，更何况还支持RN。
uni-app：star 36.1k uni，读 you ni，是统一的意思。
https://uniapp.dcloud.io/history.html
DCloud出品(就是那个Hbuilder工具的开发组织)， 开发者使用 Vue 语法编写代码，uni-app 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/快手/钉钉）、App（iOS/Android）、H5等多个平台；
DCloud网站有这么一段：“ 很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。”
是的，这是真的，当初DCloud刚推出流应用的时候，我还做了一个关于流应用的技术分享会，流应用更像是微信公众号，页面是H5，再加上一点原生API的加持，而微信小程序则是自己制定了一套规则和写法。我个人一直不喜欢小程序，我认为小程序本质上是Hybrid，没有什么新奇的技术，而且自定义语法规则更像是为了打造技术壁垒和生态环境，出发点就不单纯。好了，打住！
1、uni-app的原理真没找到具体的文章，个人感觉也是ast语法树的转化；
2、uni-app可以转化为android和ios app，支持两种模式，一种webview加载的hybird，另一种是weex；
3、uni-app有自己的一套页面组件，可以运行于各个平台，还有vue的组件，但是只能运行在App和H5（这是必然的）；
总结：uni-app和taro才具有可比性，taro的优势是支持react和vue语法规则，uni-app的优势我认为是webview加载模式，因为RN和Weex毕竟有平台差异，论一致性还是webview有优势，但是webview的性能比较比不上RN和Weex。总体差异倒是不大。两者都很优秀，看个人取舍吧！