Electron打包Web代码成为桌面应用

Electron是什么就不介绍了，最快了解的方式，就是上手做个demo。

1. 下载官方Demo
   Electron-Demo

2. 安装electron和安装demo所需组建的命令列

# npm install electron --save-dev --save-exact
# git clone https://github.com/electron/electron-quick-start
# cd electron-quick-start
# npm install
# npm start

3. 植入代码

直接把打包好的Web代码，放入项目中，覆盖掉根目录下的index.html入口文件。

4. 测试
   在项目根目录下，运行：

# npm start

有问题根据提示调试问题，没问题下一步。

5. 打包

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：可选选项
• icon：指定应用的图标(Mac 为 .icns 文件，Windows 为 .ico 或 .png)

方式有几种，我建议如下：
5.1 安装electron-packager

# npm install --save-dev electron-packager

5.2 修改配置文件
项目根目录下面的 package.json添加：

"packager": "electron-packager ./ 你的应用名称 --all --out ./OutApp --version 1.0.0 --overwrite --icon=./你的icon路径",

5.2 运行命令

# npm run-script packager

然后在OutApp下，可以找到对应的版本。

我的配置文件示例

6. 关于替换ico

注意：指定应用的图标(Mac 为 .icns 文件，Windows 为 .ico 或 .png)
在Mac生成icns文件有个在线网站推荐：
png转icns
click browse 上传文件，选择格式下载即可。

大功告成~!