升级 Electron
当您首次在 Quasar 项目中添加 Electron 模式时,您将获得最新版本的 Electron 包。在某个时间点,您将想要升级 Electron 版本。
在升级 Electron 之前,请查看其发行说明。是否有重大更改?
# from the root of your Quasar project
$ yarn upgrade electron@latest
从 Quasar v1 升级
Quasar v2 的 Electron 模式是对先前版本的几乎完全改造,显着改善了开发人员体验。此处的一些更改是必要的,以确保与 Electron 世界中的最新发展兼容(因此为即将到来的上游更改提供防弹功能)。
改进的总体概述
- 开箱即用的 Typescript 支持。只需将 electron-main.js 和 electron-preload.js 重命名为 electron-main.ts 和 electron-preload.ts。
- 支持 Electron 11 并为 Electron 12+ 中的即将到来的更改准备开箱即用的支持(无需您将来更改任何内容)。其中一项更改是我们将使用
contextIsolation
而不是已弃用的Node Integration
。 - 预加载脚本不再有旧的限制。您可以使用相对路径导入其他 js 文件,因为脚本现在已捆绑并通过 Babel 传递(因此您也可以使用
import X from Y
语法)。您还可以为其启用 linting。 - 您还可以为主线程和预加载脚本启用 linting。
- 我们已删除默认的 electron-main.dev.js 支持,因为它似乎不再需要。但是,您可以通过创建它并从 electron-main 中引用它来添加它回来(它不再被 Quasar CLI 自动检测到 - 因为我们不需要;稍后将详细介绍)。
/src-electron 文件夹
旧结构是
新结构是
请注意,不再有electron-main.dev.js
文件(不再需要),并且electron-preload/main.js
文件需要直接移动到/src-electron
下。
electron-main.js 文件
为了与 Electron 的未来版本向前兼容,您需要做一些小(但很重要!)更改
mainWindow = new BrowserWindow({
// ...
webPreferences: {
nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,
nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION,
// preload: path.resolve(__dirname, 'electron-preload.js')
}
})
mainWindow = new BrowserWindow({
// ...
webPreferences: {
// we enable contextIsolation (Electron 12+ has it enabled by default anyway)
contextIsolation: true,
// we use a new way to reference the preload script
// (it's going to be needed, so add it and create the file if it's not there already)
preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
}
})
electron-preload.js 文件
如果您还没有此文件,则需要此文件。因此,如果它丢失,请创建它。没有它,您将无法在渲染器线程中使用 Node.js 的功能。
更多信息:预加载脚本。
警告
您需要将所有 Node.js 内容从渲染器线程(/src 中的 UI 代码)转移到预加载脚本中。通过contextBridge
提供相同的功能,如下所示。
这是electron-preload.js
的默认内容
/**
* This file is used specifically for security reasons.
* Here you can access Nodejs stuff and inject functionality into
* the renderer thread (accessible there through the "window" object)
*
* WARNING!
* If you import anything from node_modules, then make sure that the package is specified
* in package.json > "dependencies" and NOT in "devDependencies"
*
* Example (injects window.myAPI.doAThing() into renderer thread):
*
* const { contextBridge } = require('electron')
*
* contextBridge.exposeInMainWorld('myAPI', {
* doAThing: () => {}
* })
*/
quasar.config 文件更改
electron: {
// it's gone now (upcoming upstream breaking change)
// replaced by a change in electron-main.js documented earlier
nodeIntegration: true, // remove me!
// remove:
chainWebpack (chain) { /* ... */ },
// remove:
extendWebpack (cfg) { /* ... */ }
}
electron: {
// New!
inspectPort: 5858,
// New!
extendElectronMainConf (cfg) {
// do something with Esbuild config
// for the Electron Main thread
},
// New!
extendElectronPreloadConf (cfg) {
// do something with Esbuild config
// for the Electron Preload thread
}
}
渲染器线程 (/src)
$q 对象不再包含electron
属性。您需要使用预加载脚本来访问它并将其提供给渲染器线程。
此外,openURL工具不再能够利用 Electron 来打开新窗口。您需要从预加载脚本中提供自己的工具。
警告
您需要将所有 Node.js 内容从渲染器线程(/src 中的 UI 代码)转移到预加载脚本中。通过contextBridge
提供相同的功能,如上面的预加载脚本部分所示。
浏览器开发者工具
您可能还想在 electron-main.js 中添加以下代码,以便在开发模式下(或启用了调试的生产模式下)自动打开开发者工具,并在生产构建中禁用开发者工具(未启用调试)。
function createWindow () {
mainWindow = new BrowserWindow({ /* ... */ })
if (process.env.DEBUGGING) {
// if on DEV or Production with debug enabled
mainWindow.webContents.openDevTools()
}
else {
// we're on production; no access to devtools pls
mainWindow.webContents.on('devtools-opened', () => {
mainWindow.webContents.closeDevTools()
})
}
}