vue文件中的ts代码怎么分析

我们知道vue文件是由'template'、'script'、'style'三种类型代码组合成的。如果要分析script lang="ts"> /script> 标签内的ts代码，要怎么做呢？

1.第一步： 通过@vue/compiler-dom 编译器 这个parser来解析

以下测试代码为例：

template>
    
div>

{
{
testRef}
}
    
/div>
    
/template>
    
scriptsetup>

import{
ref}
    from'vue'
consttestRef=ref('test')
/script>
    
stylescoped>

.test-page{
    
background-color:#fff;

}
    
/style>
    

把上面的代码放到 AST explorer，parser 选择 @vue/compiler-dom

可以发现，右侧的AST结构：代码被解析成 template、script和style这三部分，我们通过AST节点属性就可以获取到script标签内代码的字符串信息（图中的绿色框部分）。

代码如下：

constvueCompiler=require('@vue/compiler-dom')

constanalyseCode=`template>
    
div>

{
{
testRef}
}
    
/div>
    
/template>
    
scriptsetup>

import{
ref}
    from'vue'
consttestRef=ref('test')
/script>
    
stylescoped>

.test-page{
    
background-color:#fff;

}
    
/style>
    `

constparseVue=(vueCode)=>
{
    
//解析vue代码
constresult=vueCompiler.parse(vueCode)
constchildren=result.children

//获取script片段
lettsCode=''
children.forEach(element=>
{

if(element.tag=='script'){
    
tsCode=element.children[0].content;

}

}
)

console.log(tsCode)
}
    

parseVue(analyseCode)

运行结果：

2.第二步：通过typescript解析

在第一步中，我们通过@vue/compiler-dom提取出了 vue 文件 script标签内的代码字符串；接下来，把提取出的代码字符串交给 typescript处理，生成对应的 AST。

以上面代码为例：

constvueCompiler=require('@vue/compiler-dom')
consttsCompiler=require('typescript')

constanalyseCode=`template>
    
div>

{
{
testRef}
}
    
/div>
    
/template>
    
scriptsetup>

import{
ref}
    from'vue'
consttestRef=ref('test')
/script>
    
stylescoped>

.test-page{
    
background-color:#fff;

}
    
/style>
    `

constparseVue=(vueCode)=>
{
    
//解析vue代码
constresult=vueCompiler.parse(vueCode)
constchildren=result.children

//获取script片段
lettsCode=''
children.forEach(element=>
{

if(element.tag=='script'){
    
tsCode=element.children[0].content;

}

}
)

console.log(tsCode)

//将ts代码转化为AST
//第一个参数为命名，可以随意填，
//第二个参数是需要生成AST的源代码字符串
//第三个参数表示TS编译器版本
//第四个参数表示是否添加parent节点信息
constast=tsCompiler.createSourceFile('testCode',tsCode,tsCompiler.ScriptTarget.Latest,true)
console.log(ast)
returnast
}
    


parseVue(analyseCode)

运行结果（图片不是完整的）

完整的AST explorer

3.第三步：遍历分析 AST 各级节点

通过TypeScript 的 CompilerAPI : forEachChild遍历AST节点

constast=parseVue(analyseCode)//上面示例的函数
constwalk=(node)=>
{
    //AST遍历函数
tsCompiler.forEachChild(node,walk);
    //遍历AST节点
console.log(node);
//输出节点信息
}
    
walk(ast)

然后根据代码中常见的字面量、标识符、表达式、语句、模块语法、class 语法等语句各自都有对应的 AST 节点类型，就可以去做相应的分析了

“vue文件中的ts代码怎么分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！