Electron Webpackビルドに反応型開発ツールを追加する方法

Question

thisに似ていますが、開発者用ツールを1つのインスタンスでダウンロードする方法しか示していません。 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

と

私は電子反応する材料-UIのgithubのレポで答えを見つけてしまいました。 /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(); 
});