node.js - 在 electron + react 应用程序中执行 child_process

Question

我开始使用 reactjs 创建一个 electron 应用程序。我正在使用 react-react-app 方法来创建 React 应用程序。在我的应用程序中，我想执行一些 cli 命令。每次我使用“child_process”时都会出错。有时会说“child_process.exec 不是函数”。那么如何在该项目中执行/使用“child_process”方法/函数。非常感谢

cli.js

export const cli = () => {
 try {
  const { spawn } = require('child_process');
  const ls = spawn('ls', ['-lh', '/usr']);

  ls.stdout.on('data', (data) => {
    console.log(`stdout: ${data}`);
  });

  ls.stderr.on('data', (data) => {
    console.error(`stderr: ${data}`);
  });

  ls.on('close', (code) => {
    console.log(`child process exited with code ${code}`);
  });
 } catch(error) {
  console.log(error)
 }

}

应用程序.js

import { cli } from "./cli";

function App() {

// call cli function
cli();

return (
<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>
);

Answer 1

您需要添加 webpack 目标和广告 webPreferences，如下所示。在我的项目中，我更新了以下文件以使其有效。

webpack.main.config.js

module.exports = {
  // Your other configs
  target: 'electron-main'
};

webpack.renderer.config.js

module.exports = {
  // Your other configs
  target: 'electron-renderer'
};

index.js 或 index.ts

const mainWindow = new BrowserWindow({
  // Your other configs
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
});

然后你可以在你的代码中使用child_process

import { spawn } from 'child_process';
// Your code with spawn