Javascript未捕获的异常参考错误（在电子中）

Question

此评论已得到解决 TL; DR我的主要代码需要拆分成一个单独的文件，而不是与main.js中的电子功能一起运行

首先，我将介绍我的操作方式。

我正在Windows机器上使用Electron和Javascript构建一个应用程序，并通过以下方式进行组装：

npm install electron-builder --save-dev
npm run dist

在开发人员工具中启动后，我看到：

Uncaught TypeError: Cannot read property 'on' of undefined
    at main.js:35
Uncaught SyntaxError: Identifier 'electron' has already been declared
    at store.js:1

当尝试使用保存按钮时，我得到： 未捕获的ReferenceError：未定义storeFunctions

at saveButtonClick (main.js:85)
at HTMLButtonElement.onclick (index.html:146)

我对Electron还是很陌生，而Java和我在尝试不同方法的过程中一直为此绞尽脑汁。来这里寻求帮助。

这是main.js的代码：

/*
Needs to be implemented:
Run at startup
Links
Notifications
*/

// AgentSync JS
const electron = require('electron');
// Module to control application life
const app = electron.app;
// Module to create native browser window
const BrowserWindow = electron.BrowserWindow;
// Module to store user-variables
const StoreClass = require('./store.js');

// Global reference for window
let mainWindow

function createWindow() {
    // Creating browser window
    mainWindow = new BrowserWindow({ width: 700, height: 500, webPreferences: {nodeIntegration: true}}),

    // Loading index
    mainWindow.loadURL(`file://${__dirname}/index.html`)

    // Dev tools, remove post development
    mainWindow.webContents.openDevTools()

    mainWindow.on('closed', function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

// Quit when window is closed
app.on('window-all-closed', function () {
    // If OS X require force quit
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    // If window was closed recreate
    if (mainWindow === null) {
        createWindow()
    }
})

// Instantiating Store class
const storeFunctions = new StoreClass({
    // Create user preference file
    configName: 'user-preferences',
    defaults: {
        // STORE VALUES FROM SETTINGS HERE
        userVariables: { ext : "", vmpass: "", serv: "", crm1: "", crm2: "", crm3: "", startup: "", notif: "" }
    }
});

function crmClick(urlNum, crmOpt) {
    switch(crmOpt) {
        case "fut":
            document.getElementById(urlNum).value="https://app.thefollowuptool.com/lightspeed-connect;incoming=";
          break;
        case "eagent":
            document.getElementById(urlNum).value="https://eagent.allstate.com/account/login.aspx?phone=";
          break;
        case "qq":
            document.getElementById(urlNum).value="https://app.qqcatalyst.com/Contacts/Customer/Details/";
          break;
        case "sf":
            document.getElementById(urlNum).value="";
          break;
        case "ams":
            document.getElementById(urlNum).value="";
          break;
        default:
            document.getElementById(urlNum).value="";
      }
}

function saveButtonClick(ext, vmpass, serv, crm1, crm2, crm3, startup, notif) {
    storeFunctions.set('userVariables', {ext, vmpass, serv, crm1, crm2, crm3, startup, notif})
    var x = document.getElementById("toast");
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

function getUserVariables(elementId){
    switch(elementId){
        case "extension":
            document.getElementById(elementId).value=userVariables.ext;
            //Try toasting these to see the values.
        break;
        case "vmpassword":
            document.getElementById(elementId).value=userVariables.vmpass;
        break;
        case "server":
            document.getElementById(elementId).value=userVariables.serv;
        break;
        case "url1":
            document.getElementById(elementId).value=userVariables.crm1;
        break;
        case "url2":
            document.getElementById(elementId).value=userVariables.crm2;
        break;
        case "url3":
            document.getElementById(elementId).value=userVariables.crm3;
        break;
        case "runatstartup":
            document.getElementById(elementId).value=userVariables.startup;
        break;
        case "notifications":
            document.getElementById(elementId).value=userVariables.notif;
        break;
    }

}

---

这是index.html的一些代码

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>AgentSync</title>
    <link rel="stylesheet" href="styles/styles.css" type="text/css">
</head>
<body>
    <script src="main.js"></script>
    <script src="store.js"></script>

<div style="float:left;margin-right:5px;margin-top:2px">
                    <button class="taskbarButton" name="cancelbutton">Cancel</button>
                    <button class="taskbarButton" name="savebutton" onclick="saveButtonClick()">Save</button>

这是store.js代码：

const path = require('path');
const fs = require('fs');
const electron = require('electron');

class Store {
  constructor(opts) {
    // return a string of the user's app data directory path.
    const userDataPath = (electron.app || electron.remote.app).getPath('userData');
    // Stringify to json file
    this.path = path.join(userDataPath, opts.configName + '.json');

    this.data = parseDataFile(this.path, opts.defaults);
  }

  // This will just return the property on the `data` object
  get(key) {
    return this.data[key];
  }

  // ...and this will set it
  set(key, val) {
    this.data[key] = val;
    //Need to try catch this
    fs.writeFileSync(this.path, JSON.stringify(this.data));
  }
}

function parseDataFile(filePath, defaults) {
  // try/catch it in case the file doesn't exist yet.
  // `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
  try {
    return JSON.parse(fs.readFileSync(filePath));
  } catch(error) {
    // if there was some kind of error, return the passed in defaults instead.
    return defaults;
  }
}

// expose the class
module.exports = Store;

这是package.json：

{
  "name": "AgentSync",
  "productName": "AgentSync",
  "version": "0.0.6",
  "main": "main.js",
  "scripts": {
    "postinstall": "install-app-deps",
    "start": "npm install && electron ./app",
    "pack": "build --dir",
    "dist": "build"
  },
  "build": {
    "appId": "agentsync",
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ]
    },
    "win": {
      "target": "NSIS",
      "icon": "build/icon.ico"
    }
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "latest",
    "electron-builder": "^20.39.0"
  }
}

任何人和所有帮助将不胜感激！