Electron踩的那些坑

一切就绪开按照示例开鲁

问题来了,总不能 每次修改都去手动重启服务 或者 Ctrl + R 刷新应用吧,太耽误事了.

解决办吧  安装 gulp和gulp-watch 和 electron-connect 模块

创建gulpfile.js 内容如下

const gulp = require('gulp')
const watch = require('gulp-watch')
const electron = require('electron-connect').server.create()

gulp.task('watch:electron', function(){
    electron.start()
    watch(['./main.js'], electron.restart)
    watch(['./index.html'], electron.reload)
})

gulp electron:electron 启动任务,然后修改 main.js 重启正常, 再尝试修改 index.html,重载 Starting 'bound' ... 卡在这里

解决方法需要在index.html里面插入一句JS代码

重新测试 一切正常.

打个包试下

npm install electron-packager

配置下package.json

  "scripts": {
    "pack": "electron-packager . myClient --platform=win32  --arch=x64 --app-version=0.0.1 --electron-version=4.0.5 --ignore=node_modules"
  },

npm run pack 注意参数需要添加 ---ignore=node_modules 否则卡住

由于之前项目前端用的时Polymer

开始测试Polymer 能否再Electron里面跑起来

npm install polymer-cli

polymer init

先选择polymer2.0 运行正常

重新选择polymer3.0 由于polymer3.0使用的是import 导入模块的 

node并不支持 import 只支持require 需要安装babel 将 import导入方式转成require

然而转完后重试 报错

最后检查Electron嵌入的Chrome版本是68,发行时间是2018年8月, 这个时间polymer3.0还没出来, 68可能对polymer3.0的某些特性不支持吧

 

刚好在electron社区中看导有 electron-vue 模块, 好吧既然目前vue这么火前端就用vue吧.