组上之前做了一款web端的IOS和Android的打包工具，通过上传签名文件和安装包打包在线生成安装包并保存到本地。由于浏览器安全原因，客户端不能直接读取并打开本地文件夹路径，所以导致用户不知道打包后的安装文件保存在哪个路径下面。以老大的知识量，第一时间就想到了electron打包生成本地安装文件。以“钉钉”为例，钉钉就是一个典型的js本地化实践，几乎能够完成所有需要的工作。
以下为具体实践
1. electron工程目录结构
在app文件夹下包含三个文件：main.js、package.json、index.html
package.json为项目的配置文件，指定项目的入口文件等一些信息。
main.js为项目的入口文件，主要负责创建BrowserWindow窗口、启动其他配置文件和在窗口关闭之后清理进程释放资源的工作。
index.html为显示的界面，在里面完成一些客户端的功能。
2. electron的安装
由于资源被墙的原因，用npm install --g electron-prebuilt的速度很慢，庆幸有淘宝镜像提供的cnpm命令。
3. hello world
首先配置package.json：
{
"name": "package.json",
"version": "1.0.0",
"description": "hello word",
"main": "app/main.js",
"dependencies": {
"electron-prebuilt": "^1.4.0"
},
"devDependencies": {
"electron-prebuilt": "^1.4.0"
},
"scripts": {
"start": "electron ."
},
"author": "regdai",
"license": "ISC"
}
其次配置main.js
const electron = require('electron');
// 控制应用生命周期的模块
const app = electron.app;
// 创建本地浏览器窗口的模块
const BrowserWindow = electron.BrowserWindow;
// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
function createWindow() {
// 创建一个新的浏览器窗口
win = new BrowserWindow({width: 1920, height: 1080});
// 并且装载应用的index.html页面,__dirname为当前文件路径
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, "index.html"),
protocol: 'file:',
slashes: true
}));
// 打开开发工具页面
// win.webContents.openDevTools();
// 当窗口关闭时调用的方法
win.on('closed', function() {
// 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
// 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
win = null;
});
}
// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', function() {
// 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function() {
// 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}
});
index.html内容
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>我的世界</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
启动electron
在根目录下运行命令：electron .
4.项目打包
1. 安装 electron-packager：命令：npm install --save-dev electron-packager
安装完成之后，项目根目录下面的package.json文件里，会多出一条electron-package的版本号配置信息
2.正式打包
有两种方法：
1、直接使用命令打包，electron-packager的打包基本命令是：
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
命令说明：
- location of project：项目所在路径
- name of project：打包的项目名字
- platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
- architecture：决定了使用 x86 还是 x64 还是两个架构都用
- electron version：electron 的版本
- optional options：可选选项
命令比较长，每次要是都用这个命令来打包会很烦，可以使用第二种方法；
2、首先在项目根目录下面的 package.json 里添加代码，
"packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"
PS：这里要注意，字段里的 项目名字，version，icon路径要改成自己的；
{
"name": "package.json",
"version": "1.0.0",
"description": "web-content",
"main": "main.js",
"dependencies": {
"electron-prebuilt": "^1.4.0"
},
"devDependencies": {
"electron-packager": "^8.5.0",
"electron-prebuilt": "^1.4.13",
"gulp": "^3.9.1"
},
"scripts": {
"start": "electron .",
"packager": "electron-packager ./app web-content --out ./OutApp --version 1.4.13 --overwrite --icon=./app/img/icon/icon.ico"
},
"license": "ISC"
}
然后，使用命令 npm run-script packager进行打包
直接运行文件夹下面的.exe就可以打开文件了。
以上是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配置文件
资源路径是相对于exe文件而言的，还没有打包之前，自己能够顺利的运行整个项目，可是打包之后一直提示
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之后，自己究竟把资源清理干净了吗？这也是一个值得思考的问题。
参考
