javascript - 如何使用 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;dr

将它放在包含 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';

使用要求:

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'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.