最初に、hbuilderx 4.07 バージョンの uniapp コンパイルファイルに入ります。コンパイルされたページを見つけます。ローカルのパスは次のとおりです。
C:\HBuilderX.4.07.2024032720\HBuilderX\plugins\uniapp-cli
このファイルで service.run run コマンドを実行しました。
プリントアウトで、service.run uni-build を実行したことがわかります。
service はこのファイル内の uniapp-cli\node_modules@vue\cli-service\lib\Service.js にあります。
最初はこのコマンドを実行していませんでしたが、run コマンドを実行すると webpack が uni-build をパッケージ化して実行します。
run 内で this.init (mode) を実行し、uni-build コマンドを登録します。
this.init の最後の行では、fn は require () です。
const { fn } = command
this.plugins.forEach(({ id, apply }) => {
if (this.pluginsToSkip.has(id)) return
apply(new PluginAPI(id, this), this.projectOptions)
})
init 内で this.plugins を反復処理し、このループのコールバックには 2 つのパラメータ、id と apply があります。
id は pkgjson のパッケージ名、依存関係です。
apply は次のように生成されます。
Service の constructor 内で、this.plugins = this.resolvePlugins (plugins, useBuiltIn) を実行します。
resolvePlugins 内には次のようなものがあります。
const idToPlugin = id => ({
id: id.replace(/^.\//, 'built-in:'),
apply: require(id)
})
したがって、apply は require('依存関係名') を実行します。
つまり、あるパッケージの main がエクスポートするものです。
最後に、uni-build は node_modules@dcloudio\vue-cli-plugin-uni パッケージの中のコマンドです。
このフォルダの node_modules@dcloudio\vue-cli-plugin-uni\commands\build.js にあります。
api.registerCommand('uni-build', {
ここでコマンドを登録します。
registerCommand の第 3 引数は、コマンドを実行するためのコールバック関数です。
コールバック内で build を実行します。
そして、コールバック内でまず webpack の設定を取得します。
const webpackConfigs = getWebpackConfigs(api, args, options)
その内部でさらに具体的な webpack の設定を取得するためにこれを実行します。
getWebpackConfig
このファイルでは app の設定を取得します。
node_modules@vue\cli-service\lib\commands\build\resolveAppConfig.js
ここで webpack の設定が生成されます。
api.resolveChainableWebpackConfig()
api.resolveWebpackConfig(config)
これらはそれぞれ、引数の api インスタンスの 2 つのメソッドを呼び出すことに相当します。
Service の resolveChainableWebpackConfig と resolveWebpackConfig の 2 つのメソッドを呼び出すことに相当します。
このディレクトリの @dcloudio/vue-cli-plugin-uni/lib/env.js では、ファイルサイズが 500KB を超える場合、圧縮や ES6 から ES5 への変換をスキップし、モバイルデバイスのパフォーマンスに影響を与える大きな js ライブラリを使用しないようにしています。
this.plugins = this.resolvePlugins (plugins, useBuiltIn) は、コマンドを解析するために行われます。
resolvePlugins 関数は、uniapp-cli\package.json のすべての依存関係を解析します。
this.pkg.dependencies には値があります。
以下のコードでは、else を実行しています。
if (
this.pkg.optionalDependencies &&
id in this.pkg.optionalDependencies
) {
console.warn(id);
let apply = () => { }
try {
apply = require(id)
} catch (e) {
warn(`Optional dependency ${id} is not installed.`)
}
return { id, apply }
} else {
console.error(id);
return idToPlugin(id)
}
13:54:25.768 @dcloudio/vue-cli-plugin-hbuilderx
13:54:26.123 @dcloudio/vue-cli-plugin-uni
13:54:26.248 @dcloudio/vue-cli-plugin-uni-optimize
13:54:26.252 @vue/cli-plugin-babel
このパッケージ @dcloudio/vue-cli-plugin-hbuilderx を見つけました。
init の
this.plugins.forEach(({ id, apply }) => {
if (this.pluginsToSkip.has(id)) return
apply(new PluginAPI(id, this), this.projectOptions)
})
で uni-build コマンドが登録されます。
apply = require(id) は、apply はカスタム関数で、対応するパッケージ名を直接参照しています。
apply(new PluginAPI(id, this), this.projectOptions)
apply 関数が呼び出されるとき、new PluginAPI(id, this) で this が渡され、直接オブジェクト参照が変更され、内部で registerCommand が呼び出され、this.commands に値が設定され、Service の uni-build コマンドが登録されます。
main.js をコンパイルする node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader
新たに発見したのは、@dcloudio/vue-cli-plugin-hbuilderx/index.js このディレクトリには、uni コンパイルと ts コンパイルの設定が含まれていることです。引き続き確認する必要があります。