Because of the recent use of TARO to write small procedures, out of curiosity, ready to read the source code of TARO.

In the previous article Taro source code interpretation – Taro Build, we explained the implementation principle of Taro-CLI, and then took Taro Build as an example to explain the operating mechanism of the core Kernel + hooks, and finally reached the Webpack build stage.

This article will complement the Taro Build article, focusing on the packaging mechanism that will eventually be implemented in Webpack after running Taro Build, and giving a brief overview of Taro Next’s transition from compile time to runtime.

Without further ado, let’s begin.

MiniRunner overview

Minirunner is actually a function. Let’s take a look at what miniRunner does as a whole.

Let’s go through the code implementation line by line:

Lines of code explain
The first21 行 Define the buildmode, i.e. ‘”production” “development” “none”`
The first24 行 Improve the build configuration, mainly heresass loaderThe configuration of the
The first27 ~ 37 行 Generated according to the project configurationwebpackThe build configuration of
The first39 ~ 80 行 usewebpackCompiling the code

As you can see from the above analysis, what Minirunner mostly does is assemble the Webpack configuration based on the project configuration, and then generate the compiled code based on the Webpack configuration.

Next, let’s focus on the WebpackChain configuration that comes with the project (line 27) to see what the default configuration looks like

The default configuration

Here, we take Taro Build — Type Weapp command as an example, and compile the React technology stack code to the WeChat applet platform.

Let’s take a look at the default configuration (as shown below)

From the above configuration, we can see that framework (framework) is React and platform (target platform) is Weapp (WeChat). Let’s take a look at the WebpackChain generated by this configuration, which is line 27 in Minirunner (as shown below).

The next analysis is also the Webpack configuration analysis popular science, may be more boring, you will know the internal compilation after patience.

Basic configuration

Let’s go to the buildConf function (as shown below)

As you can see from line 27 of the figure above, getBaseConf is used internally to get an initial setting (as shown below)

Let’s parse the underlying configuration item line by line, as follows:

  • The first9Line: The extension used by the source file, including here'.js', '.jsx', '.ts', '.tsx', '.mjs', '.vue'It is worth noting thatmjsRefers to theJavaScript modules module
  • The first10Line: Specifies when importing a modulepackage.jsonWhich field in this configuration will be used preferentiallybrowserProperty resolution file, followed bymoduleAnd, finally,main.
  • The first11Line: Symlinks resolve to their symlink location. Relevant information can be referred toWhen Webpack meets Symlink.
  • The first12 ~ 15Line: Tells Webpack the directory to search when parsing a module, which corresponds tonode_modulesDirectory.
  • The first16 ~ 21Line: Here are some run-time modules that point to the top level of the local node_modules to keep the state consistent.
  • The first23 ~ 27Line: parsingwebpack loaderPackage, specifynode_modulesDirectory.
  • The first28 ~ 30Line: The code package contains side effects and is not intended to be usedtree shakingOptimization.
  • The first33 ~ 35Add:tarobuilt-inMultiPlatformPluginPlug-ins, which we’ll explore later.

Build item configuration

Now that we’ve cleared the base configuration, let’s move on to the buildConf function (shown below).

As can be seen from the figure above, at lines 98~100, the copy attribute is parsed-as copy-webpack-plugin and added to Webpack (as shown below).

The next few lines of code show some of the nitty-grittys between React and the WeChat applet. (as shown below)

As you can see from line 103, if the framework is React, miniRunner internally points to @tarojs/ React as React -dom.

In the React architecture, the React library implements the core parts of ReactComponent and ReactElement, while the React -DOM library implements React rendering updates in the browser by manipulating the DOM. In small programs, you can’t manipulate the DOM tree directly or there is no traditional DOM tree, so using React -DOM directly will result in an error. So Taro implements a React -DOM runtime on small programs to ensure that React can render and update nodes properly on the small program side.

Another way to think about it is,
react-domIt’s the browser side
render.
react-nativeIt’s a native APP
renderAnd the
@tarojs/reactIt’s on the applet
render.

Let’s move on (as shown below)

In line 119, you collect some constants and then process them with the DefinePlugin (see figure below)

Let’s move on (as shown below)

In lines 120-133, the entryRes (entry resource), defaultCommonchunks (default chunk) are determined primarily by the isBuildPlugin variable (whether it is a packaged plug-in).

Next, Minirunner registered a series of plug-ins (as shown below)

The registered plug-ins at this time include:

Lines of code explain
The first134 行 definedefinePluginPlug-in that defines some global variables
The first135 行 defineTaroMiniPluginPlug-in, which is primarily responsible for renderingframeworkThe source file is converted toplatformPlatform code
The first157 行 defineMiniCssExtractPluginPlug-in, which is responsible for extracting all the CSS files into a single file
The first39 ~ 80 行 defineProvidePluginPlug-in, which is responsible for one of the core functions of switching the runtime environment from the browser environment totaroThe runtime environment, such as thewindowreplace@tarojs/runtimeThe export ofwindow

TarominiPlugin and @tarojs/ Runtime. Let’s take a note, and we’ll parse it later.

Let’s move on. (as shown below)

In lines 173 to 186, it is mainly about configuring the compression plug-in for JS and CSS files (as shown below).

Next, WebpackChain merges a series of underlying parameters (as shown below)

Let’s do line-by-line parsing:

  • The first189Line:modeConfigure options to advisewebpackUse the built-in optimizations for the corresponding patterns.
  • The first190Line: Controls whether to buildsource-map.
  • The first191OK: the entry file, i.eapp.js.
  • The first192Line: Defines the production directory where the code is compiled.
  • The first200Line: Specifies the target environment.
  • The first203Line:aliasAlias options.
  • The first204Configuration:module, here the main configuration is a few differentloader.
  • The first226Configuration:pluginThe plug-in.
  • The first227Line: Some compilation option optimizations are manually configured.

After combining a series of parameter configurations, buildConf finally does VUE compatibility, and chain is returned. (as shown below)

Configuration item overview

After looking at the internal WebpackChain (BuildConf) composition, let’s go back to Minirunner and look at the code (see figure below).

In line 30 of the figure above, Minirunner combines the internal WebpackChain with the WebpackChain set up by the developer to get the final WebpackChain (shown below).

Let’s take a look at the resulting Webpack configuration generated by the WebpackChain (see below).

The configuration is long, but we still need to focus on two important parts

The first is the internal Taro plugin – TarominiPlugin (as shown below).

Taro internal loader – minitemplateLoader (as shown below)

You can say that if you understand the TarominiPlugin and MinitemPlateLoader, you can understand the flow from React to applet.

summary

The TarominiPlugin and MinitemPlateLoader sections are more complex, and we’ll cover them in two separate sections later.

So that’s the end of Minirunner’s comb.

Finally, let’s draw a flowchart to help you understand (as shown below).

One last thing

If you’ve already seen this, I hope you’ll like it before you go

Your thumb up is the greatest encouragement to the author, and can also let more people see this article!

If you found this article helpful, please help to light up Star on GitHub.