Electron开发笔记

github

目录简介

目录挺简单的,dev为开发目录.dev/client/:为客户端目录 dev/service/为服务端目录
因为后期打算用angular开发,所以用gulp打包和webpack做依赖

gulp

比较重要的一点是利用gulp-shell来启动.
注册了一个reload任务

1
gulp.task("reload",['webpack:compile'], p.shell.task(['electron .']))

但是这个任务有个缺陷就是 你每次更改代码都需要手动关闭Electron 也就是说这个配置不会帮你自动关闭界面 但是能帮你自动启动

webpack

webpack只做client依赖管理

1
2
3
4
5
6
7
8
9
module.exports={
//开发js都放置在/dev/js下 同时/dev/js下有个主目录用来做主文件
entry:'./dev/start.js',
output:{
//利用gulp调用webpack,webpack仅做依赖管理
filename:'mcstart.js'
},
module:{}
}

首先dev/js下有个start.js 这个就是专门用来引用客户端的文件 然后最终打包只需要调用一次这文件

剩下的貌似没什么好说了.. 有啥坑以后再补

打包Electron

打包是用electron-packager打包的 所以你需要npm安装这个electron-packager到项目文件夹中
然后可以去参考下官方文档
在package.json的script新增加个属性

1
2
3
4
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"package": "electron-packager ./ soulMc --platform=win32 --arch=all --out D:/Project/build --version 0.36.7 --overwrite "
},

以后打包只需要npm run-script package 就okay了
下面来说说上述命令的意思
./:打包的目录 这里为当前目录
soulMc:名称
–platform=win32:需要打包的平台 这里为win32你也可以写all
–arch=all:打包平台的版本 比如window 64和32 这里是生成64和32
–out D:/Project/build:输出路径
–version 0.36.7:打包软件也就是electron-packager版本 最新的就是0.36.7了
–overwrite:覆盖安装D:/Project/build下的文件
打包完成后就可以运行了…

剩下的坑以后再补