vue编译为js的研究

# 前言

首先，思考下：

当我们在使用vue编写代码的时候，浏览器是如何识别的呢？进而联想到编辑器是如何识别的呢？更甚者我能可以思考其他各种类型的文件，平台是怎么识别的呢？

这些都是非常有趣的事情，其也必定存在着一种特定的内在运行逻辑，由此展开，发散思维，进一步了解编译原理相关的知识，对于我们探究这些问题都是极有帮助的。

本篇内容就先聚焦简单的一个点开始说起~

我先说下项目背景：这是一个基于vue2开发的系统，目前有个报告管理模块，每条详情信息都包含各种列表、图表等，现在需要支持每条报告都支持下载导出为 html格式的一个文件，该html打开后的效果应该是和详情进去是一致的。

OK，问题来了，你打算如何实现？

1和2留给大家思考，我们公司按照以往经历采用的是方案3，本文先基于方案3进行探究。

抛开其他问题不谈，思考如何快速的把vue文件转换为 html与js，并且可以在浏览器中正常渲染（手写html+js不在讨论范围😀）。

Webpack+loader的方式：毕竟我们项目就是使用Webpack把vue编译成html、js的，可行性是有的
@vue/component-compiler库：官方库，把vue编译为CommonJS（现在替换为了@vue/compiler-sfc），不过，并不影响我们进行编译研究

基本思路应该就是这样，我们主要需要的数据的也是3个部分：template、script、style

在分离出这3部分内容之后，就是后面的组合引用了，以及对于代码中涉及到的异步请求部分要如何处理。

其实按照后端同学的思路，我提供的模板应该是从上到下按顺序执行的，所有的数据会在最开始由后端注入到我们约定的变量对象上，前端的所有渲染应该以这里的数据为主。

客户端渲染 BSR (Broswer Side Render)：只在浏览器上执行，通过Vue 和 React 构建的单页面应用SPA 都是采用这种方式渲染
静态页面生成 SSG (Static Site Generation)：动态内容静态化，构建时渲染为html，针对博客这种，每位用户访问的相同页面内容都是一致的，Vuepress、Nextjs等
服务端渲染 SSR (Server Side Render)：请求之后，获取数据执行渲染，后端返回给前端的是注入数据之后的 html 字符串，返回给前端在浏览器完成渲染，可根据不同用户返回不同内容

我再一想，这不是和SSR、SSG很像吗，顺着这个思路有没有合适的方案呢

上次更新: 2023/04/26, 10:07:14