汇总贴：深入浅出管理 uni-app 依赖的 uvm
経験共有の目標#
フォーラムを見ていると、いくつかの問題が@dcloudio/uvmに関連していることがわかります。問題は似ており、回答も似ています。ここでは、よくある問題を一度に解決できるように、まとめてみましょう。
この記事の目標は、uvm のソースコードを読み、uvm の設計思想と役割を理解し、よくある問題をまとめ、最終的には uvm のソースコードに精通し、問題を自力で解決できるようにすることです。
uvm の正式名称は「uni-app version manager」であり、nvm - node version managerと同様のものです。
背景紹介#
公式の解決策として、uvm は公式のドキュメント https://uniapp.dcloud.net.cn/quickstart-cli.html#cliversion で明示的に言及されています：
このツールは、@dcloudio/uvmを使用してコンパイラのバージョンを管理することができます。このツールは、uni-app コンパイラの主要な依存関係を自動的に追加または更新しますが、新しいコンパイルコマンド（スクリプト）には自動的に対応していません。新しいプロジェクトの設定については、手動で参照してください。
内部リンク [[uni-app 学習 #uni-app 依存関係のアップグレード uvm]]
高速なイテレーションの技術フレームワークである uni-app とその周辺エコシステムは、毎日コードを開発し、問題を修正しています。通常のフロントエンドソリューションに加えて、hbuilderX をサポートする必要があります。古いバージョンの依存関係は意味がありませんが、最新バージョンは現在のプロジェクトに明らかな意味を持ちます。
フロントエンドの依存関係を自動的にアップグレードするためのソリューションが必要です。このプロセスは、現在のバージョンや最新のバージョンが具体的に何であるかを気にする必要がない、一度にアップグレードできるようにすることが最善です。
そのために、@dcloudio/uvmが登場しました。プロジェクトディレクトリで npx @dcloudio/uvm を実行すると、package.json の関連依存関係が自動的に更新されます。
いくつかの歴史的な理由から、uvm のプロジェクトソースコードは公開されていませんが、npm の成果物は圧縮コンパイルされていないため、成果物のソースコードと開発ソースコードは同じ効果があります。ここでは、ソースコードと大まかなコード構造について簡単に説明します。
プロジェクトソースコード#
npm リポジトリにアクセスして @dcloudio/uvm をクリックします。コードセクションを見ると、最終的な成果物と元のコードにほとんど違いがないことがわかります。https://www.npmjs.com/package/@dcloudio/uvm?activeTab=code
まず、package.json を見て関連する依存関係とコマンドの登録を認識します。
package.json#
"dependencies": {
"cross-spawn": "^7.0.3",
"inquirer": "^8.2.0",
"minimist": "^1.2.5",
"node-fetch": "^2"
},
"devDependencies": {
"xmldom": "^0.6.0"
}
依存関係は比較的シンプルで、クロスプラットフォームでのコマンド実行、対話型 CLI、リクエスト送信に関連しています。関連するものは、主にbinを見ることです。
コマンドの登録は、bin/index.jsを見ることで確認できます。以下は、比較的シンプルで整然としたソースコードです。
ソースコードを読むことで、起動時に現在のargvパラメータを読み取り、デフォルトでlatestを入力するなど、現在のコマンドラインが表すプロジェクトのアドレスを読み取ることがわかります。
フロー#
スクリーンショットの 30 行目で start() が実行され、順番に info() find() get() そして merge() が実行されます。
info()#
info() メソッドでは、現在のディレクトリの package.json を読み取り、devDependencies に以下の依存関係が含まれているかどうかを分析します：
const plugins = {
vue2: '@dcloudio/vue-cli-plugin-uni',
vue3: '@dcloudio/vite-plugin-uni'
}
最終的には、対応する依存関係と vue3 の有無を返します。これは、vue2 と vue3 のアップグレードする依存関係が異なることを意味します。興味がある場合は、コメントセクションで教えてください。
find()#
find メソッドは /@dcloudio/uvm/lib/version.js#find に位置しています。
find メソッドでは、現在のプラグイン、具体的なバージョンの特徴または "latest"、および vue3 の有無を判断します。
実際の処理では、現在のバージョンの最後のセクションの数字を取得して、リモートからデータを取得します。latest alpha release の 3 つの値しかありません。リモートのバージョン値を取得します。例えば、3.96.2023110403 です。ここでスクリーンショットを見てみましょう：
関連する履歴判断に進みます。
その後、'https://registry.npmmirror.com/@dcloudio/vite-plugin-uni' をリクエストし、さまざまな特徴値を判断します。
ここでは、リモートデータをリクエストして、hbuilderX のバージョン情報とレジストリ情報を取得します。ここでは、ネットワークに要件があります。
ここでのレジストリはデフォルトで cnpm です。これは cnpm の安定性に依存しており、ネットワークの波動リスクがありますが、少なくとも国内のユーザーはアクセスできることが保証されます。
get()#
get() も引き続き判断されます。ここでは vue3 を例に取り上げますが、最終的には https://gitee.com/dcloud/uni-preset-vue/blob/vite/package.json の情報を取得します。つまり、リモートリポジトリを基準に処理を行います。
過去のバージョンの変更に対応するため、このロジックはほとんど読めません。多くのバージョンの互換性があります。uvm の問題を ask コミュニティで調べると、いくつかの互換性のある歴史が見られます。
ここでは、vue3 の場合は getVue3() に入ります。ここでは、gitee のリモートリポジトリ情報をデフォルトで読み取ります。何らかの理由で、github と gitee のリポジトリが正しく同期されていない場合、情報が一致しなくなる可能性があります。
merge()#
このステップは最後の実行ステップです。依存関係を取得して具体的な処理を準備します。spawnAsync を使用して依存関係と開発者の依存関係をそれぞれ更新します。
この部分では、異なるシステムでのコマンド実行の問題を回避するために cross-spawn を使用しています。
技術的なまとめ#
上記の簡単なコアロジックの説明を読むことで、uvmの実行の本質的なアプローチは、異なるシステムでのコマンド実行、現在のバージョン情報の取得、およびリモートの gitee 上の典型的なリポジトリの package.json を取得し、複雑な判断を行い、アップグレードする結果を得ることです。
よくある質問と回答#
実行時に「Not find version xxx」というエラーメッセージが表示されます。具体的なバージョン番号を提供してください。
この問題は現在は存在しませんが、一部の古いバージョンには問題があるかもしれません。問題が発生した場合は、現在のバージョン番号を提供してください。
実行時に「code ETARGET」というエラーメッセージが表示されます。
キャッシュやネットワークの問題かもしれません。キャッシュと現在の node_modules を削除し、依存関係を再インストールしてみてください。
また、ネットワーク同期の問題かもしれません。リリース後に国内に同期するには時間がかかる場合がありますので、少し休んでから再試行してみてください。