Example Analysis of .vue File parsing in vue
This article will explain in detail the sample analysis of .vue file parsing in vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
Vue provides a compiler.parseComponent (file, [options]) method to parse the .vue file into a descriptor:
/ / an object format describing a single-file component.declare type SFCDescriptor = {template:? SFCBlock; script:? SFCBlock; styles: Array; customBlocks: Array;}
File entry
The entry for parsing the sfc file is in src/sfc/parser.js, which export the parseComponent method, and the parseComponent method is used to compile the single file component.
Let's take a look at what the parseComponent method does.
ParseComponent method
Function start (tag, attrs, unary, start, end,) {} function end (tag, start, end) {} parseHTML (content, {start, end})
Two start`end functions are defined in the parseComponent method, and then the parseHTML method is called to compile the contents of the .vue file.
So what does this parseHTML method do?
ParseHTML method
This method knows by name that it is a html-parser, which can be simply understood as: when parsing to each starting tag, calling start; in option calls end in option at the end of each tag.
This corresponds to calling the start and end functions defined in the parseComponent method, respectively.
Maintain a depth variable in parseComponent, depth++ in start and depth-- in end. So, the tag for each depth = = 0 is the information we need to get, including template, script, style, and some custom tags.
Start
Whenever a starting tag is encountered, the start function is executed.
1. Record the currentBlock.
Each currentBlock contains the following:
Declare type SFCBlock = {type: string; content: string; start?: number; end?: number; lang?: string; src?: string; scoped?: boolean; module?: string | boolean;}
2. According to the tag name, put the currentBlock object in the returned result object.
The return object is defined as sfc, and if tag is not any of the script,style,template, it is placed in sfc.customBlocks. If it's style, put it in sfc.styles. Script and template are placed directly under 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
Whenever a closing tag is encountered, the end function is executed.
1. If it is currently the first layer label (depth = 1) and the currentBlock variable exists, take out this part of the text and put it in the 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 、 depth-- .
Get descriptor
After traversing the entire .vue, the resulting sfc object is the result we need.
Generate .js?
Compiler.parseComponent (file, [options]) only gets the SFCDescriptor of a component, and the final compilation into .js files is handed over to libraries such as vue-loader.
This is the end of this article on "sample analysis of .vue file parsing in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
