如何在渲染器中添加const fs = require('fs ')到Electron，而不包括nodeIntegration：true，contextIsolation：假的

我需要建立一个IPC，但我不知道如何做到这一点。我看了文档，这是-https：//github.com/electron/electron/issues/9920#issuecomment-575839738，但不能做任何事情，如何代码应该看起来像在我的情况下，这样，这赚？所有教程视频都有nodeIntegration：true，contextIsolation：错误，但这可能存在安全风险

main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url');

const electron = require('electron')

// Enable live reload for all the files inside your project directory
require('electron-reload')(__dirname);

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

renderer.js

const fs = require('fs');
document.onkeydown = function(e) {
  switch (e.keyCode) {
      case 65:
      fs.appendFile('message.txt', 'data to append', function (err) {
        if (err) throw err;
       
      });
        console.log('file added');
     
    break;
      default:
          console.log("Key not found!");
  }
};

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'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
  <h1>Hello World!</h1>
    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

你不能在Electron的渲染器代码中直接暴露Node.js内部。
相反，您可以在主进程代码中使用ipcMain.handle设置一个IPC处理程序，它可以在Node.js中执行任何您想要的操作，可选地接受参数并返回操作结果。
然后在窗口的预加载脚本中公开一个函数，该函数使用ipcRenderer.invoke调用这个IPC处理程序，并传递任何参数。
然后在渲染器中调用公开的函数，从而将I/O工作卸载到主进程，这类工作应该首先在主进程中完成。
使用fs.promises.readFile的简单示例。您应该能够轻松地将其调整到您的用例：
main.js

const { ipcMain } = require("electron");
const fs = require("fs/promises");

ipcMain.handle("readFile", (event, filePath) => {
  return fs.readFile(filePath);
});

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("myFS", {
  readFile: (filePath) => {
    return ipcRenderer.invoke("readFile", filePath);
  },
});

renderer.js

async function someRendererFunction() {
  const fileContents = await window.myFS.readFile("/some/file/path");

  console.log("read", fileContents);

  return fileContents;
}

一般来说，当使用Electron开发时，你应该尽量不要在渲染器中做所有的事情，而是让你的主进程做尽可能多的工作。渲染器应该在需要时请求主进程来完成这项工作。通过这种方式，它可以完全将所有资源集中在UI工作上，而不必担心运行昂贵或阻塞的操作。
在设计上，JavaScript是单线程的，但Electron提供了同时运行多个进程的独特优势，因此当您仅在渲染器中工作时，主进程只会闲置在那里并等待要做的事情。

如何在渲染器中添加const fs = require('fs ')到Electron，而不包括nodeIntegration：true，contextIsolation：假的

1条答案

相关问题

热门标签

最新问答