node.js - 如何将主代码与index.js Electron 分开？

Question

是否可以保持这个项目结构并使它正常工作？

我想要实现的目标(基本 Electron 结构，但主要代码保留在另一个文件夹中):
Package.json的“开始”:“...”加载到index.js中
index.js加载到MainCode文件夹中的index.html
(请忽略index.py)
这是index.js的开始代码

const { app, BrowserWindow } = require("electron");
function createWindow() {
    // Create the browser window.
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    // and load the index.html of the app.
    const path = require ("path");
    win.loadFile (path.join (__dirname, "MainCode", "index.html"));
}
app.on("ready", createWindow);

这不是以前的代码，而是答案之一建议的更新代码。
这是package.json的

{
  "name": "filler",
  "version": "1.0.0",
  "description": "This is to distract you",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.2.2",
    "jquery": "^3.5.1"
  }
}

编辑:我尝试按照注释之一的建议进行操作，但出现此错误:

filler@1.0.0 start /home/avinav/Documents/PYTHON/helpingTEACHERS!/Filler electron .

sh:1: Electron :找不到
npm ERR!代码ELIFECYCLE
npm ERR! syscall产生
npm ERR!文件sh
npm ERR! errno ENOENT
npm ERR! Filler@1.0.0开始:electron .npm ERR!产生ENOENT
npm ERR!
npm ERR!在filler@1.0.0启动脚本处失败。
npm ERR! npm可能不是问题。上面可能还有其他日志记录输出。
npm ERR!可以在以下位置找到此运行的完整日志:
npm ERR!/home/avinav/.npm/_logs/2021-02-04T14_07_18_026Z-debug.log
我认为这与package.json有关，但我不知道到底发生了什么

Answer 1

要将index.html文件从MainCode文件夹加载到您要实例化的BrowserWindow中，可以通过替换

win.loadFile ("index.html");

和

win.loadFile ("MainCode/index.html");

但是，使用以下代码更可移植:

const path = require ("path");
win.loadFile (path.join (__dirname, "MainCode", "index.html"));

这将基于当前目录创建一个适合您的OS的文件系统路径(__dirname存储指向当前执行的脚本位于Node.js下的目录的路径)。