编译工作流与抽象语法树(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语法树
,进行代码插入和转换;