如何使用electron-devtools-installer？

Question

我的要求

在安装和配置方面，官方文档指出如下：

All you have to do now is

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));

这有点简洁。

问题

• 我应该把这段代码放在哪里？
• 我应该如何初始化它？
• 如何添加多个扩展名？

- totymedli

Answer 1

简述

将其放置在包含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 . 后，您应该在控制台看到以下内容:

Added Extension: React Developer Tools
Added Extension: Redux DevTools

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

扩展将被记忆，因此您只需要调用此 API 一次，此 API 不适用于编程使用。如果您尝试添加已加载的扩展，则此方法将不返回并在控制台中记录警告。

- totymedli