我们将使用 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 选项。
如果您想修改“渲染器”线程(UI 在 /src 中)的 Vite 配置
module.exports = function (ctx) {
return {
build: {
extendViteConf (viteConf) {
if (ctx.mode.electron) {
// do something with ViteConf
}
}
}
}
}
Packager 与 Builder
您必须选择使用 packager 或 builder。它们都是优秀的开源项目,但它们满足的需求略有不同。使用 packager,您可以从一台机器(受限制)为所有主要平台构建未签名的项目。虽然这很棒,但如果您只需要快速完成一些操作,builder 提供了更多的平台粒度(和整体改进)。使用 builder 从一台计算机交叉编译二进制文件实际上不起作用(或者我们还没有找到方法……)
依赖项优化
默认情况下,根 package.json
文件中的所有 dependencies
都将被安装并嵌入到生产可执行文件中。
这意味着它还将包含您仅 UI 的依赖项,这些依赖项已捆绑在 UI 文件中(因此它会重复它们)。从我们的 CLI 角度来看,我们没有任何通用方法来判断依赖项是否仅用于 UI 或者是否由主/预加载脚本使用,因此我们无法可靠地自动删除它们。
但是,您可以通过使用 quasar.conf > electron > extendPackageJson(pkg) 并覆盖或修改 package.json
文件中的 dependencies
键来实现这一点。如果您只保留主线程和预加载线程的依赖项,那么这将导致更小的生产可执行文件。