最初に、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)
これら 2 つは、引数の api インスタンスの 2 つのメソッドを呼び出すことに相当します。
つまり、Service の resolveChainableWebpackConfig と resolveWebpackConfig の 2 つのメソッドを呼び出すことになります。
このディレクトリの @dcloudio/vue-cli-plugin-uni/lib/env.js では、ファイルサイズが 500KB を超える場合、圧縮や ES6 から ES5 への変換の処理はスキップされ、パフォーマンスに影響を与える可能性があるため、モバイルデバイスでは使用されません。
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 このディレクトリには、hbuilder の実行コマンドがあり、uni コンパイルと ts コンパイルのいくつかの設定があります。引き続き確認する必要があります。