Electron给index.html添加桌面APP外壳

参考：
  https://segmentfault.com/a/1190000007206301
  http://www.tuicool.com/articles/jYfuQfI
  Electron官网

  本文方法用于给存在index.html的项目添加一个桌面应用的外壳，可以使用exe打开。官网介绍Electron的应用是使用html，css，js创建跨平台的桌面app。

全局安装electron

npm install electron -g

在具有index.html的根目录下，创建一个main.js和package.json

/** main.js内容 **/const electron = require('electron');// 控制应用生命周期的模块const { app } = electron;// 创建本地浏览器窗口的模块const { BrowserWindow } = electron;// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的// 时候该窗口将会自动关闭let win;function createWindow() {    // 创建一个新的浏览器窗口    win = new BrowserWindow({ width: 800, height: 600 });    // 并且装载应用的index.html页面    win.loadURL(`file://${__dirname}/index.html`);    // 打开开发工具页面    //win.webContents.openDevTools();    // 当窗口关闭时调用的方法    win.on('closed', () => {        // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里        // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。        win = null;    });}// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。// 有些API只能在该事件发生后才能被使用。app.on('ready', createWindow);// 当所有的窗口被关闭后退出应用app.on('window-all-closed', () => {    // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出    if (process.platform !== 'darwin') {        app.quit();    }});app.on('activate', () => {    // 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他    // 窗口打开    if (win === null) {        createWindow();    }});

/** package.json **/{    "name": "your-app",    "version": "0.1.0",    "main": "main.js",    "scripts": {      "start": "electron .",      "package": "electron-packager ./ myapp --platform=win32 --arch=x64 --out=./dist --electron-version=1.6.10 --overwrite --ignore=node_modules"    }  }  

现在就可以在，index.html所在目录下，使用“electron .”命令，打开项目，实质上就是使用electron创建了一个浏览器窗口并显示内容。

安装打包工具

npm install --save-dev electron-packager

使用方法官方介绍：

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

各参数含义：

• location of project：应用目录
• name of project：应用名称
• platform：要打包的平台
• architecture：x86 or x64架构
• electron version：与electron 版本保持一致(不是应用版本)
• optional options：其它选项

实际使用：

本次打包命令，在package.json中将scripts对象下的“package”改为：

 "electron-packager ./ myapp --platform=win32 --arch=x64 --out=./dist --electron-version=1.6.10 --overwrite -- ignore=node_modules"

• 其中platform可选择项有：darwin, linux, mas, win32, 多选时逗号分隔，也可以直接使用all。 默认主机platform
• 其中arch可选择项有：ia32, x64, armv71, 多选时逗号分隔，也可以直接使用all。默认是主机arch
• platform和arch可以合并写为–all
• 打包时注意node_modules不用打包, electron版本指定，原来貌似是–version，现在改为了–electron-version

打包

执行如下命令：

npm run-script package

• 第一次打包会下载相应平台的包,可能会比较久，输出在项目根目录下创建了dist文件夹。双击里面的myapp.exe即可打开应用
• 通过electron-packager可以查询打包命令的详细使用说明
• 如果打包到一定百分比停止不动，大多是因为打包命令的某一项填写错误，我就这样折腾了很久，最后成功，所以记录下