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 <script lang="ts"></script> 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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const ast = parseVue(analyseCode) // 上面示例的函数 const walk = (node) =&gt; { // AST遍历函数 tsCompiler.forEachChild(node, walk); // 遍历AST节点 console.log(node); // 输出节点信息 } walk(ast)</pre><div class="contentsignin">Copy after login</div></div>Then according to the common </p>literals, identifiers, expressions, statements, module syntax, class syntax and other statements in the code<p>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 <code> 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!