查资料的时候看到了关于web项目打包的关键词，于是乎我又忍不住职业病去搜索了一些东西……目前看来，Electron、nw.js（原node-webkit）、Hex这几个能给网页打包成exe桌面应用程序，nwjs和Electron基本差不多，Electron是推荐最多的，Hex看起来很古老了，居然是有道发起的，挺厉害。思考了下，还是选择了Electron，这个我也是从来没体验过，正好趁此机会来试试！走起！
以前也搜过如何把html/css/js打包成单个exe，当时技术有限也没能做到，主要是为了把自己做的资料库打包然后分享给小伙伴……因为直接能点击打开，多方便！搜了一圈大多数用C++什么的，苦于自己不会编程就放弃了……现在既然看到了，就来试试吧！

Electron是什么？

Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。嵌入Chromium和Node.js到环境中，可以创建Windows、macOS和Linux的exe应用程序。

准备工作

  • Node.js 最新版
  • 完整的web项目
  • 做好的ICO图标文件

Nodejs设置啥的早弄过就不写了，直接走下一步～

安装

安装Electron

npm install electron --save-dev

安装打包工具

npm install electron-packager -g

下载官方范例

可以下载官方的案例来练习：

// 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
// 进入项目
cd electron-quick-start
// 安装依赖
npm install
// 运行
npm start

修改下 main.js 和 package.json 里面的设置
在项目 index.html 的 <body></body> 之间添加

<script src="./renderer.js"></script>

输入npm start看看效果，确保能运行

命令行

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

参数：

命令说明
sourcedir应用程序源的基本目录
appname应用程序的名称
version打印Electron Packager和Node的版本，以及目标平台和arch，用于错误报告，并立即退出

所有平台

命令说明
all等效于–platform=all –arch=all
app-copyright应用程序版权发行
app-version应用设置的应用版本发布版本
arch架构选择，可选值: ia32, x64, armv7l, arm64, mips64el, universal(通用，可用逗号分隔)
Windows（用于x86、x86_64和arm64体系结构）win32
macOS/Mac App Store（用于x86_64，arm64和通用架构）darwinmas
Linux（适用于x86、x86_64、armv7l、arm64和mips64el架构）
asar将应用程序中的源代码打包到程序中。pass——asar使用默认配置，配置属性–asar.unpackDir=sub_dir
支持的属性包括:
- ordering: 用于文件打包的排序文件的路径
- unpack: 将文件解包到应用程序
- unpackDir: 将目录解包到应用程序
build-version应用程序生成版本
download传递给@electron/get的子选项列表。它们通过点符号指定, 例：–download.cacheRoot=/tmp/cache
支持属性:
- cacheRoot: 缓存的Electron下载目录
- mirrorOptions: 下载备选URL选项
- rejectUnauthorized: 下载时是否要求SSL证书有效，默认为true, 使用–no-download 拒绝检查
electron-version正在打包的电子版本
electron-zip-dir包含Electron ZIP文件的目录的本地路径
executable-name可执行文件的名称，无文件扩展名。默认为appname
extra-resource要复制到应用程序资源目录的文件
icon应用程序图标文件的本地路径
ignore不要打包某个文件夹。如：–ignore=node_modules 可设置–no-prune
no-deref-symlinks确保应用程序源中没有取消对符号链接的引用
no-junk不要忽略打包应用程序中的系统垃圾文件
no-prune不要删除打包应用程序中的devDependencies
out应用程序输出目录，默认为当前目录
overwrite如果平台的输出目录已经存在，则替换它，而不是跳过它
platform要构建哪个平台的应用（Windows/Mac/Linux）可选值: darwin, linux, mas, win32 (如果有多个，则以逗号分隔)
prebuilt-asar预构建asar文件的路径（asar, ignore, no-prune, 或no-deref-symlinks）
quiet不要打印信息或警告消息
tmpdir临时目录。默认为系统临时目录，使用–no tmpdir禁用使用临时目录。

仅限win/mas平台

