uniapp 源码调试

背景

公司有一个项目，是 2020 年的，到 2024 年已经维护 4 年了
技术栈是 uniapp + vue2
在某个版本之后，我们组内擅自引入了 ts + composition-api 到 uniapp 里，当时的 HbuilderX（下文简称 HBX） 版本是 3.2.16，后面再更新，就没法把项目运行起来了

目的

想用最新的 HBX 版本替换现在的 HBX 版本，新版本可能修复了一些 bug

想提高现有项目的编译速度，uniapp 项目大了，编译速度实在是太慢了

开始

下载新版本 HBX4.36 版本

进入到解压之后的 HBX 文件夹内

打开 hbuilderx 的 HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli 路径
找到 HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli\bin\uniapp-cli.js 文件夹📂一切都是从这里开始的

找到上面文件，打个 log
发现我们的打印是在的，说明，没找错地方

然后顺着代码，发现执行了 service.run uni-build，那就看 run uni-build 是怎么搞出来的，这是主线

Copy
// @vue/cli-service/lib/Service.js
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

service.run((process.env.NODE_ENV === 'development' && platform === 'h5') ? 'uni-serve' : 'uni-build',
args).catch(err => {
error(err)
process.exit(1)
})

new Service 的时候，引用了 node_modules@vue\cli-service 这个包，然后，这个包导出

也就是这个文件 @vue/cli-service/lib/Service.js
找到其中的 run

其中的 init 初始化了 uni-build 命令
打印看用了下面两个包

除了上面带 built-in 的，其他都是引用对应包的，那就引用了上面的这些包

实测是因为 @dcloudio/vue-cli-plugin-hbuilderx 这个包的配置不一样导致新版本无法运行到 hbuilder 软件上

更换两个包，vue-cli-plugin-hbuilderx 和 vue-cli-plugin-uni
然后把这个报错处理掉，发现不能检测到文件更新，说明这两个包里的配置哪里有问题
let time = uniStatisticsConfig.reportInterval;

发现这么一行代码，可能影响到了类型检查
// 恢复 vue-loader 的 ts 检查
tsLoaderOptions.transpileOnly = false

Copy
uni 的一些公共方法配置 uni-cli-shared

updateTsLoader 没匹配上文件

对比配置，发现两个版本的 updateTsLoader 给 ts loader 写配置的逻辑不一样，修改尝试一下

尝试整个 configure-webpack 文件都覆盖，测试，编译还是不通过
有可能是这个文件

vue-cli-plugin-builders
vue-cli-plugin-uni
这两个包都覆盖，可以正常编译，但是到最后会有报错
报错在这里，不知道为什么
return reject(Build failed with errors.)

原则，不改项目，只改 hbuilderx

实测，覆盖两个包之后，再修改这个文件的 error，即可解决此问题

1

测试只替换 vue-cli-plugin-uni 是否能正常运行
再测试一下
webpack.nvue.conf.js 文件报错，试着把 3216 的配置粘过来
vue-cli-plugin-hbuilderx/build/webpack.nvue.conf.js
最后编译报错，且无法热更新
ERROR Build failed with errors.

2

替换两个包，不更改其他的内容
vue-cli-plugin-hbuilderx
vue-cli-plugin-uni
尝试查看编译结果
编译报错，打开错误信息可以看到

注释掉这里

再修改 uni 统计的报错

能正常运行，此方案可行，无法运行新版本的问题就是这两个包的问题，加上个 uni 统计和 webpack hasError 的异常