alert(__dirname) 在 electron 应用程序中未生成任何 output

Question

运行以下 electron 应用程序即包含密码为 output 的警报框时，我没有得到所需的 output。 但是， index.html 中的注释行似乎工作正常。 chromium window 的开发者控制台显示“未捕获的 ReferenceError: __dirname is not defined at HTMLButtonElement.<anonymous>”。 此片段逐字逐句（注释行除外）摘自 Steve Kinney 2019 版的“Electron in action”一书。

有什么建议么？

package.json如下

{
  "name": "bookmarker",
  "version": "1.0.0",
  "description": "electron app",
  "main": "./app/main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Wasim Aftab",
  "license": "ISC",
  "dependencies": {
    "electron": "^9.0.0"
  }
}

main.js 如下

const {app, BrowserWindow} = require('electron');
let mainWindow = null;
app.on ('ready', () => {
    console.log('Hello, from electron');
    mainWindow = new BrowserWindow();
    mainWindow.webContents.loadFile(__dirname + '/index.html');
});

index.html如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline';
connect-src *">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Bookmarker</title>
</head>

<body>
    <h1>Hello from Electron</h1>
    <p>
        <button class="alert">Current Directory</button>
    </p>
</body>
<script>
    const button = document.querySelector('.alert');
    button.addEventListener('click', () => {
        alert(__dirname);
        // alert(window.location.pathname.replace(/[^\\\/]*$/, ''));
    });
</script>

</html>

Answer 1

__dirname是 nodejs 的概念，浏览器中不存在。

解决此问题的一种方法是将nodeIntegration设置为true ：

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

另一种方法是使用预加载脚本（始终为预加载脚本启用 nodeIntegration）：

mainWindow = new BrowserWindow({
    webPreferences: {
        preload: (__dirname + "/preload.js")
    }
});

然后在preload.js文件中：

window.__dirname = __dirname

Answer 2

对于 electron v16.0.4，还需要添加contextIsolation: false

$ npx electron --version
v16.0.4

    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      // enableRemoteModule: true,
    },
  });

alert(__dirname) 在 electron 应用程序中未生成任何 output

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-05-27 17:07:17

解决方案2
0 2021-12-13 09:45:14

alert(__dirname) 在 electron 应用程序中未生成任何 output

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-05-27 17:07:17

解决方案2 0 2021-12-13 09:45:14

解决方案1
2 已采纳 2020-05-27 17:07:17

解决方案2
0 2021-12-13 09:45:14