在React组件中使用Electron的ipcRender
我正在尝试创build一个小的React应用程序来捕获和设置一个全局快捷方式，用来显示和隐藏Electron应用程序窗口。 然而，当我试图从React组件内部使用ipcRender的时候，我就陷入了困境，引发了下面的错误。
Uncaught Error: Cannot find module "fs" 我正在使用Webpack捆绑我的JS，并编译JSX和ES6语法来导入Electron和ipcRender ，如下面的组件代码所示。
import React from "react"; import electron, { ipcRenderer } from 'electron'; var event2string = require('key-event-to-string')({}); export default React.createClass({ getInitialState: function() { return {shortcut: this.props.globalShortcut[0]}; }, handleOnKeyDown:function(e){ e.preventDefault(); var keys = event2string(e); this.setState({shortcut:keys}); this.props.globalShortcut.splice(0, 1); this.props.globalShortcut.push(keys); }, handleOnKeyUp:function(){ this.refs.shortcutInput.value = this.state.shortcut; this.refs.shortcutInput.blur(); ipcRenderer.send('set-new-shortcut', this.props.globalShortcut); }, handleOnFocus:function(){ this.refs.shortcutInput.value = ''; }, render() { return ( <div id="settings-container"> <h1>The show/hide shortcut is "{this.state.shortcut}"</h1> <form role="form"> <input type="text" ref="shortcutInput" placeholder="Create new shortcut" onFocus={this.handleOnFocus} onKeyDown={this.handleOnKeyDown} onKeyUp={this.handleOnKeyUp} className="form-control form-field"/> </form> </div> ); } });
我尝试了不同的解决scheme，例如在我的Webpack文件中添加一个node-loader ＆ json-loader ，添加fs设置为'empty'的节点对象，包括一个告诉Webpack忽略fs和ipc的插件， NPM。 我无法让他们中的任何一个工作。
不幸的是，我没有足够的Webpack或ES6语法知识来弄清楚发生了什么事情，而且我尝试的大多数解决scheme都是以“粘贴和希望”的方式进行的。 所以，如果有人能够用外行的话来解释发生了什么，我就可以再挖掘一些。
以下是我目前的Webpack文件。
var webpack = require('webpack'); module.exports = { context: __dirname + '/src/js', entry: "./index.js", output: { filename: 'bundle.js', path: __dirname + '/build', publicPath: 'http://localhost:8080/build/' }, module: { loaders: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query:{presets:['es2015','react']} }, { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' } ] }, // Don't know if below is working, 'Uncaught Error: Cannot find module "fs"' error still thrown when trying to import electron plugins: [ new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$")) ], // Don't know if below is working, 'Uncaught Error: Cannot find module "fs"' error still thrown when trying to import electron node: { fs: 'empty' } };
你需要在你的Webpackconfiguration中设置target: 'electron-renderer' ，如果你之后仍然有问题，请看https://github.com/chentsulin/electron-react-boilerplate