vue ファイル内の ts コードを段階的に分析します。

vue ファイルは、「テンプレート」、「スクリプト」、「スタイル」の 3 種類のコードで構成されていることがわかっています。 <script lang="ts"></script> タグ内の ts コードを分析したい場合、どうすればよいでしょうか?

1. 最初のステップ: @vue/compiler-dom コンパイラ このパーサー # を通じて

# を解析します#次のテスト コードは例です:

<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、パーサー選択 @vue/compiler-dom [関連する推奨事項: vuejs ビデオ チュートリアル、Web フロントエンド開発]

右側に AST 構造があることがわかります。コードは次のとおりです。テンプレート、スクリプト、スタイルに解析されます。スタイルのこれら 3 つの部分については、AST ノード属性 (図の緑色のボックス) を通じてスクリプト タグ内のコードの文字列情報を取得できます。

コードは次のとおりです:

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. ステップ 2:

typescript# を渡します。 # #分析最初のステップでは、@vue/compiler-dom

を通じて vue ファイルのスクリプト タグ内のコード文字列を抽出しました。次に、コード文字列を抽出します。

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)

実行結果 (画像は不完全です)

CompleteAST explorer

3. ステップ 3: TypeScript の CompilerAPI を通じて、すべてのレベルで AST ノードを走査して分析します。

forEachChild

AST ノードをトラバースする

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

その後、共通の リテラル、識別子、式、ステートメント、モジュール構文、クラス構文、およびコード内のその他のステートメントに従って、

それぞれに対応する AST があります。ノード タイプに応じて、対応する分析を行うことができます (この部分の詳細な知識はオンラインで検索でき、視覚化ツール AST エクスプローラー と組み合わせて観察できます)

(学習ビデオの共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上がvue ファイル内の ts コードを段階的に分析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。