如何将反应开发人员工具添加到Electron Webpack构建中

时间:2017-07-12 16:53:18

标签: webpack electron react-devtools

this类似,但它仅显示如何在一个实例中下载开发人员工具。我希望每次在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}`));
    }
  }
};

1 个答案:

答案 0 :(得分:0)

我最终在电子反应材料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();
});