vueファイルを解析する方法

今回は、vue ファイルを解析する方法と、vue ファイルを解析する際の注意点を説明します。以下は実際のケースです。見てみましょう。

私たちが通常作成する .vue ファイルは、SFC (Single File Components) と呼ばれます。この記事では、SFC を記述子に解析するプロセスが vue でどのように実行されるかを紹介します。

vue は、.vue ファイルを記述子に解析するための COMPiler.parseComponent(file, [options]) メソッドを提供します:

// an object format describing a single-file component.
declare type SFCDescriptor = {
  template: ?SFCBlock;
  script: ?SFCBlock;
  styles: Array<SFCBlock>;
  customBlocks: Array<SFCBlock>;
};

ファイル エントリ

sfc ファイルを解析するためのエントリは src/sfc/parser.js にあります、このファイルは、単一ファイルのコンポーネントをコンパイルするために使用される parseComponent メソッドをエクスポートします。

次に、parseComponent メソッドの動作を見てみましょう。

parseComponent メソッド

function start(tag, attrs, unary, start, end,){
}
function end(tag, start, end){
}
parseHTML(content, {
  start,
  end
})

parseComponent メソッドは、start と end の 2 つの関数を定義し、parseHTML メソッドを呼び出して .vue ファイルの内容をコンパイルします。

では、この parseHTML メソッドは何をするのでしょうか?

parseHTML メソッド

このメソッドは HTML パーサーであることがわかります。各開始タグを解析するときに、各タグの終了時にオプションの start を呼び出します。最後に。

ここで対応するのは、parseComponent メソッドで定義された start 関数と end 関数をそれぞれ呼び出すことです。

parseComponent で Depth 変数を維持し、start と Depth--in end で Depth++ を設定します。次に、深さ === 0 の各タグは、テンプレート、スクリプト、スタイル、およびいくつかのカスタム タグを含む、取得する必要がある情報です。

start

開始タグが見つかると、start 関数が実行されます。

1. 現在のブロックを記録します。

各 currentBlock には次のコンテンツが含まれます:

declare type SFCBlock = {
  type: string;
  content: string;
  start?: number;
  end?: number;
  lang?: string;
  src?: string;
  scoped?: boolean;
  module?: string | boolean;
};

2. タグ名に従って、返された結果オブジェクトに currentBlock オブジェクトを置きます。

返された結果オブジェクトは、タグがスクリプト、スタイル、テンプレートのいずれでもない場合、sfc.customBlocks に配置されます。 styleの場合はsfc.stylesに入れます。スクリプトとテンプレートは sfc の直下に配置されます。

if (isSpecialTag(tag)) {
  checkAttrs(currentBlock, attrs)
  if (tag === 'style') {
    sfc.styles.push(currentBlock)
  } else {
    sfc[tag] = currentBlock
  }
} else { // custom blocks
  sfc.customBlocks.push(currentBlock)
}

end

終了タグが見つかると、end 関数が実行されます。

1. 現在のラベルが最初のレイヤー (深さ === 1) で、currentBlock 変数が存在する場合、テキストのこの部分を取り出して currentBlock.content に置きます。

if (depth === 1 && currentBlock) {
 currentBlock.end = start
 let text = deindent(content.slice(currentBlock.start, currentBlock.end))
 // pad content so that linters and pre-processors can output correct
 // line numbers in errors and warnings
 if (currentBlock.type !== 'template' && options.pad) {
  text = padContent(currentBlock, options.pad) + text
 }
 currentBlock.content = text
 currentBlock = null
}

2、深さ--。

記述子の取得

.vue 全体を走査した後、取得された sfc オブジェクトが必要な結果です。

.js を生成しますか?

compiler.parseComponent(file, [options]) は、コンポーネントの SFCDescriptor のみを取得します。.js ファイルへの最終的なコンパイルは、vue-loader などのライブラリによって行われます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

パッケージ化ファイルのパス設定エラーを解決する方法

タイトルテキストをクリックしたときのフォント切り替え効果を作成する方法

以上がvueファイルを解析する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。