Electron 应用实战 (架构篇)

[sorrycc]

Electron 应用实战 (架构篇)

[sorrycc]

@oldj main 提供 watch services，renderer 里调，这样接收到变更等事件后的处理全部在 renderer 里处理就可以了。

[wotermelon]

@sorrycc 渲染进程可以直接使用node模块。

[zhebocaozuozenmeshuo]

下载代码直接打包后，图片资源未能正确加载.......

[fancymo]

看了下，关于two package.json structure已更新。
Since version 8 electron-builder rebuilds only production dependencies, so, you are not forced to use two package.json structure.

[zhanyouwei]

@JianmingXia 如果你只需要套一个壳的话只需要制定入口以及将路由改成hash模式就可以了

[oldj]

如果正在编辑的文件，被其他程序改了，是否会需要 main 主动推消息到 renderer 以便让后者更新内容？

目前还没有遇到 main 主动推消息到 renderer 的需求

[Jirapo]

package.json 里面少了: electron-is, electron-config, electron-log。
remote.getGlobals('services') , 应该更改为: remote.getGlobal('services') .

[sorrycc]

package.json 里面少了: electron-is, electron-config, electron-log。

这个依赖在 app/package.json 中。

remote.getGlobals('services') , 应该更改为: remote.getGlobal('services') .

感谢提醒。

[Jirapo]

修改文件之后，热加载要等一段时间才刷网页，反应有些慢。
如果是menu里面的操作，比如打开文件，这个是main端发起的请求，并不是renderer端主动发起的，这个是怎么解决呢？还是有其他办法把menu里面的请求变成renderer端发起的？

[sorrycc]

修改文件之后，热加载要等一段时间才刷网页，反应有些慢。

这个没办法的，慢是因为要 build 。

如果是menu里面的操作，比如打开文件，这个是main端发起的请求，并不是renderer端主动发起的，这个是怎么解决呢？还是有其他办法把menu里面的请求变成renderer端发起的？

打开文件从 main 端发起吧，renderer 端监听好了。

[wotermelon]

1、renderer 端

const content = remote.require('fs').readFileSync('/path/to/file');

electron的renderer端可以直接使用node相关模块，为什么不是这样子：

const content = require('fs').readFileSync('/path/to/file');

2、大量使用remote是否会造成内存问题？

[sorrycc]

electron的renderer端可以直接使用node相关模块，为什么不是这样子：

renderer 端并不能直接使用 node 模块吧。

2、大量使用remote是否会造成内存问题？

main 端不存数据，数据全部存于 renderer 端。在 renderer 端做好控制，内存没理由会上涨。

[carlos121493]

html用相对路径dist/renderer.js引入本地文件rebuild时感觉会略慢，可以架一个koa服务器基于环境判断引入脚本，用于热更新么？

[sorrycc]

@carlos121493 打算做但还没做的，会基于 webpack-dev-server，欢迎 PR 。

[Jirapo]

@Zhangmingze
如果渲染进程直接使用node模块，那估计是在index.html中直接使用

<script> require('./src/renderer/index.js') </script>

这样打包出来不会很大么？

[LucasYuNju]

@Zhangmingze @sorrycc 渲染进程确实是可以直接require fs的。

Electron doc:

Renderer Process

...
In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions.

另外，externals的配置，是否和target: "electron-renderer"是等价的？

[fomenyesu]

renderer 端 可以直接使用 node模块。用过读写文件的模块没有问题。 @sorrycc

[xiaoluoboding]

⚠️ ⚠️ ⚠️  It\'s not recommended to use webpack.config.js, since roadhog\'s major or minor
 version upgrades may result in incompatibility. If you insist on doing so, please 
be careful of the compatibility after upgrading roadhog.

按照模版npm install之后执行npm run dev报这样的错，如何解决？需要降低版本嘛？

[sorrycc]

@xiaoluoboding 忽略这个警告。

[liihuu]

调用c++，生成了.node，在渲染进程直接require引用会报错，原因是在webpack前没有rebuild么？

[lxlzero]

我clone下来得项目，经过npm install，npm run dev，npm start都是正常的，可是我npm run pack打包项目的时候【× Rebuild Failed
An unhandled error occurred inside electron-rebuild
ENOENT: no such file or directory, open 'D:\Working\electron\electron-dva\dva-boilerplate-electron\boilerplate\app\n
ode_modules\package.json'】，怎么怎么解呢？

[miaosun009]

执行npm run rebuild 的时候出现以下错误，是什么原因？

PS D:\node\edva> npm run rebuild

@ rebuild D:\node\edva
electron-rebuild -d=https://gh-contractor-zcbenz.cnpmjs.org/atom-shell/dist/ -m ./app/node_modules

× Rebuild Failed
An unhandled error occurred inside electron-rebuild
ENOENT: no such file or directory, open 'D:\node\edva\app\node_modules\package.json'

