Taro 编译流程

compiler.watch/run

注册modifyRunnerOpts钩子: 修改webpac参数，判断是否要开启依赖预编译来提升本地构建速度

setup: 生成project.config.js文件

@tarojs/plugin-platform-weapp

taro-webpack5-runner/src/plugins/MiniPlugin.ts

初始化buildTemplate方法，用于在webpack调用plugin阶段写入微信小程序模板代码，创建wxml等文件

注册: 为TaroMiniPlugin钩子注册新的事件，当遇到不同入口文件时，按以下对应关系加入loaderentry: @tarojs/taro-loadercomponent: @tarojs/taro-loader/lib/componentpage: @tarojs/taro-loader/lib/page

taro-loader/src/component.ts

初始化钩子函数: registerPlatform

setAlias: 给webpack 的alias配置映射，如将react相关的引用转发到@tarojs/react等

初始化预设插件钩子函数: initPresetsAndPlugins

setLoader: 修改miniPlugin插件的参数loaderMeta

执行

build: 获取编译器(这里是webpack5)和webpack配置，执行build

技术栈: @tarojs/plugin-framework-react

执行TaroMiniPlugin等插件，生成小程序产物如comp.wxml等

调用Weapp实例start

applyPlugins: 借助tapable库，通过tapPromise来注册钩子函数，通过promise触发钩子执行fn

taro-plugin-react/src/webpack.mini.ts

taro-loader/src/app.ts

实例化template模板

将代码片段写进小程序产物如comp.wxml等

taro-webpack5-runner/src/webpack/Combination.ts

小程序编译:@tarojs/plugin-platform-weapp

执行compiler: 这里可以看到自定义以及预算的大部分loader、plugin、alias。从此命运的齿轮开始转动

注册

根据前面修改的loaderMeta，给page级编译产物注入全局依赖，可以看到此时代码已经转化为通过react/jsx-runtime来转换dom节点的方式

taro-cli

执行依赖预加载

taro-webpack5-prebundle/src/mini.ts

@tarojs/plugin-framework-react

taro-loader/src/page.ts

根据前面修改的loaderMeta，给component级编译产物注入全局依赖

taro-service/src/platform-plugin-base/mini.ts

通过buildStandardComponentTemplate、buildOptimizeFloor等方法生成小程序代码产物片段，用来定义各种模板组件

combination: 执行插件注册的钩子modifyWebpackChain、modifyRunnerOpts

taro-weapp/src/program.ts

taro-webpack5-runner/src/index.mini.ts

Taro服务层内核: new Kernel

根据前面修改的loaderMeta，给entry级编译产物注入全局依赖

执行: 执行build、weapp钩子

实例Weapp

执行钩子回调

注册modifyWebpackChain钩子: 获取到 WebpackChain 实例，对alias和loader进行修改

prebundle: 判断是否执行依赖预加载

shared/src/template.ts

taro-service