Electron入门——程序打包运行测试

       使用Electron框架已经开发了一段时间了，想要将开发的结果打包运行一下。中间看了很多人的介绍，也错了很多次，最后终于成功了，希望写下来能帮助到其他的人。

       目录结构

网上有的人介绍需要把package.json文件拷贝到app里一份，不用拷贝的。

       打包命令

然后就是打包命令了，打包需要先安装electron-packager插件

cnpm install electron-packager --save-dev

然后打包命令是

    electron-packager ./ test3 --arch=x64 --out ./OutApp  --overwrite --icon=./app/icon/eart.ico --electron-version=4.0.2 --download.mirror=https://npm.taobao.org/mirrors/electron/

网上的很多打包命令已经过时了，需要注意，electron-version需要与electron自己的版本对应。这个命令太长，可以将命令配置到package.json文件中，以后打包比较方便。后面会附上我的json文件。

结果

最后在OutApp中可以找到打包结果，点击其中的exe文件，就启动了如下图

注意事项

1.不要使用开发工具如idea的命令窗口运行打包命令，错误原因显示的不详细，而且等待时间太长

2.遇到找不到模块的错误，最好在安装一下模块依赖

3.electron和electron-prebuilt这些最好在devDependencies里

4.最好不要一次打所有平台的包，容易出错，速度也慢

{
  "name": "electronl",
  "version": "1.0.0",
  "description": "",
  "main": "app/index.js",
  "scripts": {
    "test": ".\\node_modules\\.bin\\electron .",
    "start": "chcp 65001 && npm test",
    "hot": ".\\node_modules\\.bin\\gulp watch:electron",
    "packager": "electron-packager ./ test3 --arch=x64 --out ./OutApp  --overwrite --icon=./app/icon/eart.ico --electron-version=4.0.2 --download.mirror=https://npm.taobao.org/mirrors/electron/"
  },
  "author": "hanbo",
  "license": "ISC",
  "dependencies": {
    "electron-connect": "^0.6.3",
    "gulp": "^4.0.0",
    "gulp-util": "^3.0.8",
    "jquery": "^3.3.1",
    "mkdirp": "^0.5.1",
    "proj4": "^2.5.0",
    "request": "^2.88.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "electron-packager": "^13.1.0",
    "electron": "^4.0.2",
    "electron-prebuilt": "^1.4.13",
    "gulp-babel": "^8.0.0"
  }
}