一步一步帶你分析vue檔案中的ts程式碼

我們知道vue檔案是由'template'、'script'、'style'三種類型程式碼組合成的。如果要分析<script lang="ts"></script>標籤內的ts程式碼，要怎麼做呢？

1.第一步： 透過@vue/compiler-dom 編譯器 這個parser來解析

以下測試程式碼為例：

<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>

把上面的程式碼放到AST explorer，parser 選擇 @vue/compiler-dom 【相關建議：vuejs影片教學、web前端開發】

#可以發現，右邊的AST結構：程式碼被解析成template、script和style這三個部分，我們透過AST節點屬性就可以取得到script標籤內程式碼的字串資訊（圖中的綠色框部分）。

程式碼如下：

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)

執行結果：

#2.第二步：透過typescript解析

在第一步驟中，我們透過@vue/compiler-dom#提取出了vue 檔案script標籤內的程式碼字串；接下來，把提取出的程式碼字串交給typescript處理，產生對應的AST。

以上面程式碼為例：

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)

執行結果（圖片不是完整的）

完整的AST explorer

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 節點類型，就可以去做相應的分析了（這一塊的詳細知識可以網上搜下，可以結合可視化工具 AST explorer 觀察）

（學習視頻分享：vuejs入門教學、程式設計基礎影片）

以上是一步一步帶你分析vue檔案中的ts程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！