我們將使用 Quasar CLI 開發和建置 Electron 應用程式。建置 SPA、PWA、行動應用程式或 Electron 應用程式之間的差異,僅由 "quasar dev" 和 "quasar build" 命令中的 "mode" 參數決定。
但首先,讓我們學習如何設定 Electron 建置。
quasar.config 檔案
您可能會注意到 /quasar.config
檔案包含一個名為 electron
的屬性。
// should you wish to change default files
// (notice no extension, so it resolves to both .js and .ts)
sourceFiles: {
electronMain: 'src-electron/electron-main',
electronPreload: 'src-electron/electron-preload'
},
// electron configuration
electron: {
// specify the debugging port to use for the Electron app when running in development mode
inspectPort: 5858,
bundler: 'packager', // or 'builder'
// @electron/packager options
// https://electron.github.io/packager/main/
packager: {
//...
},
// electron-builder options
// https://www.electron.build/configuration/configuration
builder: {
//...
},
// Specify additional parameters when yarn/npm installing
// the UnPackaged folder, right before bundling with either
// electron packager or electron builder;
// Example: [ 'install', '--production', '--ignore-optional', '--some-other-param' ]
unPackagedInstallParams: [],
// optional; add/remove/change properties
// of production generated package.json
extendPackageJson (pkg) {
// directly change props of pkg;
// no need to return anything
},
extendElectronMainConf (cfg) {
// do something with Esbuild config
// for the Electron Main thread
},
extendElectronPreloadConf (cfg) {
// do something with Esbuild config
// for the Electron Preload thread
}
}
“packager” 屬性是指 @electron/packager 選項。`dir` 和 `out` 屬性會被 Quasar CLI 覆寫,以確保最佳結果。
“builder” 屬性是指 electron-builder 選項。
如果您想修改 “Renderer” 執行緒(/src 中的 UI)Vite 設定
module.exports = function (ctx) {
return {
build: {
extendViteConf (viteConf) {
if (ctx.mode.electron) {
// do something with ViteConf
}
}
}
}
}
Packager vs. Builder
您必須選擇使用 packager 或 builder。它們都是優秀的開源專案,但它們服務於略有不同的需求。使用 packager,您將能夠從一台機器(有限制)為所有主要平台建置未簽名的專案。雖然這很棒,但如果您只是想要一些快速且不完善的東西,builder 中有更多的平台細緻度(和一般的潤飾)。從一台電腦交叉編譯您的二進制檔案在 builder 中並不能真正運作(或者我們還沒有找到方法......)
依賴項最佳化
預設情況下,您根目錄 package.json
檔案中的所有 dependencies
都會被安裝並嵌入到生產可執行檔中。
這表示它也會包含您僅限 UI 的依賴項,這些依賴項已經捆綁在 UI 檔案中(因此它會複製它們)。從我們的 CLI 角度來看,我們沒有任何通用方法可以判斷依賴項是否僅限於 UI,或者它是否被 main/preload 腳本使用,因此我們無法可靠地自動移除它們。
但是,您可以透過使用 quasar.conf > electron > extendPackageJson(pkg) 並覆寫或篡改您 package.json
檔案中的 dependencies
鍵來執行此操作。如果您僅保留 main 和 preload 執行緒依賴項,那麼這將導致較小的生產可執行檔案。