electron 尝试从文件导入变量，但控制台显示的文件不存在

当我试图将一个变量从一个JavaScript文件导入到另一个JavaScript文件中时，我的控制台返回一个错误，该文件不存在。下面是导致问题的文件，我的控制台日志，以及我想要导入变量的文件。

按钮.js

var MONEY = 0;

const element = document.getElementById("moneyButton");

element.addEventListener("click", function moneyHandle() {
    MONEY++
    document.getElementById("moneycount").innerHTML = `You have: ` + MONEY + `$`;
});

module.exports = { MONEY };

Clicker.js

const { MONEY } = require('../misc/button')

const element = document.getElementById("clicker")

if (MONEY === 15) {
    console.log('User has enetered stage.')
    element.style.opacity = "1";
}

控制台日志Console Log

从代码的外观来看，所有的逻辑都在Electron渲染端进行。
虽然这不是一个问题，但它确实引入了一些问题，例如如何定期检查何时MONEY === 15。要做到这一点，您需要使用一个函数，如setInterval，这将减慢这个特定的渲染过程。
作为替代方案，通过使用Inter-Process Communication在主进程中保持MONEY的计数将是推荐的方法。
也就是说，由于您的问题是基于渲染端import和export功能的，因此我们将仅停留在渲染线程中，而不会向您介绍IPC。

module.exports和require的使用是CommonJS语法，由NodeJS（服务器端）使用。
使用import和export是ECMAScript（ES模块）语法，用于浏览器端Javascript。

由于您的Javascript是渲染进程（浏览器端）Javascript，因此必须使用import和export语句。
有关MDN Web Docs网站的其他说明：

导入

静态import声明用于导入另一个模块的exported只读活动绑定。导入的绑定被称为 * 活动绑定 *，因为它们由导出绑定的模块更新，但不能由导入模块重新分配。
为了在源文件中使用import声明，运行时必须将该文件解释为module。在HTML中，这是通过将type="module"添加到<script>标记来完成的。模块在strict mode中自动解释。

导出

export声明用于从JavaScript模块中导出值。导出的值然后可以通过import声明或dynamic import导入到其他程序中。导入的绑定的值可能会在导出它的模块中更改-当模块更新它导出的绑定的值时，更新将在其导入的值中可见。
为了在源文件中使用export声明，该文件必须由运行时解释为module。在HTML中，这是通过将type="module"添加到<script>标记或由另一个模块导入来完成的。模块在strict mode中自动解释。

**注意：**下面的最小可重复示例没有考虑您当前的目录结构。为了简单起见，我使用平面目录结构编写了下面的代码，因为文件夹层次结构不会导致您当前的问题。

index.html（渲染过程）
要使当前代码正常工作，我们需要将以下代码行添加到index.html文件中。

<script type="module" src="button.js"></script>
<script type="module" src="clicker.js"></script>

这允许Javascript运行时将这些文件解释为modules。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Electron Test</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
    </head>

    <body>
        <input type="button" id="moneyButton" value="Show me the money">

        <p id="moneyCount">&nbsp;</p>

        <hr>

        <div id="clicker" style="border: 1px solid #000; padding: 1em; opacity: 0;">Clicker</div>
    </body>

    <script type="module" src="button.js"></script>
    <script type="module" src="clicker.js"></script>
</html>

button.js（渲染过程）
接下来，我们需要将module.exports = { MONEY };更改为export {MONEY};

let money = 0;

document.getElementById("moneyButton").addEventListener("click", () => {
    money++;
    document.getElementById("moneyCount").innerHTML = 'You have: $' + money;
});

export {money};

clicker.js（渲染过程）
最后，为了导入动态绑定MONEY，让我们将const { MONEY } = require('button')更改为import {money} from './button.js';。

import {money} from './button.js';

// setInterval used to regularly check for changes in the live binding variable 'money'
setInterval(() => {
    if (money >= 15) {
        console.log('User has entered stage.')
        document.getElementById("clicker").style.opacity = "1";
    }
}, 250); // Check every 250ms

electron 尝试从文件导入变量，但控制台显示的文件不存在

1条答案

导入

导出

相关问题

热门标签

最新问答