javascript - 如何在类中正确 require Electron BrowserWindow

Question

我对 Electron 、nodejs 和 javascript 很陌生，但我一直在稳步学习，取得了不错的结果，但我在这里遇到了一些障碍，并且没有找到类似的问题。然而，我确实找到了一个有人以相同方式使用 require 的例子，这让我相信这应该可以正常工作。

在 Electron 快速入门中，require(' Electron ')用于加载BrowserWindow类。所以现在我正在尝试做同样的事情，但是在我的类里面。我尝试将模块加载到类的变量中，然后在 CreateWindow 中使用它。这会导致“this.BrowserWindow 不是构造函数”异常。如果我从 Main.js 发送模块，它以与 Electron 快速入门中完全相同的方式加载模块，直接作为参数发送到我的 WindowManager，它确实可以工作。如果没有更好的方法，我可以做到这一点，我觉得有/应该有。

最后，我相当有信心该模块确实会以某种方式、形状或形式加载，因为尝试要求无效模块会给我一个“找不到模块”异常。

所以我的问题是，当我期望与 Electron 快速入门中相同的行为时，为什么会出现异常，以及如何正确/优雅地修复它。

我的类(class):

class WindowManager {

    constructor(CCC) {
        this.BrowserWindow = require('electron');
        this.ListManager = new (require('./ListManager.js').ListManager)(CCC);
        this.ListManager.RequestList("Root");
    }

    createWindow(BrowserWindow) {
        // Create the browser window.
        this.mainWindow = new this.BrowserWindow({
            height: 600,
            width: 800,
            webPreferences: {
                preload: 'preload.js',
                nodeIntegration: true
            }
        });

        // and load the index.html of the app.
        this.mainWindow.loadFile('index.html')

        // Open the DevTools.
        // mainWindow.webContents.openDevTools()

        // Emitted when the window is closed.
        this.mainWindow.on('closed', function () {
            // Dereference the window object, usually you would store windows
            // in an array if your app supports multi windows, this is the time
            // when you should delete the corresponding element.
            this.mainWindow = null
        })
    }
}

Electron Quick Start :

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

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

// and load the index.html of the app.
mainWindow.loadFile('index.html')

// Open the DevTools.
// mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
})
}

Answer 1

“Electron 快速入门”示例代码使用 ECMAScript 6 对象解构语法(为了简洁和方便起见)。

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

相当于:

const app = require('electron').app;
const BrowserWindow = require('electron').BrowserWindow;

因此，在 WindowManager 类的构造函数中，以下行:

this.BrowserWindow = require('electron');

应该改为:

this.BrowserWindow = require('electron').BrowserWindow;