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 HBX version with the latest HBX 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 grown large, and the compilation speed is really too slow.
Start#
- Download the new version HBX 4.36.
- Enter the extracted HBX folder.
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 find that our print is there, indicating that we are in the right place.
Then, following the code, we find that it executed service.run uni-build, so let's see how run uni-build is executed; 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 new Service is created, it references the node_modules@vue\cli-service package, which exports
This is the file @vue/cli-service/lib/Service.js. Find the run method.
The init method initializes the uni-build command. The print shows 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 has been confirmed that the new version cannot run on the hbuilder software due to different configurations of the @dcloudio/vue-cli-plugin-hbuilderx package.
Replace the two packages, vue-cli-plugin-hbuilderx and vue-cli-plugin-uni. Then handle this error, finding that it cannot detect file updates, indicating that there is a problem with the configuration in these two packages.
let time = uniStatisticsConfig.reportInterval;
We find this line of code, which may affect type checking.
// Restore ts checking for vue-loader
tsLoaderOptions.transpileOnly = false
Some common methods of uni configure uni-cli-shared.
updateTsLoader did not match the file.
By comparing configurations, we find that the logic for writing configurations to the ts loader in updateTsLoader differs between the two versions, so we try to modify it.
We attempt to completely overwrite the configure-webpack file, but the compilation still fails. It may be this file.
vue-cli-plugin-builders
vue-cli-plugin-uni
Overwriting both of these packages allows for normal compilation, but there will be errors at the end.
The error is here, and we don't know why.
return reject(Build failed with errors.)
The principle is to not modify the project, only modify hbuilderx.
It has been confirmed that after overwriting the two packages, modifying the error in this file can solve the problem.
1#
Test if replacing only vue-cli-plugin-uni can run normally. Test again. The webpack.nvue.conf.js file reports an error; try pasting the configuration from 3216.
vue-cli-plugin-hbuilderx/build/webpack.nvue.conf.js
Finally, the compilation fails, and hot updates do not work.
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 fails, and by opening the error information, we can see
Comment out here.
Then modify the error in uni statistics.
It can run normally. This solution is feasible; the issue with running the new version is due to these two packages, along with the uni statistics and webpack hasError exceptions.