命令说明
app-bundle-id要在应用程序plist中使用的绑定标识符
app-category-type应用程序类别类型
例如 app-category-type=public.app-category.developer-tools 将应用程序类别设置为“开发者工具”。
darwin-dark-mode-support在打包的应用程序中强制支持Mojave/10.14暗模式
extend-infoa plist file to merge into the app plist
helper-bundle-id要合并到应用程序plist的plist文件
osx-sign（仅限macOS平台）是否签署macOS应用程序包。
可使用–osx-sign自行签名以使用默认配置, 或使用其他配置
例：–osx-sign.identity=”My Name”
支持的属性包括:
- identity: 应包含运行“codesign”时要使用的标识`
- entitlements: 签名时使用的授权路径
- entitlements-inherit: “子女”权利的路径
osx-notarize（仅限macOS平台，需要–osx签名）是否对macOS应用进行公证包装。
例：–osx-notarize.appleId=”foo@example.com“
支持属性包括:
- appleId: 包含你的apple ID用户名/电子邮件
- appleIdPassword: 包含提供的apple ID的密码
- appleApiKey: 包含应用商店连接API密钥
- appleApiIssuer: 包含API密钥的颁发者
protocolURL协议方案，将应用程序注册如下：
例：--protocol=myapp 将注册要打开的应用程序
URLs：myapp://path 此参数需要 --protocol-name
protocol-name通过–protocol指定的URL协议方案的描述性名称`
usage-description关于应用程序如何使用某些macOS功能的可读描述。
支持列表：
- Camera
- Microphone

仅限win32目标平台

命令说明
win32metadata用于设置嵌入到中的应用程序元数据
例：–win32metadata.CompanyName=”Company Inc.”
或 –win32metadata.ProductName=”Product”
支持属性:
- CompanyName (默认值: package.json中的名字)
- FileDescription (默认值: appname)
- OriginalFilename (默认值: renamed exe)
- ProductName (默认值: appname)
- InternalName (默认值: appname)
- requested-execution-level (user, asInvoker, or requireAdministrator)
- application-manifest

范例：

electron-packager mysite --platform=win32 --arch=x64 --out outsite --icon=icon.ico --app-version=0.0.1 --overwrite --ignore=node_modules

这里遇到个坑：
出现错误提示：connect ECONNREFUSED 127.0.0.1:443
百度了下，要设置个环境变量：

变量名：ELECTRON_MIRROR：
变量值：https://cdn.npm.taobao.org/dist/electron/

或者重置registry缓存，有可能也是端口被占用，关闭正在占用的程序，或者重启电脑。

最终打包

ico图标最大尺寸是256x256，可以用Greenfish Icon Editor来绘制图标，也可以百度搜索在线转换ico的网站，直接用制作好的图片转换即可。

刚才通过electron-packager输出打包后，会在目录看到已经生成.exe文件，但是还有很多文件，我们需要再次打包整合成单个exe，这时候可以用到Inno Setup或Enigma Virtual Box来进行最终打包。

我使用的是Enigma Virtual Box，直接封包完毕。原项目大小103MB，最后封装大小440MB……呃……感觉体积也太大了吧！没办法，electron打包出来就这么大……
这图啥呢…就是为了方便大家下载后双击就能点开看！！以前我看一个资料本直接点开就能看，好酷的！占用还很小，大概估计是用C++写的吧…还不如直接打包网页版让用户点html看好了，反正每个人都有浏览器哈哈哈！纯是为了折磨自己而已啊！占这么大的空间没必要啊！愤怒删了！！哼！

后记

electron最后封包会遇到错误提示，感觉npm源也不稳定啊，下次可以考虑用nw.js试试。然后我搜到有一个新项目tauri说是可以创建体积更小的桌面程序，替代electron的产物，这看来很有前景啊，如果发展不错未来或许真的可以替代electron，那就太好了！不过语言是Rust，还是有点门槛的，以后再说吧～
然后又恰巧搜到了一个项目：Nativefier——快速将网站打包成桌面程序 这个看起来不错的样子，不过感觉是将在线网站封包了下，断网了就不能访问了，这个算是另一种快捷方式……
网站打包exe之路任重道远啊，等以后大佬写个工具革新！现阶段还是洗洗睡吧～