Background#
The company has a project that started in 2020 and has been maintained for 4 years by 2024. The tech stack is uniapp + vue2. After a certain version, our team unilaterally introduced ts + composition-api into uniapp. At that time, the version of HbuilderX (hereinafter referred to as HBX) was 3.2.16, and after further updates, we could no longer run the project.
Purpose#
- We want to replace the current version of HBX with the latest version, as the new version may have fixed some bugs.
- We want to improve the compilation speed of the existing project, as the uniapp project has become large, and the compilation speed is really too slow.
Start#
- Download the new version HBX 4.36.
- Enter the HBX folder after extraction.
Open the path HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli. Find the folder HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli\bin\uniapp-cli.js 📂 Everything starts from here.
Find the above file and log it.
We found that our print is there, indicating that we are in the right place.
Then following the code, we found that it executed service.run uni-build, so let's see how run uni-build is done; this is the main line.
// @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)
})
When creating a new Service, the package node_modules@vue\cli-service is referenced, and this package exports
which is this file @vue/cli-service/lib/Service.js.
Find the run within it.
The init within initializes the uni-build command.
From the print, we see that the following two packages are used.
Except for the built-in ones mentioned above, the others are references to the corresponding packages, so these packages are referenced.
It was found that the new version could not run on the hbuilder software due to different configurations of the package @dcloudio/vue-cli-plugin-hbuilderx.
Replace the two packages, vue-cli-plugin-hbuilderx and vue-cli-plugin-uni.
Then handle this error, and found that it cannot detect file updates, indicating that there is a problem with the configuration in these two packages.
let time = uniStatisticsConfig.reportInterval;
Found this line of code, which may affect type checking.
// Restore ts checking for vue-loader
tsLoaderOptions.transpileOnly = false
Some common method configurations of uni are in uni-cli-shared.
updateTsLoader did not match the file.
By comparing configurations, it was found that the logic for writing configurations for ts loader in updateTsLoader of the two versions is different, so let's try modifying it.
Tried to completely overwrite the configure-webpack file, but the compilation still did not pass.
It might be this file.
vue-cli-plugin-builders
vue-cli-plugin-uni
Overwriting both of these packages can compile normally, but there will be an error at the end.
The error is here, and I don't know why.
return reject(Build failed with errors.)
Principle: Do not modify the project, only modify hbuilderx.
It was tested that after overwriting the two packages, modifying the error in this file can solve the problem.
1#
Test whether replacing only vue-cli-plugin-uni can run normally.
Test again.
The webpack.nvue.conf.js file reported an error, so I tried to copy the configuration from 3216.
vue-cli-plugin-hbuilderx/build/webpack.nvue.conf.js
Finally, the compilation reported an error, and hot updates could not be performed.
ERROR Build failed with errors.
2#
Replace the two packages without changing other content.
vue-cli-plugin-hbuilderx
vue-cli-plugin-uni
Try to check the compilation results.
The compilation reported an error, and opening the error information showed
Comment out here.
Then modify the error of uni statistics.
It can run normally; this solution is feasible. The issue with running the new version is indeed due to these two packages, along with the uni statistics and webpack hasError exceptions.