共计 1921 个字符，预计需要花费 5 分钟才能阅读完成。
因为近期应用到 Taro 编写小程序，出于好奇，筹备研读一下 Taro 的源码。
在上一篇文章 Taro 源码解读 – @tarojs/cli 篇 中，曾经解说了 taro-cli 的实现原理，而后以 taro init 为案例解释了外围 Kernel + 钩子的运行机制。
本篇文章将会是对 @tarojs/cli 篇的一个补充，着重介绍 taro build 的运行机制，以及不同平台的编译差异。
话不多说，咱们开始吧。
taro build
咱们首先来看看在一个 Taro 我的项目中 package.json 的 scripts 局部（如下图）
从上图能够看出，taro build 命令次要的参数是 type，在 dev 模式下，会减少一个额定的 watch 参数。
基于这个印象，咱们来看看运行 taro build 后会产生什么吧~
Kernel
首先，Cli 实例将会对命令行参数进行解析，而后进入到 build 操作（如下图）
在上图的第 41 行运行的 build 函数，实际上是运行了 kernel.run() 函数（如下图）
咱们再来解析一下 kernel.run() 函数所做的事件吧~
kernel.run
这一段是
Kernel的核心内容，了解了这段就了解了taro-cli的工作模式
下图是 kernel.run 办法，咱们来进行逐行剖析（如下图）
- 第
271~279行：初始化一些参数； - 第
280行：初始化我的项目配置、初始化我的项目门路信息、初始化我的项目插件；这一步是十分要害的筹备工作，在执行实现后，所有的编译插件、平台编译插件都将被加载到Kernel实例上，供后续的编译程序应用。在装载实现后，将会触发Kernel的第一个钩子 –onReady。（在 Taro 源码解读 – @tarojs/cli 篇 篇中有具体解说） - 第
281行：执行第二个钩子 –onStart； 第
297~303行：这里的opts.platform其实就是运行taro build时传入的type参数，比方weapp、qq、h5...。而后依据平台获取对应的编译配置（如下图）在上图中的
framework中是我的项目所应用的框架react，而platform则是指标编译平台weapp（微信小程序）。- 第
304行：运行第三个钩子，也就是kernel.run函数传入的钩子 –build钩子。
build 钩子
咱们上面来看看 build 钩子函数（如下图）
从上图能够看出，build 钩子有咱们比拟相熟的参数，比方 --type、--watch，还有一些比拟少用到的，这里就不作开展了。
这里咱们重点关注 fn 函数，当钩子被触发时，就是执行了 fn 函数（如下图）。
从上图能够看出，fn 的实现并不简单，咱们来剖析一下其中几行要害代码：
- 第
30行：查看我的项目相干配置，这里查看的配置文件其实就是我的项目中的config/index.js配置文件。 - 第
60行：构建开始，触发onBuildStart钩子。这个钩子在文档中也有介绍，能够通过插件对代码编译过程进行拓展（如下图）。 - 第
61行：触发对应的平台钩子，在本案例中是weapp钩子（如下图）；
weapp 钩子
Taro 的钩子机制实现的十分精妙，同时也使咱们的源码浏览变得更加不便，那么咱们只须要找到对应的 weapp 文件即可，这里咱们间接关注 fn 函数。（如下图）
咱们来解析其中几行要害代码：
- 第
45行：依据我的项目配置生成微信小程序的project.config.json； - 第
51行：筹备miniRunner配置参数，其实就是微信小程序对应的编译参数，咱们能够从配置里看到比拟相熟的微信小程序文件（如下图） - 第
69、70行：加载miniRunner包，并运行miniRunner。
miniRunner 小窥
在最初，taro build 从 kernel.run 走到了 miniRunner，那 miniRunner 是什么呢？
有的小伙伴应该曾经猜到了，就是 webpack 编译程序。（如下图）
在收集好对应配置后，最初进入到了 webpack 编译代码（如下图）
通过编译后，咱们对应平台的小程序代码就被编译进去啦！
小结
在本章 taro build 中，咱们更加能领会到 Kernel + 钩子机制的精妙之处。这种实现解耦了模块，使得模块之间得以分治。
最初的 miniRunner 能够说是 taro build 中编译过程的最初一步。这部分的实现应该不算 Taro 源码解读的局部，更像是 webpack 的应用解读。
所以，咱们前面将会应用一篇独立的章节来解说 miniRunner 所做的工作，以及它是如何将 React、Vue 代码编译成小程序端代码的。
最初一件事
如果您曾经看到这里了，心愿您还是点个赞再走吧~
您的点赞是对作者的最大激励，也能够让更多人看到本篇文章！
如果感觉本文对您有帮忙，请帮忙在 github 上点亮 star 激励一下吧！
