banner
飞天御剑流

飞天御剑流

前端,jAVAsCRIPT
github

uniapp 源代码读(是怎么编译ts的)

拉代码 dev 分支
这篇文章从这个 932a3ca2db739dbf76a281c6548ac169b53fac98 git commit hash 来读
首先看包管理器,使用的是 yarn
image
yarn install 安装依赖
打开 pkg.json 文件
我喜欢看代码是从测试开始看,看看是怎么运行的
image
运行下测试 test
需要找一个有 ts 文件的地方,看是怎么运行起来的
测试的目标文件在这个文件夹下 packages/uni-template-compiler
入口是这里 lib/index.js

可以看到这个包里引用了 vue-template-compiler 也就是 vue 用于编译模板文件的

image

vue-cli-plugin-uni 是主入口
index.js

chain webpack 配置
vue-cli-plugin-uni/lib/chain-webpack.js

webpack 配置
vue-cli-plugin-uni/lib/configure-webpack.js
然后查看入口

这个文件
vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js

image

vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js
这个文件里处理了 vue 的 main.js 文件内容

vue-cli-plugin-uni/packages/webpack-preprocess-loader/preprocess/lib/preprocess.js
这个文件更具体的编译 preprocess 方法编译

vue-cli-plugin-uni/lib/env.js 这个文件开始编译的时候用到了

// 编译 vue 模板文件
uni-template-compiler/lib/index.js

// 正在编译中 vue-cli-plugin-uni\lib\env.js
runByHBuilderX && console.log(uniI18n.__('compiling'))
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.