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 – @Tarojs/CLI, I have explained the principle of Taro-CLI implementation, and then take Taro init as an example to explain the operating mechanism of the core Kernel + hooks.

This article will be a complement to the @tarojs/cli article, focusing on how Taro Build works and how it differs from platform to platform.

Without further ado, let’s begin.

taro build

Let’s start by looking at the scripts section of package.json in a Taro project (as shown below)

As you can see from the image above, the taro build command takes type as its main parameter, and in dev mode, an additional watch parameter is added.

With that in mind, let’s see what happens when we run Taro Build

Kernel

First, the CLI instance will parse the command-line arguments and then proceed to the build operation (as shown below).

The build function that runs on line 41 in the figure above actually runs the kernel.run() function (as shown below).

Let’s look at what the kernel.run() function does

kernel.run

This passage is
KernelIf you understand this paragraph, you will understand it
taro-cliThe working mode of

The following figure is the kernel.run method. Let’s conduct a line-by-line analysis (as shown below).

  • The first271 ~ 279Line: initializes some parameters;
  • The first280Line: Initialize project configuration, initialize project path information, and initialize project plug-in; This step is a critical preparatory work, after the execution is complete, all the build plug-ins, platform build plug-ins will be loaded into theKernelInstance for use by subsequent compilers. Will fire after the load is completeKernelThe first hook of –onReady. (in theTaro source code interpretation – @Tarojs/CLIIt is explained in detail in the article.)
  • The first281Line: Executes the second hook –onStart;

  • Line 297-303: The opts. Platform is the type parameter passed in when running Taro build, such as ammunition, QQ, H5… . Then get the corresponding compilation configuration based on the platform (as shown below)

    In the figure above
    frameworkIs the framework used by the project
    reactAnd the
    platformIs the target compilation platform
    weapp(WeChat applet).

  • The first304Line: Run the third hook, i.ekernel.runThe hook that the function passes –buildHook.

Build a hook

Let’s look at the build hook function (as shown below).

As you can see from the image above, the build hook has familiar parameters such as –type and –watch, as well as some less used ones, which I won’t expand here.

Here we focus on the fn function, which is executed when the hook is fired (see figure below).

As you can see from the above diagram, the implementation of FN is not complicated. Let’s examine a few key lines of code:

  • The first30Line: Check the project-related configuration. The configuration file checked here is actually in the projectconfig/index.jsConfiguration files.
  • The first60Line: Build starts, triggeredonBuildStartHook. This hook is also described in the documentation, and can be extended through plug-ins to extend the code compilation process (see figure below).

  • The first61Line: fires the corresponding platform hook, in this caseweappHook (as shown below);

Weapp hooks

Taro’s hook mechanism is very sophisticated, and also makes our source code more convenient to read, so we only need to find the corresponding ammunition file, here we directly focus on the fn function. (as shown below)

Let’s parse a few of the key lines:

  • The first45Line: Generates the WeChat applet according to the project configurationproject.config.json;
  • The first51Line: to prepareminiRunnerConfiguration parameters, in fact, are the compilation parameters corresponding to the WeChat applet. We can see the familiar WeChat applet file from the configuration (as shown below).

  • The first69, 70,Loading:miniRunnerPackage, and runminiRunner.

MiniRunner small peep

At the end, Taro Build goes from Kernel. Run to Minirunner, but what is Minirunner?

As some of you might have guessed, it’s the Webpack compiler. (as shown below)

After collecting the corresponding configuration, I finally entered the compiled Webpack code (as shown in the figure below).

After compiling, our corresponding platform of small program code is compiled!

summary

In this chapter, Taro Build, we can more appreciate the subtlety of Kernel + hook mechanism. This implementation decouples modules, allowing them to divide and conquer.

The final miniRunner is kind of the last step in the compilation process in Taro Build. This part of the implementation should not be part of the Taro source read, but more like a Webpack use read.

So, we’ll use a separate section later to explain what Minirunner does and how it compiles React, Vue code into applet side code.

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.