未捕獲的ReferenceError：在add.js：1上未定義require

Question

我試圖建立一個簡單的Electron項目，但無法解決此問題。 我有一個文件add.js ，用於將事件監聽器添加到按鈕以關閉無框架瀏覽器窗口。 我將腳本標記中的add.js文件導入到HTML中，如下所示：

 <script src="add.js"></script>

add.js文件僅包含以下事件偵聽器：

const electron = require('electron')
const remote = electron.remote
const closeBtn = document.getElementById('closeBtn')

closeBtn.addEventListener('click', (event) => {
    let window = remote.getCurrentWindow();
    window.close();
})

如果需要，這里是index.js ，單擊事件偵聽器可打開此窗口：

const electron = require('electron');
const path = require('path');
const BrowserWindow = electron.remote.BrowserWindow;

const notifyBtn = document.getElementById('notifyBtn');

notifyBtn.addEventListener('click', (event) => {
    const modalPath = path.join('file://', __dirname, 'add.html')
    let win = new BrowserWindow({
        alwaysOnTop: true,
        frame: false,
        transparent: true,
        width: 400,
        height: 200
    })
    win.loadURL(modalPath)
    win.show()
    win.webContents.openDevTools();

    win.on('close', () => win = null)
})

我遇到的問題是無框瀏覽器窗口可以很好地打開，但是我立即收到“ Uncaught ReferenceError：”，並且未加載JS代碼。

我嘗試在此處查找問題（stackoverflow），但答案表明這是由於嘗試在瀏覽器中運行節點程序引起的。 但是，我上面包含的index.js代碼運行正常，沒有錯誤。

這也是HTML文件的代碼，以防萬一我發瘋：

index.html ：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>BTCAlert</title>
    <link rel="stylesheet" href="../assets/css/main.css">
  </head>

  <body>
    <div class="row">
      <div id="price-container">
        <p class="subtext">Current BTC USD</p>
        <h1 id="price">Loading..</h1>
      </div>
      <div id="goal-container">
        <p><img src="../assets/images/up.svg"><span id="targetPrice">Choose a Target Price</span></p>
      </div>
      <div id="right-container">
        <button id="notifyBtn">Notify Me When...</button>
      </div>
    </div>
    <script src="index.js"></script>
  </body>

</html>

add.html ：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="../assets/css/main.css">
        <link rel="stylesheet" href="../assets/css/add.css">
    </head>

    <body>
        <p class="notify">Notify me when BTC reaches..</p>

        <div class="row2">
            <div>
                <input id="notifyVal" placeholder="USD">
            </div>
            <button id="updateBtn">Update</button>
        </div>

        <a id="closeBtn">Close Window</a><br>

        </div>
        <script src="add.js"></script>
    </body>

</html>

任何幫助是極大的贊賞。

Answer 1

添加

webPreferences: {
            nodeIntegration: true
},

新的BrowserWindow實例的更新為我解決了此問題。

Answer 2

require（）函數不能在客戶端使用。...如果您想在客戶端使用它，則應在此處使用require.js或head.js。

未捕獲的ReferenceError：在add.js：1上未定義require

問題描述

2 個解決方案

解決方案1
1 已采納 2019-05-04 20:35:20

解決方案2
0 2019-05-04 20:07:42

未捕獲的ReferenceError：在add.js：1上未定義require

問題描述

2 個解決方案

解決方案1 1 已采納 2019-05-04 20:35:20

解決方案2 0 2019-05-04 20:07:42

解決方案1
1 已采納 2019-05-04 20:35:20

解決方案2
0 2019-05-04 20:07:42