Taro 编译流程
2023-12-07 22:34:06 5 举报浅析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
0 条评论
下一页
