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에 있습니다. , 이 파일은 단일 파일 구성 요소를 컴파일하는 데 사용되는 parsComponent 메서드를 내보냅니다.

다음으로 parsComponent 메소드가 수행하는 작업을 살펴보겠습니다.

parseComponent 메서드

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

parseComponent 메서드는 start와 end라는 두 가지 함수를 정의한 다음,parseHTML 메서드를 호출하여 .vue 파일의 내용을 컴파일합니다.

그렇다면 이 ParseHTML 메소드는 무엇을 합니까?

parseHTML 메소드

이름에서 이 메소드가 html 파서임을 알 수 있습니다. 각 시작 태그를 구문 분석할 때 각 태그가 끝날 때 옵션에서 시작을 호출한다는 것을 간단히 이해하면 됩니다. 결국.

여기에 해당하는 것은 각각 parComponent 메소드에 정의된 시작 및 종료 함수를 호출하는 것입니다.

parseComponent에서 깊이 변수를 유지하고 시작 및 깊이에 깊이++를 설정합니다. 그런 다음 깊이 === 0인 각 태그는 템플릿, 스크립트, 스타일 및 일부 사용자 정의 태그를 포함하여 우리가 얻어야 하는 정보입니다.

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로 정의됩니다. 태그가 스크립트, 스타일, 템플릿 중 하나라도 아닌 경우 sfc.customBlocks에 배치됩니다. 스타일이라면 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

종료 태그를 만날 때마다 종료 기능이 실행됩니다.

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, 깊이-- .

Get descriptor

전체 .vue를 탐색한 후 얻은 sfc 객체가 우리에게 필요한 결과입니다.

.js를 생성하시겠습니까?

compiler.parseComponent(file, [options])는 구성 요소의 SFCDescriptor만 가져옵니다. .js 파일로의 최종 컴파일은 vue-loader와 같은 라이브러리에 의해 수행됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천도서:

패키징 파일 경로 구성 오류 해결 방법

제목 텍스트 클릭 시 글꼴 전환 효과 만드는 방법

위 내용은 Vue 파일을 구문 분석하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!