vue ファイル内の ts コードを段階的に分析します。-Vue.js-php.cn

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

青灯夜游

リリース： 2023-04-24 17:43:43

転載

1442 人が閲覧しました

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

vue ファイル内の 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 フロントエンド開発]

截屏2023-04-22 下午9.51.56.png

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

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

const vueCompiler = require(&#39;@vue/compiler-dom&#39;)

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)

ログイン後にコピー

実行結果:

截屏2023-04-22 下午10.30.33.png

##2. ステップ 2:

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

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

typescript に転送して処理すると、対応する AST が生成されます。 上記のコードを例として挙げます。

const vueCompiler = require(&#39;@vue/compiler-dom&#39;)
const tsCompiler = require(&#39;typescript&#39;) 

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)

ログイン後にコピー

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

Complete 截屏2023-04-22 下午10.42.49.png AST explorer

截屏2023-04-22 下午11.00.05.png 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 サイトの他の関連記事を参照してください。