没有定义Electron require()

我正在为自己的目的创建一个电子应用程序。我的问题是，当我在我的HTML页面内使用节点函数时，它抛出了一个错误:

'require()'没有定义。

是否有办法在所有HTML页面中使用Node功能?如果有可能，请给我一个如何做到这一点的例子或提供一个链接。下面是我试图在我的HTML页面中使用的变量:

  var app = require('electron').remote; 
  var dialog = app.dialog;
  var fs = require('fs');

这些是我在电子中所有HTML窗口中使用的值。

当前回答

我所要做的只是在我的html页面中要求一个js文件，因为我正在遵循的教程。但是，我打算使用远程模块，所以安全性是最重要的。我在上面修改了迈克尔的答案，所以我发布了出来，纯粹是为了那些像我一样花了几个小时寻找安全替代“要求”的人。如果代码不正确，请随时指出来。

main.js

const electron = require('electron');
const app=electron.app;
const BrowserWindow=electron.BrowserWindow;
const ipcMain=electron.ipcMain;

const path=require('path');
const url=require('url');

let win;

function createWindow(){
    win=new BrowserWindow({
        webPreferences:{
            contextIsolation: true,
            preload: path.join(__dirname, "preload.js")
        }
    });
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }));

    win.on('close', function(){
        win=null
    });
}

app.on('ready', createWindow);

preload.js

const electron=require('electron');
const contextBridge=electron.contextBridge;

contextBridge.exposeInMainWorld(
    "api", {
        loadscript(filename){
            require(filename);
        }
    }
);

index . html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World App</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <button id="btn">Click</button>
    </body>
    <script>
        window.api.loadscript('./index.js');
    </script>
</html>

index.js

const btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('button clicked');
});

我特别想知道这是否仍然存在安全风险。谢谢。

2020-10-20 10:35:36

其他回答

你是否在BrowserWindow初始化时使用nodeIntegration: false ?如果是，设置为true(默认值为true)。

并且像这样在HTML中包含你的外部脚本(而不是<script> src="./index.js" </script>):

<script>
   require('./index.js')
</script>

2017-06-06 16:11:34

为了现实性和完整性，我添加了我的一块蛋糕。以下是我对这个话题的重要看法。请记住这篇文章的日期是2022年10月，电子版本是21.1.1。在电子文档中有一篇文章叫做进程间通信，其中以非常清晰的方式描述了这个主题。

下面的代码只是前面提到的站点上示例代码的一个副本。

main.js文件:

const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  ipcMain.on('set-title', (event, title) => {
    const webContents = event.sender
    const win = BrowserWindow.fromWebContents(webContents)
    win.setTitle(title)
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

总结:

在webPreferences中只定义预加载脚本，并让所有那些nodeIntegration, nodeIntegrationInWorker, nodeIntegrationInSubFrames, enableRemoteModule, contextIsolation应用默认值。

下一个文件是preload.js:

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    setTitle: (title) => ipcRenderer.send('set-title', title)
})

在这里，electronAPI对象将被注入到浏览器上下文中，因此将有一个窗口。电子api对象，它将有一个名为setTitle的成员函数。当然你也可以添加其他属性。

setTitle函数只调用ipcRenderer。发送是进程间通信桥或隧道的一端。

你在这里发送的内容在另一端，在main.js文件中，ipcMain。在函数。在这里，您注册了设置标题事件。

下面的例子继续使用index.html文件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    Title: <input id="title"/>
    <button id="btn" type="button">Set</button>
    <script src="./renderer.js"></script>
  </body>
</html>

加载renderer.js脚本:

const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
    const title = titleInput.value
    window.electronAPI.setTitle(title)
});

在那里你可以访问window.electronAPI.setTitle函数，它是你在preload.js中定义的，它将标题发送到ipcRenderer中，然后这个标题从main.js中的ipcMain中掉出来，触发一个事件并导致一个函数运行，该函数依次设置应用程序的标题。

所以我要再次强调阅读文档。有更多关于IPC的示例。另外，请阅读上下文隔离章节，它非常简短和清晰。

2022-10-20 20:42:53

最后，我成功了。将此代码添加到HTML文档Script Element中。

很抱歉回复晚了。我使用下面的代码来做这件事。

window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;

使用nodeRequire而不是require。

很好。

2018-01-05 10:02:40

从版本5开始，nodeIntegration的默认值从true变为false。您可以在创建浏览器窗口时启用它:

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
});

2019-04-29 17:53:37