Take you step by step to analyze the ts code in the vue file

We know that vue files are composed of three types of codes: 'template', 'script', and 'style'. If you want to analyze the ts code in the e7a8c58ab982b920d50c74fc26d408552cacc6d41bbb37262a98f745aa00fbf0 tag, what should you do?

1. The first step: Parse # through the @vue/compiler-dom compiler

this parser ##The following test code is an example:

<template>
  <div>
    {{ testRef }}
  </div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
const testRef = ref(&#39;test&#39;)  
</script>
<style scoped>
.test-page {
  background-color: #fff;
}
</style>

Put the above code into

AST explorer, parser select @vue/compiler-dom [Related recommendations: vuejs video tutorial、web front-end development】

You can find that the AST structure on the right side: the code is parsed into template, script and For these three parts of style, we can obtain the string information of the code in the script tag through the AST node attributes (the green box in the picture).

The code is as follows:

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

const analyseCode = `<template>
<div>
  {{ testRef }}
</div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
const testRef = ref(&#39;test&#39;)  
</script>
<style scoped>
.test-page {
background-color: #fff;
}
</style>`

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

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

  console.log(tsCode)
}

parseVue(analyseCode)

Running results:

##2. Step 2: Pass

typescriptAnalysisIn the first step, we extracted the code string in the vue file script tag through

@vue/compiler-dom

; next, extract The code string is handed over to typescript for processing and the corresponding AST is generated. Take the above code as an example:

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

const analyseCode = `<template>
<div>
  {{ testRef }}
</div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
const testRef = ref(&#39;test&#39;)  
</script>
<style scoped>
.test-page {
background-color: #fff;
}
</style>`

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

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

  console.log(tsCode)

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


parseVue(analyseCode)

Running results (the picture is not complete)

Complete

AST explorer

3. Step 3: Traverse and analyze AST nodes at all levels

Through TypeScript’s CompilerAPI:

forEachChild

Traverse AST nodes<pre class="brush:js;toolbar:false;">const ast = parseVue(analyseCode) // 上面示例的函数 const walk = (node) =&gt; { // AST遍历函数 tsCompiler.forEachChild(node, walk); // 遍历AST节点 console.log(node); // 输出节点信息 } walk(ast)</pre>Then according to the common

literals, identifiers, expressions, statements, module syntax, class syntax and other statements in the code

each has a corresponding AST node Type, you can do the corresponding analysis (detailed knowledge of this piece can be searched online, and can be combined with the visualization tool AST explorer to observe) (Learning video sharing:

vuejs Introductory tutorial

, Basic programming video)

The above is the detailed content of Take you step by step to analyze the ts code in the vue file. For more information, please follow other related articles on the PHP Chinese website!