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

Posted 2023-03-08

【中文标题】在 Electron + React + Webpack 设置中找不到模块“电子”

【英文标题】：Cannot find module 'electron' in Electron + React + Webpack setup

【发布时间】：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')

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

【问题讨论】：

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

【参考方案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 的别名