在这里使用electron的官方例子做打包示例
首先，使用git下载官方的quick-start示例，然后进入electron-quick-start目录下npm install，安装依赖，这里下的包比较大，根据个人网络情况，建议使用cnpm淘宝源来下。
关于示例中的文件：
1. index.html这个就不用多说了，就是html页面；
2. main.js就是electron的应用入口；
3. package.json就是安装依赖及配置信息
4. 启动示例直接进到目录下执行electron main就可以打开了，也可以使用gulp来做启动，具体网上有使用VScode+gulp的例子
这里详细说下使用electron-packager打包：
1. 项目根目录下建议建两个文件夹，一个app用来放项目所有的代码以及静态文件等，另外一个dist用来放打包后的包，我这里是这样去做的；
2. 将之前的main.js和index.html放到app文件夹下，然后在app下新建一个package.json，使用这个来做项目依赖管理，外面那个package.json只用来做打包应用；
目录结构
3. 修改app下的package.json ，将main属性改为main.js,在这里注意你自己的文件路径
app/package.json
4. 修改根目录下的package.json文件，在此之前先将electron-packager安装到你的根目录下的electron-quick-start/node_modules中
打包配置
5. 打包不同平台下的配置不完全相同，可以在网上搜搜有很多讲解这些信息是干嘛的，注意在打包时icon图标信息最好有，否则有可能会打包失败，我刚开始好几次打包失败，error信息就报的这块，在打包各个平台时还会下载一些针对各个平台的依赖，所以在第一次打包时保持网络OK
6. package.json配置完成后就可以在命令行里面输入相对应的命令进行打包了
打包完成
windows下打包后运行
这里总结一下之前使用electron的一些问题：
1. 写代码的时候如果考虑到全平台的使用，虽然electron可以打造跨平台的应用，但是前提是你你在代码中做了相对应的处理，比如使用node在操作linux下面命令以及文件读取和windows下有所不同，linux下文件有link格式，我当时写读取目录树的时候就用错方法导致将所有link当成文件夹，进入死循环，这只是一个例子，还要好多坑
2. elelctron-packager打包只是打包成各个平台下可执行文件，并不是安装包，如果需要打包成安装包之类的可以参考electron-builder
3. 打包成功后执行如果直接报错，这里如果你的代码没有问题的话，有很大的原因是你的启动文件main.js或者其他文件的路径出错，仔细检查路径，修改后重新打包即可
4. 大家可以在electron的中文网上面加electron的交流群来交流学习关于electron的问题
文中只是本人使用过程中总结出来的问题，如有错误欢迎指正。
网友评论