一、安装 electron-packager
PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 “main”: “app/main.js”的路径(去掉app/),不这样子的话,下面打包的时候会报错,有的版本识别不了应用路径。
1、使用命令 npm install --save-dev electron-packager
将electron-package包安装到在项目下面,
安装完成之后,项目根目录下面的package.json文件里,会多出一条electron-package的版本号配置信息
二、正式打包
首先在项目根目录下面的 package.json 里添加代码,
"packager": "electron-packager ./app HelloWorld -win=x32 --out ./OutApp --version 4.1.3 --overwrite --icon=./app/img/icon/icon.ico"
PS:这里要注意,字段里的 项目名字,version,icon路径要改成自己的;
然后,在使用命令
npm run-script packager
以上是 hello world
生成,真正用到已有的项目中却出现了新的坑
hello world
1. jquery引用
在项目中已经引入了
jquery.js
,控制台却报
cannot find the jquery.js
,解决方法:在
index.html
中引入
jquery
改写成:
<script>window.$ = window.jQuery = require('../public/lib/jquery/dist/jquery.js')</script>
原因分析:因为nwjs/electron环境里有module jquery的loader认为是通过commonjs挂载的 所以他不会自动挂到全局 所以官方推荐自己来
2. 文件突然不能正常运行
原本好好地项目,一分钟之前还在完整的运行,没有改动任何一行代码,突然就无法运行,花了四个多小时找原因,结果还是没有找出来,只好把自己的项目拷贝到其他电脑上面运行,发现其他项目能够顺利运行可是在自己电脑上面不能运行,于是把电脑重启之后,项目又可以运行。
原因分析:可能是操作系统中的资源出现了冲突,另外一个进程在使用某个资源,可是现在这个进程也要使用这项资源,所以导致的操作系统中的“堵塞???”。
3.
nodejs
的
require
不能在
angularjs
项目中运行
解决方法:在
index.html
的头部加上
<script>var __require = require;</script>
原因分析:
angualrjs
内部有
require
指令,所以产生了命名冲突。
4. 修改服务器的
toml
配置文件

Paste_Image.png
资源路径是相对于
exe
文件而言的,还没有打包之前,自己能够顺利的运行整个项目,可是打包之后一直提示
Paste_Image.png
ENOENT
: No such file or directory。提示找不到该文件,自己却一直以为是因为打包之后的
asar
包不能正常阅读所以耗费了大量时间,最后通过修改
toml
的路径参数解决问题。
5.
nodejs
打开路径
最初
require
不能在
angularjs
中正常运行,所以把所有参数在
main.js
中设置成全局变量,严重污染了全局空间,由于问题的解决,所以就在
angularjs
的
controller
里面顺理成章的使用
require
等API。
$scope.openTaskmgr = function () {
//shell打开资源管理器
var electronShell = __require("electron").shell;
//path指定目录
var electronPath = __require('path');
var apkPath = electronPath.resolve(__dirname, '../../../../tmp/dist');
electronShell.openExternal(apkPath);
};
在这个项目里面,由于时间的关系,直接把需要打开的目录写死了,这种处理方法不是特别的好,最好的方法是去读取
toml
配置文件里面的路径,然后再打开相关链接。
6. 服务器日志输出
把项目打包之后读服务器日志就会成为一项比较难办的事情,所以在前端必须通过某个按钮打印出当前的服务器日志,这里运用到了
nodejs
的文件系统。
main.js
里面打开服务器
var p = childProcess.spawn("resources/app/packerd.exe", ["--conf", "resources/app/packerd.toml"]);
获取服务器的标准输出和标准错误输出,并在标准输出中创建日志文件和写入相关日志,同时在标准错误输出中写入服务器错误日志
p.stdout.on('data', function (d) {
//创建文件
fs.open('resources/app/log.txt', 'w+', function(err, fd) {
if (err) {
return console.error(err);
}
});
//写入服务器日志
fs.appendFile('resources/app/log.txt', d.toString(), function(err) {
if (err) {
return console.error(err);
}
});
});
p.stderr.on('data', function (data) {
//写入服务器错误日志
fs.appendFile('resources/app/log.txt', d.toString(), function(err) {
if (err) {
return console.error(err);
}
});
});
当
exe
关闭时删除服务器日志
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
fs.unlink("resources/app/log.txt",function(err){
if(err){
console.log(err);
}
});
app.quit();
}
});
完成项目之后仔细想了想,为什么要创建
txt
文件而不能在
div
中输出相关内容,因为是给用户用的,我们不知道用户默认的打开
txt
的是什么软件,万一是一个非常非常慢的呢?在mac下又是什么呢?所以这样的用户体验性不是特别的好。同时在退出
exe
之后,自己究竟把资源清理干净了吗?这也是一个值得思考的问题。