impression

It is almost the end of the year, hangzhou winter seems to be cloudy days, I do not like cloudy days, because there is no warm sun in the morning, it is always dark. In recent days, I have been writing articles less frequently. Of course, THERE is also a reason for laziness, but IN my spare time, I mainly focus on my book to be published. It is expected that I can meet you before the year as soon as possible, mainly for the books of junior Vue developers.

origin

Buddhism says: the origin of the empty. Writing articles, too. Something always connected me to the connecting dots, a bit like Steve Jobs’s Stanford speech. The result of the final check was that the version of VUE-template-compiler was too low, and the scope slot could not be compiled. I also wanted to see the source code of vue-template-Compiler, so I established this reason.

content

Vue – the template – the compiler overview

Because the development environment looks at the Vue project, especially Vue 2 program, are basically using Webpack as a packaging tool, as we all know, Webpack processing non-JS files is realized by loader, processing Vue files is by vue-loader, Vue-loader && Vue-template-compiler is described as follows in vue-loader’s official website:

When a new version of each VUE package is released, a corresponding version of vue-template-Compiler is also released. The version of the compiler must be synchronized with the base VUE package so that vue-Loader generates run-time compatible code. This means that every time you upgrade the VUE package in your project, you should also upgrade the VUe-template-CompilerCopy the code

In other words, vue-loader’s ability to convert VUE files is implemented with vue-template-compiler. In engineering, the vue-Loader and vue-template-Compiler should always match the correct version.

In vue 2.x, the VUE-template-Compiler is integrated into the VUE project because the VUE project uses the Monorepo architecture. Including vue-server-render, VUe-template-compiler, Weex-template-compiler and Weex-VUE-Framework. These are the packages that play an important role in Vue 2.x.

Json file, which entry file to use in the browser environment, which file to use in the Node environment, etc.

The package structure of vue-template-compiler is as follows:

{
  "main": "index.js"."unpkg": "browser.js"."jsdelivr": "browser.js"."browser": "browser.js"."types": "types/index.d.ts"."repository": {
    "type": "git"."url": "git+https://github.com/vuejs/vue.git"
  },
  "keywords": [
    "vue"."compiler"]."author": "Evan You"
}
Copy the code

Here the browser field is the file used in the browser environment. The main field is the entry file for the current package, and of course the Module field is the entry file description for use in the Node environment. After finding the entry file, let’s analyze the source code:

Vue-template-compiler exports the following function at the end:

  exports.parseComponent = parseComponent;
  exports.compile = compile;
  exports.compileToFunctions = compileToFunctions;
  exports.ssrCompile = compile$1;
  exports.ssrCompileToFunctions = compileToFunctions$1;
  exports.generateCodeFrame = generateCodeFrame;
Copy the code

That is, vue-template-Compiler altogether provides these functions for vUE to use: ParseComponent, compile, compileToFunctions, ssrCompile, ssrCompileToFunctions and generateCodeFrame functions. The vuE-template-Compiler code can be read in this way.

The following content we look at the implementation details of the function, choose parseComponent function to explain.

ParseComponent function

The function signature of parseComponent is described as follows:

Parse a single-file component (*.vue) file into an SFC Descriptor Object

Is to convert a single-file component to an SFC object:

var sfc = {
    template: null.script: null.styles: [].customBlocks: [].errors: []};Copy the code

How does the parseComponent function encapsulate an SFC object?

Let’s look at styles’ merge:


if (tag === 'style') {
    sfc.styles.push(currentBlock);
} else {
    sfc[tag] = currentBlock;
}

Copy the code

Add the currentBlock object to the Styles array. CurrentBlock is defined as:

currentBlock = {
    type: tag,
    content: ' '.start: end,
    attrs: attrs.reduce(function (cumulated, ref) {
        var name = ref.name;
        var value = ref.value;

        cumulated[name] = value || true;
        return cumulated
    }, {})
};
Copy the code

The attrs attribute contained in the currentBlock object uses a combination of the name/value attributes. The parseComponent function finally uses the parseHTML function, which takes the template and parses it into an SFC object containing the above attributes.

The parseHTML function has a lot of content, so let’s take a look at the highlights of the code:

/ / startTag processing
function parseStartTag/ / processingendTag
function parseEndTag
Copy the code

That is, the parseHTML function processes the HTML DOM into an object with basic attributes. To take a simple example, let’s look at the result of processing a section of DOM:

Write the test code that calls the parseComponent function in browser.js,

  console.log('parseComponent:' , parseComponent('<div><p>text</p> <p>content</p> </div>'))
Copy the code

, node environment, the result is as follows:


parseComponent: {
  template: null.script: null.styles: [].customBlocks: [{type: 'div'.content: '<p>text</p> <p>content</p> '.start: 5.attrs: {},
      end: 32}].errors: []}Copy the code

As you can see, customBlocks is the content section that hosts the main content of the DOM.

Common front-end compilation frameworks

We have introduced vue-template-compiler and explained its internal parseComponent function. Of course, vue-template-compiler contains much more than this, and other functions are for readers to understand. I’m not going to talk about it alone.

In this section, I would like to extend some, explain some of the more famous JS runtime compilation.

QuickJS: JAVASCRIPT runtime written by Fabrice. QuickJS is a small and embeddable Javascript engine that supports the ES2020 specification, including modules, asynchronous generators, and proxies. It optionally supports mathematical extensions, such as large integers (BigInt), large floating points (BigFloat), and operator overloading.

Reference link: github.com/quickjs-zh/…

Kraken, Beihai, Alibaba Amoy architecture team produced the framework, V0.9 version will quickJS as a JS engine, lighter weight, the current mainstream framework has been basically supported, the new features of rendering benefits are also very effective, welcome to try.

Reference links: zhuanlan.zhihu.com/p/429278372

conclusion

Front-end compilation actually has a lot of content, the author just selected and their own work related to the corner to introduce, more front-end compilation field knowledge, need front-end students to explore and practice more. I think growing from work is the most profitable way to learn, share with you!