Error: ENOENT: no such file or directory, open 'D:\node\edva\app\node_modules\package.json'

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "rebuild"
npm ERR! node v7.7.1
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ rebuild: electron-rebuild -d=https://gh-contractor-zcbenz.cnpmjs.org/atom-shell/dist/ -m ./app/node_modules
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the @ rebuild script 'electron-rebuild -d=https://gh-contractor-zcbenz.cnpmjs.org/atom-shell/dist/ -m ./app/node_modules'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! electron-rebuild -d=https://gh-contractor-zcbenz.cnpmjs.org/atom-shell/dist/ -m ./app/node_modules
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\node\edva\npm-debug.log

[train860]

@miaosun009 package.json 里面的rebuild修改为"rebuild": "electron-rebuild -m ./app",

[peace-wr]

请教下，直接clone下code后，跑npm run dev 正常，但是不自动打开浏览器，需要手动输入http://localhost:8000,并且这个打开也不是例子中的页面，必须http://localhost:8000/main-dev.html这样才是样例，请问，还需要哪里做啥设置吗？直接npm start，不报错但是弹出的应用是空白的，啥也不显示，请教如何才能正常显示呢？

[peace-wr]

经测试发现：npm run dev不关闭的情况下，运行npm start可以跑。再请教个问题，就是打包的问题，打包完毕后不报错，里面的内容都是空的，看console里各种报错，都是路径找不到，在哪里修改路径？

[baiyulong]

Hi, 可以升级react 和 react-dom 到 v16吗？

[agalwood]

main 端

ipcMain.on('readFile', (event, { filePath }) => {
  content content = fs.readFileSync(filePath, 'utf-8');
  event.sender.send('readFileSuccess', { content });
});

content content = fs.readFileSync(filePath, 'utf-8');

这行楼主是不是输错了，应该是

const content = fs.readFileSync(filePath, 'utf-8');

[zhanyouwei]

ipcMain 没有主动send的方法，主进程怎么主动和render进程通信呢

[oldj]

@zhanyouwei 我的做法是 render 进程初始化时，先给主进程发一个注册消息，主进程里收到消息后，将对应的 sender 保存起来，这样后面主进程就随时可以给这个 render 进程发消息了。

[JianmingXia]

之前基于 antd + dva写了一个项目，如何快速接入electron，重要的是路由这块怎么处理

[zhanyouwei]

@oldj 后来发现window实例可以通过webcontents API发送消息

[JianmingXia]

@zhanyouwei 路由为什么要改成hash模式，能解答一下么

[9777]

使用npm run dev，运行项目时。后面报内存溢出了。请问该如何解决呢？错误如下
[0] <--- Last few GCs --->
[0]
[0] 52387 ms: Mark-sweep 682.2 (697.3) -> 682.2 (698.3) MB, 154.1 / 0.0 ms [allocation failure] [GC in old space requested].
[0] 52581 ms: Mark-sweep 682.2 (698.3) -> 682.2 (699.3) MB, 194.1 / 0.0 ms [allocation failure] [GC in old space requested].
[0] 52745 ms: Mark-sweep 682.2 (699.3) -> 682.2 (697.3) MB, 163.7 / 0.0 ms [last resort gc].
[0] 52916 ms: Mark-sweep 682.2 (697.3) -> 682.2 (697.3) MB, 171.6 / 0.0 ms [last resort gc].
[0]
[0]
[0] <--- JS stacktrace --->
[0]
[0] ==== JS stack trace =========================================
[0]
[0] Security context: 1D67B815
[0] 1: fromString(aka fromString) [buffer.js:~186] [pc=06858679] (this=1D6081D9 ,string=0D09FD25 <Very long string[2643859]>,encoding=1D6826E5 <String[4]: utf8>)
[0] 2: new constructor(aka Buffer) [buffer.js:~70] [pc=05B205D4] (this=0D09FD39 <a Buffer with map 1C59334D>,arg=0D09FD25 <Very long string[2643859]>,encodingOrOffset=1D6826E5 <String[4]: utf8>,le
ngth=1D6081D9 )
[0] 3: ...
[0]
[0] FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
[0] npm run dev:renderer exited with code 0

[leaez]

既然electron-builder v8 解决了tow package问题, 那么能否提供一个基于umi, 单个package的 electron编译项目实例.

[roroyu]

折腾了一天多， 也没弄好。。。。

[chaffz]

renderer 端 可以直接使用 node模块。用过读写文件的模块没有问题。 @sorrycc

本人外行，不是写前端的，但是最近基于 node-addon-api 写了扩展，要如何使用呢？

[mankeheaven]

如果早看到，我也不会花几个星期跟你一样饶了远路后重写了。

[Chengma999]

框架很好，唯一缺点就是 webpack 和roadhog 版本太低了。 react 升到v16 没问题但是webpack 和roadhog 升到在最新版本就会出错。我也不会调~。。。