taro 多个平台打包的原理

编译工作流与抽象语法树（AST）
Taro 的核心部分就是将代码编译成其他端（H5、小程序、React Native等）代码。一般来说，将一种结构化语言的代码编译成另一种类似的结构化语言的代码包括以下几个步骤：

首先是 parse，将代码 解析（Parse）成 抽象语法树（Abstract Syntex Tree），

然后对 AST 进行 遍历（traverse）和 替换(replace)（这对于前端来说其实并不陌生，可以类比 DOM 树的操作），

最后是 生成（generate），根据新的 AST 生成编译后的代码。

 

h5的构建逻辑

h5的构建流程主要经过：源代码 => 中间代码 => 目标代码的转换； 其中：

• 源代码：一般是指src目录底下的代码，如果config中有配置sourceRoot，则源代码入口就为sourceRoot；
• 中间代码：指.temp目录下的代码，由taro-build实现的中间流程，主要通过babel实现中间代码的转换和生成；
• 目标代码：指最终运行在浏览器的代码，一般指dist目录下的代码，如果config中配置outputRoot，则目标代码将输出在outputRoot；

所以，三种代码间的转换关系可以用下图表示：

 

taro-build帮助将源代码转换成中间代码，并保存在.temp文件夹中，中间代码再交由webpack进行打包构建生成目标代码；

 

小程序的构建逻辑

taro-build的小程序构建逻辑不存在中间代码的生成，而是直接由源代码生成小程序能运行的目标代码；这里的源代码是指遵循React规范的taro代码，这种代码在小程序的容器中是无法直接运行的，所以需要通过taro-build转换成小程序可运行的代码，因此在这个流程中涉及大量的AST语法解析和转换；

小程序的构建流程主要分三步完成(当然这里还有很多细节，但本文暂不详细阐述)：

• 构建入口：指构建sourceDir指定的文件，默认是app.jsx文件，构建的逻辑由buildEntry函数完成；
• 构建页面：指构建在app.jsx文件中的config.pages配置好的页面文件，主要由buildPages函数完成；
• 构建组件：指构建页面文件中依赖的组件，主要由buildSingleComponent函数完成；

构建流程需要依赖taro-transformer-wx包去解析JSX语法，已经对源代码的AST语法树，进行代码插入和转换；