如何使用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');

必须在应用程序发出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 . 在项目的文件夹中，您应该在控制台中看到：

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

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

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