完美
走向的完美的第一步是追求完美,第二步是行动。
一个低成本兼容现有业务系统的 Vue & PHP 直出方案,然而此刻发现它不是那么的实用,因为这个方案的出发点就很浑浊。
基本上是纯粹的工作需要,需要重构公司 X 项目,老项目 jQuery
vue.js
Vue2
鱼龙混杂,由于历史和实际原因,无法在生产环境上 Node.js,所以需要探索一套方案,满足下面需求:
vue-cli
初始化的 Webpack 项目作为基本开发方式实际上业务中的需求有这些:
总结了下,目前社区能找到的各种方案及我要实现的方案如下:
也就是官方的 SPA 模式,不多赘述。
也是基于官方提供的 SSR 解决方案,由于一些设计和实现问题,目前运行效率太低,CPU 和 内存一定会牺牲一个参数,基本无法用于生产环境。
来自 GitHub 的国内开发者可发的 PHP 版本的 Vue 渲染器,简单说就是把 node-ssr-render
的核心渲染机制用 PHP 重新实现一边,但是由于开发跟进和兼容等问题,无法满足稳定高可用的需求。
项目及地址: vue-php
也就是我正在做的事,简单说就是写一个 Node.js 解析器,把 .vue
文件转码为 .php
模板文件,拿去给 PHP 渲染输出,同时加载 Vue SPA 项目本身的 Js 脚本,剩下的流程就和 vue ssr render
基本一致了。
最新补充:其实这件事不是想的那么简单,严格说应该是 SSR + Transfer。
OK,Js 脚本问题通过 Webpack 本身就可以解决了,剩下的就是解析器怎么做。
首先,将 .vue
文件解析为 .php
可以有三个思路:
将 .vue
文件的模板模板读取,直接使用正则将不同的指令替换为 PHP 相关语句,如遇到类似组件之类的,则根据配置好的路径对相应组件进行替换,同时需要对 props
进行处理。
此方法可能无法实现完全的转换,如遇到 slot
之类的组件就懵逼了。
同样的读取模板,将模板使用工具转换为 AST(抽象语法树),之前尝试了一些开源的解析器去解析,但是目前探索到的最佳方案应该是 Vue 官方提供的 vue-template-compiler 。
严格说这是一个编译器,能把我们的单文件 Vue 组件编译为 render
函数,同时也支持 AST 模板数据的输出。
抽象为 AST 后,所有的组件就变成一个 JSON 树,我们就可以对这个树进行递归循环处理,最终产出 PHP 代码。
上图中的 4 种方案里,3 和 4 都是自建了 vDom 环境,将各种组件之间的关系计算完成后输出的 HTML,实际上自建 vDom 就意味着又遇到了上面的 开发跟进、兼容性问题上,而且 vDom 的最终输出可能并不是我们所需要的 “模板”,所以这个方法暂时不考虑。
2017-09-07 补充:
这件事比我想象中的复杂大概有10倍,最终代码大概 1500 行,耗时一个月。
最终使用了一个比较 “复杂” 的方案:
.vue
组件 > vue-template-compiler
> ssrRender
ssrRender
> esprima
> js-ast
js-ast
> estraverse(各种替换/解析处理)
> result-js-ast
result-js-ast
> escodegen
> result-ssrRender
result-ssrRender
> vue-server-rander
> html-php-code
html-php-code
中无法解析的 vnode(component)
> html-php-code
其中还涉及针对组件本身的依赖和解析的复杂处理
相关工具:
相关资料:
AST 三板斧:
esprima
把源码转化为 ASTestraverse
遍历并更新 ASTescodegen
将 AST 重新生成源码esprima 文档:
已有实践:
剩下的,我抽时间写一个详细的实现思路。
完。
~~~
reply:
哇哦~
大神,收下小弟的膝盖
grbrgg
😃
...
哈哈 加油 博主棒棒哒
这是你大半夜不睡觉的理由么。。。