Recently, I used Taro to write a small program. Out of curiosity, I plan to read Taro’s source code.

Taro init is an example to explain the operation mechanism of the Kernel + hook. Taro init is an example to explain the operation mechanism of the Kernel + hook.

This article will complement the @tarojs/ CLI article, focusing on how taro Build works and how it builds on different platforms.

Without further ado, let’s begin.

taro build

Let’s start by looking at the scripts section of package.json in an Taro project.

The taro build command uses type as its main parameter. 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 running at line 41 in the figure above actually runs kernel.run().

Let’s once again parse what the kernel.run() function does

kernel.run

This section is the Kernel content, understanding this section will understand the taro- CLI working mode

The following figure shows the kernel.run method. Let’s analyze it line by line (figure below).

  • Line 271-279: Initialize some parameters;

  • Line 280: Initialize the project configuration, initialize the project path information, initialize the project plug-in; This step is a critical preparation. After execution, all compiled plug-ins and platform-compiled plug-ins will be loaded into the Kernel instance for use by subsequent compilers. When the load is complete, the Kernel’s first hook, onReady, is triggered. (Explained in detail in the Taro source interpretation – @tarojs/ CLI)

  • Line 281: Execute the second hook -onstart;

  • Line 297~303 “opts. Platform” refers to the type parameter that you add when running an app (including “appellate P”, “appellate QQ”, “appellate H5”). . Then get the corresponding build configuration based on the platform (figure below)

    The framework in the figure above is the react framework used by the program, and platform is the target compilation platform, appellate Apps.

  • Line 304: Run the third hook, the build-hook passed in by the kernel.run function.

Build a hook

Let’s look at the build hook function.

As you can see from the figure above, the build hook has familiar parameters such as –type, –watch, and some less-used ones that we won’t expand here.

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

As you can see from the figure above, the implementation of FN is not complicated, so let’s examine a few key lines of code:

  • The first30Line: Check the project-specific configuration. The configuration file checked here is actually in the projectconfig/index.jsConfiguration file.
  • The first60Line: Build starts, triggeronBuildStartHook. This hook is also documented and can be extended through plug-ins to extend the code compilation process (see figure below).
  • The first61Line: Triggers the corresponding platform hook, in this caseweappHook (as shown below);

Weapp hooks

Taro’s hook mechanism is very well implemented and makes it more convenient to read source code. Therefore, we only need to find relevant relevant P files. Here, we will focus on FN function directly. (As shown below)

Let’s parse a few key lines of code:

  • The first45Line: generates wechat applets according to the project configurationproject.config.json;
  • The first51Line: to prepareminiRunnerConfiguration parameters are actually the corresponding compilation parameters of wechat applets. We can see the familiar wechat applets file from the configuration (as shown below).
  • The first69, 70,Loading:miniRunnerPackage and runminiRunner.

MiniRunner small peep

In the end, Taro Build goes from kernel.run to miniRunner.

Some of you should have guessed, is the Webpack compiler. (As shown below)

After collecting the corresponding configuration, finally enter the Webpack compilation code (as shown below)

After compiling, the small program code corresponding to our platform will be compiled!

summary

In this chapter (Taro Build), we can get a better sense of the subtleties of the Kernel + hook mechanism. This implementation decouples modules, allowing them to divide and conquer.

The final miniRunner is the last step in the compilation process in taro Build. The implementation of this section should not be part of the Taro source code interpretation, more like the use of WebPack interpretation.

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

One last thing

If you’ve already seen it, please give it a thumbs up

Your likes are the greatest encouragement to the author, and can also let more people see this article!

If you find this article helpful, please help to light up the star on Github.