背景#
会社には 2020 年のプロジェクトがあり、2024 年まで 4 年間メンテナンスされています。
技術スタックは uniapp + vue2 です。
あるバージョン以降、私たちのグループは uniapp に ts + composition-api を独自に導入しました。その時の HbuilderX（以下 HBX と略します）バージョンは 3.2.16 で、その後更新するとプロジェクトを実行できなくなりました。
目的#
- 最新の HBX バージョンに現在の HBX バージョンを置き換えたい。新しいバージョンではいくつかのバグが修正されている可能性があります。
- 既存のプロジェクトのコンパイル速度を向上させたい。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 フォルダ📂、すべてはここから始まります。
上記のファイルを見つけて、ログを出力します。
私たちの出力があることがわかり、間違った場所を探していないことが示されています。
次にコードをたどり、service.run uni-build が実行されていることを発見しました。それでは run uni-build がどのように実行されるのかを見てみましょう。これがメインの流れです。
// @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 コマンドを初期化しました。
出力を見て、以下の 2 つのパッケージが使用されていることがわかります。
上記の built-in を除いて、他は対応するパッケージを参照していますので、上記のパッケージを参照しました。
実際のテストでは、@dcloudio/vue-cli-plugin-hbuilderx というパッケージの設定が異なるため、新しいバージョンが hbuilder ソフトウェアで実行できないことがわかりました。
2 つのパッケージ、vue-cli-plugin-hbuilderx と vue-cli-plugin-uni を置き換えます。
そして、このエラーを処理すると、ファイルの更新を検出できないことがわかりました。これは、これらの 2 つのパッケージの設定に問題があることを示しています。
let time = uniStatisticsConfig.reportInterval;
この行のコードが、型チェックに影響を与えている可能性があります。
//vue-loader の ts チェックを復元
tsLoaderOptions.transpileOnly = false
uniのいくつかの公共メソッドはuni-cli-sharedを設定します。
updateTsLoaderがファイルにマッチしていません。
設定を比較すると、2 つのバージョンの updateTsLoader が ts ローダーに書く設定のロジックが異なり、修正を試みます。
configure-webpack ファイル全体を上書きしてテストしましたが、コンパイルはまだ通りません。
おそらくこのファイルです。
vue-cli-plugin-builders
vue-cli-plugin-uni
この 2 つのパッケージを上書きすると、正常にコンパイルできますが、最後にエラーが発生します。
エラーはここにあり、なぜかわかりません。
return reject(Build failed with errors.)
原則として、プロジェクトを変更せず、hbuilderx のみを変更します。
実際のテストでは、2 つのパッケージを上書きした後、このファイルのエラーを修正することで、この問題を解決できます。
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#
2 つのパッケージを置き換え、他の内容は変更しません。
vue-cli-plugin-hbuilderx
vue-cli-plugin-uni
コンパイル結果を確認してみます。
コンパイルエラーが発生し、エラーメッセージを開くと次のように表示されます。
ここをコメントアウトします。
次に uni 統計のエラーを修正します。
正常に実行でき、このソリューションは有効です。新しいバージョンが実行できない問題はこれらの 2 つのパッケージの問題であり、uni 統計と webpack hasError の例外を追加します。