webpack - 如何将 React 开发者工具添加到 Electron Webpack 构建中

Question

与此类似，尽管它仅显示如何在一个实例中下载开发人员工具。我想在每次启动应用程序时加载它development。我正在使用 webpack。

我收到manifest.json未打开的错误。

和

const addDevTools = () => {
  if (mainWindow) {
    // Open the DevTools.
    mainWindow.webContents.openDevTools();
    require("devtron").install();
    require("electron-debug")();

    const installer = require("electron-devtools-installer");

    const extensions = [
      "REACT_DEVELOPER_TOOLS",
      "REDUX_DEVTOOLS",
    ];

    for (const name of extensions) {
      installer.default(installer[name], true)
      .then((n: any) => console.log(`Added Extension:  ${n}`))
      .catch((err: any) => console.log(`An error occurred: ${err}`));
    }
  }
};

Answer 1

我最终在 electron-react-material-ui github repo 中找到了答案。在/app/main.development.js文件中。

const installExtensions = async () => {
const installer: any = require("electron-devtools-installer");
const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
const extensions = [
    "REACT_DEVELOPER_TOOLS",
    "REDUX_DEVTOOLS",
  ];
  return Promise.all(extensions.map((name) => 
  installer.default(installer[name], forceDownload)))
    .catch(console.log);
};

然后app.on准备好了

app.on("ready", async () => {
  if (process.env.NODE_ENV === "development") {
    await installExtensions();
  }
  createWindow();
});