A preliminary study of VuePress & ii. Analysis of dev and Build execution flow

I wrote two previous articles to document the source code reading of VuePress dev and Build implementations, but that was just a little research to learn about VuePress and to get a general sense of how VuePress is implemented.

More importantly, VuePress, in my opinion, integrates a number of technologies to quickly build websites with just “Markdown files + configuration”.

VuePress is defined as:

  • The project structure is centered around Markdown
  • Vue + Vue – Router + Webpack is a static website generator
  • Static HTML is pre-rendered for each page, loaded and run as SPA (Vue SSR enablement)
  • To build a minimalist website, you don’t even need a configuration file. All you need is a readme.md

The previous two Vuepress source code analysis articles have gone through the entire dev and build process, now let’s clean up the whole process:

Now consider how VuePress integrates technology to create markdown files.

Find the library that compiles markdown files

Markdown is a markup language that can be used to add formatting elements to plain text documents, so using appropriate conversion tools to compile Markdown files into HTML files can complete the presentation of Markdown files as websites.

Now take a look at what library VuePress uses to compile markdown files into HTML files.

First came to the app in a Shared process. The process stage (node_modules / @ vuepress/core/lib/node/app. Js) :

And you can see that we got markdown from the createMarkdown function, Then we’ll defy createMarkdown push from where (node_modules / @ vuepress/core/lib/node/createMarkdown js) :

SiteConfig here is the config.js configuration, which is a wrapper around createMarkdown provided by @vuepress/markdown to add two attributes to the markdownConfig configuration.

We continue to trace @vuepress/ Markdown, which internally uses markdown-it-chain to implement built-in plug-in management for NPM package Markdown-it, We can use require(‘@vuepress/markdown’) to check or change the internal plugin enabledeactivation, To return a markdown-it object, use const md = config.toMd(require(‘markdown-it’), markdown).

So what is markdown-it? It can parse markdown documents and render them as HTML documents. The official Demo is as follows:

The simple way to use this is to use a set of configurations to fetch objects provided by markdown-it, which is what markdown-it-chain did. Render markdown.github. IO/markdownit…

Now that we have the library to compile the Markdown file, let’s look at how the obtained Markdown-it objects are used in the subsequent process.

Use of markdown-it objects

Recall the previous analysis of the VuePress Dev and Build processes (article: In the dev and build process functions, both of them go through a phase prepareWebpackConfig to build the Webpack configuration. But the webpack build process for dev and Build is slightly different (dev on the left, build on the right) :

You can see that the createClientConfig (client configuration build) call is the same.

  • Dev has three more plug-in references
  • Build adds a “createServerConfig “to generate the server renderer

CreateBaseConfig (” Base configuration build “) is called inside both createClientConfig and createServerConfig. The ability to control Webpack configuration through an object config, Because the Config object is built in createBaseConfig via webpack-chain, which is a library that builds webPack configurations through chained apis, The config object is the same as webpack.config.js in the project, so you can also associate the above base, client, server and webpack configuration files

CreateBaseConfig: create markdownloader (); create markDownloader (); create markDownloader (); It is shown here that it receives the.md suffix file and then processes it using markdown-loader:

The markdown-loader is also included with @vuepress, where we can find the code to generate HTML using the render function on the markdown-it object:

Ok, so the whole process of markdown file “station” has been completed

The journey is continuing, years (°, °) Blue ✿