转码器

为什么

基本上是纯粹的工作需要,需要重构公司xxx项目,老项目jQueryvue.jsVue2鱼龙混杂,由于历史和实际原因,无法在生产环境上Node.js,所以需要探索一套方案,满足下面需求:

  • 保证以vue-cli初始化的 Webpack 项目作为基本开发方式
  • 满足服务端渲染的需求
  • 保证服务端稳定、高可用

做什么

实际上业务中的需求有这些:

  • 路由由服务端管理,也意味着客户端一般都是以单页面应用为单位
  • 仅需要服务端渲染关键性数据,可以循环渐进地实现转换
  • 有可能需要转换出多语言版本的模板,所以工具需要可配置

谁做了

总结了下,目前社区能找到的各种方案及我要实现的方案如下:

https://static.surmon.me/17-8-6/71990791.jpg

1. SPA

也就是官方的 SPA 模式,不多赘述。

2. node-ssr-render

也是基于官方提供的 SSR 解决方案,由于一些设计和实现问题,目前运行效率太低,CPU 和 内存一定会牺牲一个参数,基本无法用于生产环境。

3. php-ssr-render

来自 github 的国内开发者可发的php版本的vue渲染器,简单说就是把node-ssr-render的核心渲染机制用php重新实现一边,但是由于开发跟进和兼容等问题,无法满足稳定高可用的需求。

项目及地址:vue-php

4. node-transfer

也就是我正在做的事,简单说就是写一个node解析器,把.vue文件转码为.php模板文件,拿去给php渲染输出,同时加载vue SPA 项目本身的 JS脚本,剩下的流程就和vue ssr render基本一致了。

最新补充:其实这件事不是想的那么简单,严格说应该是 SSR + Transfer。

怎么做

OK,JS 脚本问题通过 Webpack 本身就可以解决了,剩下的就是解析器怎么做。

首先,将vue文件解析为php,可以有三个思路:

1. 正则

vue文件的模板模板读取,直接使用正则将不同的指令替换为php相关语句,如遇到类似组件之类的,则根据配置好的路径对相应组件进行替换,同时需要对props进行处理;

此方法可能无法实现完全的转换,如遇到slot之类的组件就懵逼了。

2. AST

同样的读取模板,将模板使用工具转换为 AST(抽象语法树),之前尝试了一些开源的解析器去解析,但是目前探索到的最佳方案应该是 Vue 官方提供的 vue-template-compiler

严格说这是一个编译器,能把我们的单文件vue组件编译为 render 函数,同时也支持 ast 模板数据的输出。

抽象为 AST 后,所有的组件就变成一个 json 树,我们就可以对这个树进行递归循环处理,最终产出 php 代码。

3. VNODE

上图中的4种方案里,3和4都是自建了 Vdom 环境,将各种组件之间的关系计算完成后输出的 html,实际上自建 Vdom 就意味着又遇到了上面的 开发跟进、兼容性问题上,而且 Vdom 的最终输出可能并不是我们所需要的"模板",所以这个方法暂时不考虑。

剩下的后续再说吧... 再王者一把

本文于 2017/8/4 上午 发布在 Code 分类下,当前已被围观 363 次

相关标签:Web开发Vue

永久地址:https://surmon.me/article/66

版权声明:自由转载-署名-非商业性使用  |  Creative Commons BY-NC 3.0 CN