共计 2059 个字符，预计需要花费 6 分钟才能阅读完成。
因为近期应用到 Taro 编写小程序，出于好奇，筹备研读一下 Taro 的源码。
目录剖析
首先从官网拉取最新的 Taro 源码，版本号为 3.0.18，源码目录如下：
目录没什么特地的，咱们来重点关注一下 packages 目录中的外围包（如下图）
这些外围包形成了 Taro，实现了 Taro 的多平台构建。
@tarojs/taro
在开发过程中，咱们用的最频繁的包就是 tarojs/taro，咱们从入口文件 packages/taro/index.js 开始剖析（如下图）
从上图咱们能够看出，Taro 依据不同的编译环境变量，引入了对应的编译包，从而放慢编译速度，减小编译体积。
编译包引入的是一个 initNativeAPI 初始化函数，用于初始化对应平台的原生 API。
微信平台编译包
这里咱们以最风行的微信小程序来举例说明，关上文件 packages/taro/apis/wx.js，发现了导出的 initNativeAPI 函数（如下图）
咱们来对 initNativeApi 所做的事件进行剖析，总的来说 initNativeApi 所做的事件就是将微信的 API 进行一些二次封装，而后转成挂载在 Taro 对象下，开发者调用 Taro 的 API 即可调用到微信官网 API。
processApis
咱们先来看看 initNativeApi 中的 processApis 办法做了哪些事件吧（如下图）。
从上图能够看出，Taro 首先收集了三类办法：
1. `onAndSyncApis`：事件监听和同步事件 API；2. `noPromiseApis`：没有返回 `Promise` 的异步事件，`Taro` 将会把这些事件应用 `Promise` 进行二次封装；3. `otherApis`：其余 API，如设施、媒体、平台专属 API；对于微信端不反对的办法，将返回一个正告函数（如下图）
对于 otherApis，如果最初一个参数是 TaroComponent，则会将最初一个参数替换为 TaroComponent.$scope（如下图）
对于 onAndSyncApis 和 noPromiseApis 则有几种不同的解决形式：
1. 当第一个参数为字符串时，返回微信 API 执行后果（如下图）
2. 当办法为跳转类函数时，先去掉结尾的 `/`，去掉 `query` 局部，应用 url 获取组件。如果组件存在且蕴含 `componentWillPreload` 办法时，会执行 `componentWillPreload` 并且将执行后果存储在 `cacheData` 中，提供给组件后续的生命周期钩子应用。
3. 新建 `Promise`，将办法封装，在执行胜利时 `resolve`，执行失败时 `reject`，而后将该 `Promise` 返回。
下面这些工作就是 processApis 所做的事件，它将所有的微信原生 API 进行二次封装，而后挂载在 Taro 对象中。
request
接下来咱们看看对网络申请的革新，这里除了革新 request 外，还新增了 addInterceptor 和 cleanInterceptors 办法，用于在申请收回前或收回后做一些额定操作。代码实现如下：
taro.request = link.request.bind(link)
taro.addInterceptor = link.addInterceptor.bind(link)
taro.cleanInterceptors = link.cleanInterceptors.bind(link) 想要看懂 addInterceptor 的实现，须要找到 Link 的实现（如下图）
从上图红圈处能够看出，用于创立 Link 实例的拦截器将被放在调用链的最初一个，而后由 Chain 顺次程序执行每一个拦截器（interceptor），而后最终执行到创立 Link 实例的这个 interceptor。
从下面的剖析就能很清晰的看出 拦截器 的实现，当初咱们来看看 request 的实现（如下图）。
从上图能够看出，request 实现的次要需要就是将原生的 request 办法应用 Promise 进行二次封装，并没有更多非凡解决。
通过剖析，咱们发现 Taro 对网络申请的封装，使其领有了 拦截器 的个性，并且有了更敌对的 Promise 调用形式。
其余
接下来三个都是微信小程序的全局办法，间接进行挂载（如下图）
接下来是像素转换函数，次要是将像素转成对应的 rpx（如下图）
紧随其后的是 canIUseWebp，意思是判断是否能够应用 webp 格局的图片（如下图）
从下图能够看出，目前只有安卓平台和开发者工具反对 webp 格局的图片，所以 webp 格局的图片肯定要审慎应用。
最初一步，将微信的云开发 SDK 挂载在 Taro.cloud 对象中，实现挂载（如下图）
小结
到这里，@tarojs/taro 就曾经解析实现了，这部分源码的实现还是比拟简洁明了的，作为 Taro 源码浏览系列入门还是挺不错的~
最初一件事
如果您曾经看到这里了，心愿您还是点个赞再走吧~
您的点赞是对作者的最大激励，也能够让更多人看到本篇文章！
如果感觉本文对您有帮忙，请帮忙在 github 上点亮 star 激励一下吧！