如何使用 electron-devtools-installer？

Question

我有什么

关于安装和配置，official documentation 声明如下：

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

这有点简洁。

问题

我应该把这个代码放在哪里？
我应该如何初始化它？
如何添加多个附加信息？

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

应用程序发出 ready 事件后，必须调用 installExtension 函数。如果你想添加多个扩展，你必须通过复制粘贴使用不同的扩展多次调用该函数：

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's BrowserWindow.addDevToolsExtension documentation 所述：

The extension will be remembered so you only need to call this API once, this API is not for programming use. If you try to add an extension that has already been loaded, this method will not return and instead log a warning to the console.

如何使用 electron-devtools-installer？

How to use electron-devtools-installer?

javascript

developer-tools

electron

我有什么

问题

tl;博士

深度讲解

安装包

需要包

配置和使用