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 編譯的一些配置，還得繼續看