首页 文章

如何在react / webpack 2设置中导入电子ipcRenderer

提问于
浏览 次
4

使用电子，反应（es6 / jsx），sass，pouchdb和webpack 2设置 . 我无法导入或要求ipcRenderer在main和渲染器进程之间进行通信 . 我的设置可以在这里找到：https://github.com/wende60/timeTracker

有关如何将ipcRenderer放入react组件的任何提示吗？

干杯，乔

reactjs webpack electron

5 回答

  • 0

    我有同样的问题 . 这为我解决了这个问题：

    添加 webpack.config.js ：

    const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.ExternalsPlugin('commonjs', [
            'electron'
        ])
    ]
    ...
}

    然后你可以使用它

    import {ipcRenderer} from "electron";
    回复于
  • 2
    const electron = window.require('electron');
const ipcRenderer  = electron.ipcRenderer;

    我认为这是更好的解决方案，因为它避免弹出React应用程序 .

    回复于
  • 1

    使用webpack-target-electron-renderer为此问题找到了一个很好的解决方案所以我可以在localhost环境中使用热重新开发来开发web部件 . 仅在电子环境中需要电子 .

    你可以在这里看到一个工作示例：https://github.com/wende60/webpack-web-and-electron-example，从acao的webpack-web-and-electron-example分叉，并更新为webpack 2和热替换 .

    如果你对webpack感兴趣，电子，反应，sass和pouchdb设置请看这里：https://github.com/wende60/timeTracker工作仍在进行中......

    回复于
  • -1

    我最近一直在研究这个话题，我找到了在电子main.js和应用程序的React部分之间做一些ipc的解决方案 . 由于两者都将 import {ipcRenderer} from 'electron'; 添加到webpack模块并且 const ipc = require('electron').ipcRenderer; 产生了一些错误后，我最终在结果页面中需要电子并将其添加到窗口中 .

    在 index.html 我做了这样的事情

    <body>
  ...
  <script>
    window.ipc = require('electron').ipcRenderer;
  </script>
  <div id="root">
  </div>
  ...
</body>

    在做反应 index.js 我做了这样的事情：

    import React from 'react';
import ReactDOM from 'react-dom';
// ...
if(window.ipc)
ipc.on("some-event", (event, someParameter) => {
  ReactDOM.render(
    <SomeElement value={someParameter} />,
    document.getElementById("root")
  );
})
// ...

    为了完成这项工作，我从电子应用程序启动了反应页面，在_641876中我做了类似的事情 .

    const {app, BrowserWindow} = require("electron"};
const exec = require("child_process").exec;

let main;
app.on("ready", () => {
  exec("node start", (err, stdout, stderr) => {
    if(err) console.log(err);
    console.log("" + stdout);
    console.log("" + stderr);
  });

  main = new BrowserWindow();
  main.loadURL("http://localhost:3006");
  main.on("close", () => {main = null});
});

    因为电子在同一个端口上运行，我在我的项目中添加了一个 .env 文件

    PORT=3006

    我在我的基础项目中使用 create-react-app my-prj （ npm install -g create-react-app ）命令看起来像这样

    my-prj
 |-package.json
 |-main.js
 |-.env
 |-node_modules/
 |-public/
    |-index.html
 |-src/
    |-index.js

    希望这篇文章有任何帮助 .

    回复于
  • 0
    import { ipcRenderer } from "electron"
import { Component } from "react"

    ...

    class MyComponent extends Component {
   render(){
      ipcRenderer.send("event", "some data")
      return (<div>Some JSX</div>)
   }
}
    回复于

相关问题