如何使用electron-devtools-installer？

Question

是)我有的

在安装和配置方面,官方文档说明如下:

你现在要做的就是

import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';

installExtension(REACT_DEVELOPER_TOOLS)
.then((name) => console.log(`Added Extension:  ${name}`))
.catch((err) => console.log('An error occurred: ', err));

这有点简洁.

问题

• 我应该在哪里放置此代码？
• 我应该如何初始化它？
• 如何添加多个扩展程序？

Answer 1

TL;博士

将它放在包含Electron的文件中,并在ready事件发出后运行它:

const { app } = require('electron');
app.on('ready', functionWithTheCodeFromDocs);

你只需要这样做一次!运行此代码后,扩展将保持不变.

深入解释

安装包

像文档指示您一样安装软件包.在npm的情况下:

npm install electron-devtools-installer --save-dev

需要包裹

您可能需要该软件包并在构建Electron应用程序的文件中对其进行配置.您需要包含安装程序功能和(可能是多个)所需的扩展名:

使用ES6模块:

import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';

用require:

const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');

配置和使用

我会假设你需要Electron:

const { app } = require('electron');

在应用程序发出事件installExtension后,必须调用该函数ready.如果要添加多个扩展名,则必须通过复制粘贴多次使用不同的扩展名调用该函数:

app.on('ready', () => {
    installExtension(REACT_DEVELOPER_TOOLS)
        .then((name) => console.log(`Added Extension: ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});
app.on('ready', () => {
    installExtension(REDUX_DEVTOOLS)
        .then((name) => console.log(`Added Extension: ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});

或者你可以写一个循环:

 app.on('ready', () => {
    [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS].forEach(extension => {
      installExtension(extension)
          .then((name) => console.log(`Added Extension: ${name}`))
          .catch((err) => console.log('An error occurred: ', err));
    });
});

如果你已经完成了所有事情,在electron .项目文件夹中运行后,你应该在控制台中看到这个:

添加扩展:React Developer Tools
添加了扩展:Redux DevTools

请记住:您只需运行此代码一次.正如Electron的BrowserWindow.addDevToolsExtension文档所述:

扩展名将被记住,因此您只需要调用此API一次,此API不用于编程.如果您尝试添加已加载的扩展,则此方法不会返回,而是向控制台记录警告.