配置檢查工具

檢查工具 (Check Plugin) 是一個用於驗證外掛模組配置和狀態的元件，可協助開發者在開發過程中檢查外掛模組的設定是否正確。

Import 相依¶

import { CheckPluginComponent } from '@uofx/plugin';

使用方式¶

在 app.module.ts 中透過路由配置使用檢查工具。

將檢查工具設定為應用程式的首頁：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CheckPluginComponent } from '@uofx/plugin';

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: '', component: CheckPluginComponent, pathMatch: 'full' }
    ])
  ]
})
export class AppModule { }

主要功能¶

檢查工具會自動檢查外掛模組的各項配置，確保設定正確無誤。所有檢查都在前端執行，不會影響實際運行。

1. Manifest 檢查¶

檔案：plugin.manifest.json

Schema Version 檢查：檢查 schemaVersion 是否符合當前版本

2. Versions 檢查¶

檔案：plugin.versions.json

minimumUOFXVersion 排序檢查：檢查 minimumUOFXVersion 是否由大到小排序
版本號碼格式檢查：檢查版本號碼格式是否正確

3. Fields 檢查¶

檔案：assets/configs/fields-design.json、assets/configs/fields-runtime.json

欄位群組 code 重複檢查：檢查欄位群組的 code 是否有重複
未使用的欄位群組檢查：檢查是否有定義但未被任何欄位使用的群組
欄位群組存在性檢查：檢查欄位引用的群組是否存在
欄位 code 重複檢查：檢查欄位的 code 是否有重複
欄位 Runtime 設定檢查：檢查欄位是否有設定 Runtime (exposedModule 和 moduleName)
未使用的 Runtime 檢查：檢查是否有定義但未被任何欄位使用的 Runtime

4. Panels 檢查¶

檔案：assets/configs/panels-design.json、assets/configs/panels-runtime.json

管理者面板 code 重複檢查：檢查管理者面板的 code 是否有重複
使用者面板 code 重複檢查：檢查使用者面板的 code 是否有重複
APP 面板 code 重複檢查：檢查 APP 面板的 code 是否有重複
面板 Runtime 設定檢查：檢查面板是否有設定 Runtime (exposedModule 和 moduleName)
未使用的 Runtime 檢查：檢查是否有定義但未被任何面板使用的 Runtime

5. Pages 檢查¶

檔案：assets/configs/routes.json、remoteEntry.js、remoteEntryApp.js

Admin Routes 與 Module Federation 一致性檢查：當有設定 Admin routes 時，檢查 remoteEntry.js 是否有 expose ./PageAdmin
User Routes 與 Module Federation 一致性檢查：當有設定 User routes 時，檢查 remoteEntry.js 是否有 expose ./PageUser
App Routes 與 Module Federation 一致性檢查：當有設定 App routes 時，檢查 remoteEntryApp.js 是否有 expose ./Page
頁面 Icon 載入檢查：檢查每個頁面的 icon 是否能正確載入

截圖功能¶

點擊下載按鈕會自動產生 外掛模組設定檔-{日期}.png，可將檢查結果匯出為圖片。

開發與正式環境差異¶

檢查工具會根據建置環境顯示不同的內容。

環境模式由專案的 webpack 配置檔所設定的 production 參數控制。

開發環境配置 (`webpack.config.js`):¶

在開發模式下使用 ng serve 會顯示完整的檢查結果。

const initUofxPluginWebpack = require('@uofx/plugin/scripts/initial-webpack');

module.exports = initUofxPluginWebpack({
  production: false,
  usePort: 40002
});

正式環境配置 (`webpack.prod.config.js`):¶

在正式模式下使用 ng build --configuration production 會顯示「正常運行中」，不會顯示詳細的檢查資訊。

const initUofxPluginWebpack = require('@uofx/plugin/scripts/initial-webpack');

module.exports = initUofxPluginWebpack({
  production: true
});

修改環境模式

如需調整檢查工具的顯示行為，可以修改對應的 webpack 配置檔案中的 production 參數。

疑難排解：行為與 production 設定不一致

若在開發或正式環境中，顯示行為未符合 production 設定，請檢查 angular.json 的 webpack 設定是否正確

開發環境使用

檢查工具主要用於開發和測試環境，建議在正式環境中移除或隱藏此功能。