在 Electron + React + Webpack 设置中找不到模块“电子”答案

【问题标题】：Cannot find module 'electron' in Electron + React + Webpack setup在 Electron + React + Webpack 设置中找不到模块“电子”
【发布时间】：2016-08-13 15:19:31
【问题描述】：

我正在使用 React + Electron + Webpack 创建应用程序，但在尝试使用 Electron 模块时，我收到错误消息“找不到模块 'electron'。

我的一个 React 组件中有以下示例代码：-

const shell = window.require("electron").shell;
shell.showItemInFolder("C:\\Logs");

我提到了 SO 中提出的许多与 webpack 和 Electron 相关的问题，但似乎没有一个解决方案适合我。

当我尝试以下代码时：-

require('electron-prebuilt')

它返回给我电子可执行文件的路径。

【问题讨论】：

这可能有助于stackoverflow.com/questions/34427446/…

标签： node.js reactjs webpack electron

【解决方案1】：

webpack 的配置中有一个target 选项，需要设置为electron。像这样：

var config = {
    target: 'electron',
    entry: __dirname + '/main.js',
    output: {
        path: __dirname + '/dist/',
        filename: 'bundle.js'
    },
    ...
};

module.exports = config;

【讨论】：

【解决方案2】：

在 webpack 中，你可以设置开发目标。默认情况下，目标将设置为 web。所以需要在渲染进程中设置目标为electron-renderer，在主进程中设置为electron-main。

//In the renderer configuration
module.exports = {
 target: 'electron-renderer',
 //... other configurations
}

//In the main configuration
module.exports = {
 target: 'electron-main',
 //... other configurations
}

electron 和 atom 是 electron-main 的别名

【讨论】：