electron hello-world，从安装到打包

最近和c++老师合作了一个桌面应用，了解到了electron，记录一下如何快速做hello world

1，先下载安装electron

npm install electron

2，git下载官方提供的快速入门demo

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

打开之后就能看到客户端了，这里我们不写代码逻辑，官方提供的就是一个hello world，基本的结构都有，完全可以作为自己一个新的项目的 “地基”

打开之后的样子

3，当项目写好之后，就开始打包的步骤，这里打出来的包有两种，一种是文件夹的形式，一种是安装包的形式，先下载打包工具，网上提供的有很多，我选了 electron-builder

下载（这里用npm或者yarn下载都特别慢，我用的淘宝镜像，别的用了还是很慢，不知道为啥）：

npm install electron-builder -D 或 cnpm install electron-builder -D

下载之后可以看到package.json文件中有

4，写好配置（都在package.json文件中配置）

"scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir", //打成文件夹
    "dist": "electron-builder" //打成安装包，实际出来既有文件夹也有安装包
  },

配置build

"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "samll_hat", //包名
    "asar": true,
    "afterPack": "./afterPack.js", //这里的文件会在打包结束后执行，是自己写的文件
    "directories": {
      "buildResources": "build", //默认是build文件夹，这里面可以放一写打包需要的资源之类的，比如：icon
      "output": "dist" // 打包输出的位置
    },
    // windows相关的配置
    "win": {
      "target": [
        {
          "target": "nsis" 
        }
      ],
      "icon": "build/icon.ico",
      "asarUnpack": [
        "src/**",
        "README.md"
      ]
    },
    // nsis的配置指的是安装过程的配置
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true, 生成的安装包是否允许改变安装位置
      "installerIcon": "build/icon.ico",
      "uninstallerIcon": "build/icon.ico",
      "createDesktopShortcut": true,  // 创建桌面图标
      "createStartMenuShortcut": true
    }
  }

5，执行命令

npm run dist 或 yarn dist

打包之后项目多出的dist文件夹是这样的