vue3单文件组件编译过程

最近产品给我提了一个非常好玩(e xin)的需求：用户输入单文件组件（sfc）的代码就能显示对应的界面。具体可以参考vue playground。

提出问题

作为一个成熟的前端，要善于挖掘产品的隐含意思：

ok，需求弄清楚了咱们开始做技术调研。

技术调研

用户输入代码可以使用vscode的web版编辑器monaco-editor，这个很简单。主要问题是输入的代码怎么显示出对应的界面呢？

createApp

vue3中，我们通常会在main.js中通过下面的代码，将根组件挂载到dom节点中：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app');

createApp可以接收不同的参数，在optional的写法中，只要将sfc的template,data,methods这些对象获取到传入其中，不就可以显示出界面了嘛。

// 伪代码
let code = monacoInstance.getValue()  // 用户输入的代码字符串
// 假设compile函数是对code做一系列正则匹配，用于获取template,data等内容
let { template,data,methods } = compile(code)
createApp({
    template,
    data,
    methods
}).mount('#container');

这么干确实可以把界面显示出来，但是有一个问题，compile函数超级难写，因为我们要支持多种不同的写法，自己写这个compile不太现实，有没有现成的库可以用呢？

@vue/compiler-sfc

当然有了，不然vue怎么去编译sfc呢，在vue3中编译sfc主要会使用@vue/compiler-sfc这个包，大概的流程是这样的：

                                  +--------------------+
                                  |                    |
                                  |  script transform  |
                           +----->+                    |
                           |      +--------------------+
                           |
+--------------------+     |      +--------------------+
|                    |     |      |                    |
|  facade transform  +----------->+ template transform |
|                    |     |      |                    |
+--------------------+     |      +--------------------+
                           |
                           |      +--------------------+
                           +----->+                    |
                                  |  style transform   |
                                  |                    |
                                  +--------------------+

用伪代码再描述一下：

import { parse,compileTemplate,compileScript,compileStyleAsync } from '@vue/compiler-sfc'

let code = monacoInstance.getValue()  // 用户输入的代码字符串

const descriptor = parse(code) //  facade transform，生成的descriptor中已经可以找到我们所需要的tempplate，但是methods,data这些数据还无法获取

const compiledScript = compileScript(descriptor)

const result = rewriteDefault(compiledScript.content) // result是一个字符串，通过动态生成script来执行字符串的内容，最后会返回一个__sfc__，这也就是我们需要传入到createApp里面的

上述这段伪代码的思路，来自于sfc-playground这个项目，有兴趣可以去读一下。

原本我以为，要提取data,methods等传入createApp中才能显示出一个完成的sfc，实际上如果你输入的代码中包含setup，并不会有data,methods这些属性，而是会产生一个setup函数，这个函数会返回data和methods，将这个setup函数传入createApp即可。

@vue/compiler-sfc有broswer版本，也有nodejs的版本，我选择在服务端编译，因为在使用broswer版本中爆了一些我无法解决的错误，能力有限，希望有人能出一个broswer版本的使用教程。

在做完这些后，已经可以将用户输入的sfc显示出来了，但是还有一个问题，如果输入的代码中有UI库组件，则编译不出来，例如使用了el-button。

UI库组件的不显示

我发现当使用optional的写法，传入createApp中是template，data，methods这些的时候，只需要这样写就可以正常显示出UI库的组件:

import { createApp,nextTick } from 'vue'
let app = createApp({
    template,
    methods,
    ...
})
nextTick(async () => {
    // 根据条件判断，导入哪些依赖
    const ElementPlus = await import('element-plus');
    _app.use(ElementPlus).mount(#container)
})

而使用setup则会导致UI库的组件无法渲染，这个问题其实很简单。使用setup之后会__sfc__会包含一个render函数，我们知道sfc的编译过程，其实就是将template编译成render函数，我们传入template可以显示出UI组件，而传入render函数无法显示UI组件，那么原因就是当传入createApp中存在render函数时，不会再次进行compile。

如果希望use(ElementPlus)能成功执行，则需要在前端再compile一次，这时只需将传入createApp中的render设置为null，以及传入从descriptor中获取的template即可。另外：

// 如果设置inlineTemplate为true，那么setup函数返回的并不是data,methods这些对象而是一个render函数
const compiledScript = SFCCompiler.compileScript(descriptor, {
    inlineTemplate: true
})

在sfc-playground中，解析< script setup>的代码，inlineTemplate是为true的，所以setup中会返回render函数。设置inlineTemplate为false，则会生成单独的render函数，设置这个render函数为null，就可以触发前端的compile。

最后

如果你也遇到类似的需求，我建议可以先看看@vue/compiler-sfc和sfc-playground的源码。