首先进入到 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 的一个迭代,这个循环的回调两个参数 一个 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 的第三个参数就是运行命令要执行的回调函数
回调里执行了 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 实例的两个方法,相当于调用了
Service resolveChainableWebpackConfig 和 resolveWebpackConfig 两个方法
这个目录下 @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 这个目录下的对应 hbuilder 下的运行命令,里边配置了 uni 编译的,和 ts 编译的一些配置,还得继续看