运行“First Electron App”不会显示版本？答案

【问题标题】：Running the "First Electron App" wont show versions?运行“First Electron App”不会显示版本？
【发布时间】：2019-10-31 02:55:56
【问题描述】：

我关注Electron quick start guide，它可以正常工作，但输出与文档中描述的不同，document.write 的版本不会显示在输出中。

这是我的输出：

Hello World!

We are using node , Chrome , and Electron .

我的预期输出将包括相应的版本号。

我检查了应用程序的 GitHub 页面，还是一样，尝试了各种 StackOverflow 答案，但没有一个对我有用。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node) </script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron) </script>.
</body>
</html>

package.json

{
    "name": "electronapp",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
       "start": "electron ."
    },
    "author": "harsh",
    "license": "ISC",
    "devDependencies": {
        "electron": "^5.0.2"
    }
}

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow

function createWindow () {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('index.html')
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin')
        app.quit()
})

app.on('activate', function () {
    if (mainWindow === null)
        createWindow()
})

我已经全局安装了 Node，Chrome 是用 Electron 打包的，对吧？

【问题讨论】：

你安装依赖了吗？
检查我的编辑，我不确定我是否回答了你的问题。
如果可以的话，请添加您的main.js 和一些输出截图。
我已按照您的要求添加了 main.js 文件和屏幕截图链接。

标签： node.js electron

【解决方案1】：

如果您激活开发者工具，您应该会在控制台中看到如下错误消息：

Uncaught ReferenceError: process is not defined
    at index.html:11

你需要激活nodeIntegration和关闭BrowserWindow中的contextIsolation，这样运行在BrowserWindow中的进程（“渲染器进程”）才可以访问Node的process对象。

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
})

（在Electron 12之前，只需要nodeIntegration键，contextIsolation的默认值为false。）

【讨论】：

非常感谢！我刚刚开始使用电子，无法解决这个问题，我该如何激活开发者工具？
如果你有默认的应用程序菜单，你可以在那里做。或代码：mainWindow.toggleDevTools().
那么未捕获的参考错误，如果没有您的答案编辑就会出现？
没有。很抱歉造成混乱。错误来自您的原始代码（当 nodeIntegration 未启用时）。我将其包含在答案中以指示如何捕获类似问题。我将这部分上移以使顺序更合乎逻辑。

【解决方案2】：

这是您修改后的文件

const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow
function createWindow () {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // I think you don't need this line
            // preload: path.join(__dirname, 'preload.js') 
            nodeIntegration: true
        }
    })
    mainWindow.loadFile('index.html')
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
    if (mainWindow === null) createWindow()
})

【讨论】：

这解决了问题，但我已经接受了上述用户的回答。正如您所指出的，那条线到底是做什么的？反正我没有这样的文件。它是否为应用程序进行了一些预加载，我可以使用它为应用程序做任何有用的事情吗？
引用官方文档preload String (optional) - Specifies a script that will be loaded before other scripts run in the page. This script will always have access to node APIs no matter whether node integration is turned on or off. The value should be the absolute file path to the script. When node integration is turned off, the preload script can reintroduce Node global symbols back to the global scope.

【解决方案3】：

经过大量搜索，我发现了这个：

mainWindow = new BrowserWindow({
      webPreferences: {
          nodeIntegration: true,
          contextIsolation: false
     }
});

请注意，在 2021 年 2 月发布的 Electron 12 之前，contextIsolation 默认为 false。

【讨论】：

我已经对您的代码进行了一些格式化，并添加了为什么这个答案需要更新。如果您不同意，请还原任何更改。
这是最新的答案。

【解决方案4】：

你最喜欢这样改变你的代码

const { app, BrowserWindow, process } = require('electron')

【讨论】：

我试过了，但无法重现这种方法有效或有帮助的情况。此行将使process 未定义。