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

本篇内容介绍了“vue文件中的ts代码怎么分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为曲麻莱企业提供专业的成都网站制作、成都网站建设,曲麻莱网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

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

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

以下测试代码为例:



import { ref } from 'vue'
const testRef = ref('test')  


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

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

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

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

代码如下:

const vueCompiler = require('@vue/compiler-dom')

const analyseCode = `

import { ref } from 'vue'
const testRef = ref('test')  


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

const parseVue = (vueCode) => {
  // 解析vue代码
  const result = vueCompiler.parse(vueCode)
  const children = result.children

  // 获取script片段
  let tsCode = '' 
  children.forEach(element => {
    if (element.tag == 'script') {
      tsCode = element.children[0].content;
    }
  })

  console.log(tsCode)
}

parseVue(analyseCode)

运行结果:

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

2.第二步:通过typescript解析

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

以上面代码为例:

const vueCompiler = require('@vue/compiler-dom')
const tsCompiler = require('typescript') 

const analyseCode = `

import { ref } from 'vue'
const testRef = ref('test')  


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

const parseVue = (vueCode) => {
  // 解析vue代码
  const result = vueCompiler.parse(vueCode)
  const children = result.children

  // 获取script片段
  let tsCode = '' 
  children.forEach(element => {
    if (element.tag == 'script') {
      tsCode = element.children[0].content;
    }
  })

  console.log(tsCode)

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


parseVue(analyseCode)

运行结果(图片不是完整的)

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

完整的AST explorer

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

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

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

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

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

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


当前标题:vue文件中的ts代码怎么分析
文章路径:http://scyanting.com/article/igiphh.html