我們知道vue檔案是由'template'、'script'、'style'三種類型程式碼組合成的。如果要分析<script lang="ts"></script>標籤內的ts程式碼，要怎麼做呢？
1.第一步： 透過@vue/compiler-dom 編譯器 這個parser來解析
以下測試程式碼為例：
<template>
<div>
{{ testRef }}
</div>
</template>
<script setup>
import { ref } from 'vue'
const testRef = ref('test')
</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 'vue'
const testRef = ref('test')
</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 = ''
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。
以上面程式碼為例：
const vueCompiler = require('@vue/compiler-dom')
const tsCompiler = require('typescript')
const analyseCode = `<template>
<div>
{{ testRef }}
</div>
</template>
<script setup>
import { ref } from 'vue'
const testRef = ref('test')
</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 = ''
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)登入後複製
執行結果（圖片不是完整的）
完整的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中文網其他相關文章！
