banner
飞天御剑流

飞天御剑流

前端,jAVAsCRIPT
github

uniapp老ts项目运行在新版本hbuilderx上

首先进入到 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 编译的一些配置,还得继续看

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.