无法在 Electron.js 中使用导出和导入答案

【问题标题】：Cannot use exports and imports in Electron.js无法在 Electron.js 中使用导出和导入
【发布时间】：2021-11-12 09:12:28
【问题描述】：

这是我的主要 (index.js) 文件：

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

var mainWindow = null

app.on("ready", () => {
    mainWindow = new BrowserWindow({
        "width": 500,
        "height": 500,
        "webPreferences": {
            "nodeIntegration": true,
            "contextIsolation": false
        }
    })

    mainWindow.loadFile("src/html/welcome.html")
})

现在，我不能使用导入/导出。

每当我在上述代码下方添加导出语句时，都会出现错误提示 Uncaught TypeError: Cannot read properties of undefined (reading 'on')

如果我删除导出/导入行，它可以正常工作，正如预期的那样

(index.js)

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

var mainWindow = null

app.on("ready", () => {
    mainWindow = new BrowserWindow({
        "width": 500,
        "height": 500,
        "webPreferences": {
            "nodeIntegration": true,
            "contextIsolation": false
        }
    })

    mainWindow.loadFile("src/html/welcome.html")
})

module.exports.updateFunction = (_name) => {
    console.log(_name)
}

另一个.js

const { updateFunction } = require("../../index");

updateFunction("Hellow")

【问题讨论】：

当您执行什么操作时，您会在哪一行出现错误？不确定我是否关注您的问题
我已经提到过。每当我添加一个导出语句并在另一个中使用导入时，电子都会给出该错误（提到）。虽然我可以看到我的页面实际上是呈现的，但是当我在控制台中仅注销了一个示例文本时，我并没有按预期工作。
我最近遇到了同样的错误并停止了我的项目:(
听到这个消息很难过。希望你也能得到解决方案。
啊，我明白了。我认为您的问题可能是您正在从 index.js 导出。如果不知道你的文件结构，我不能肯定地说，但是当 index.js 是你的入口点时，它是一个循环依赖。

标签： javascript electron

【解决方案1】：

我认为这里发生的事情是您正在为自己创建一个循环依赖项。当您在加载模块时尝试遵循模块加载器所采用（或试图采用）的路径时，它可能会有所帮助：

Electron 加载您的入口点index.js
- 您的入口点会加载您使用的所有子模块
  - 子模块another.js 加载你的入口点模块index.js

此时index.js 尚未完全加载，因为它的所有依赖项都必须先加载。循环依赖使模块加载器处于未定义状态，这取决于它的实现可能导致各种错误。通常是这样的

some.stuff is not a function
Cannot read property `XXX` of undefined
`XXX` does not exist
undefined index `#` of `XXX`

有一些方法可以绕过这些错误，但最简单的方法是避免循环依赖。在您的情况下，创建一个您的 another.js 和您的 index.js 都可以从中导入的模块可能是最简单的：

// someModule.js
const { app, BrowserWindow } = require("electron")

let mainWindow = null

app.on("ready", () => {
    mainWindow = new BrowserWindow({
        "width": 500,
        "height": 500,
        "webPreferences": {
            "nodeIntegration": true,
            "contextIsolation": false
        }
    })

    mainWindow.loadFile("src/html/welcome.html")
})

// you can export mainWindow if you need it
module.exports.mainWindow = mainWindow;

module.exports.updateFunction = (_name) => {
    console.log(_name)
}

// index.js
const { mainWindow } = require('someModule');

// another.js
const { updateFunction } = require("../../someModule");

updateFunction("Hellow")

我还建议使用 Es6-style 导入和导出，因为它们更容易理解，但这是另一回事。

【讨论】：