Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行，文末附electron-builder的各种zip没法下载的方案

学习参考：

electron-api-demos

我如下的方式，其实并把Ant Design Pro文件打包到生成的安装包里，因此，安装包=Ant Design Pro+Electron环境

 

ant-design-pro ----> version ：2.3.1

因为网上Ant Design Pro+Electron的资料太少，我就贡献一点经验

 

最近须要讲AntD Pro项目 （如下简称Adp）打包成桌面安装使用，由于个人项目是一个企业业务计算系统，并不会常有需求的更新，所以打包成桌面应用，用户体验更好。

首先，Adp项目和Electron打包分开，就是不要把二者的依赖和配置文件放在一个项目里，这是保持项目的纯粹性，各自专一本身的事情。所以，咱们就须要一个Adp项目，一个Electron打包脚手架。

咱们就以最简单的方式作这件事情，先成功打包一个安装包出来，再逐渐丰富和细化。

步骤：

一、咱们须要把项目变成Electron的专用形式，须要调用umi的API修改webpack配置，使打包的target为electron-renderer，这个很重要，Adp默认按照pro 默认会按照 web 应用来打包的，issues #3346 。

找到：

设置：

 

而后，请到

设置

publicPath: './',

这很重要，不然回报如下错：

Failed to load resource: net::ERR_FILE_NOT_FOUND

 

还要设置：

history: 'hash'

以下：

 

另外，还要改造request.js文件，由于我是用官方封装的request来发送请求的，咱们不如写成配置吧：

config文件夹中新增以下：

 

写入：

export const isBuildForElectron = false
export const baseUrl = 'https://xxxxxxxxxxx.com'

第一个设置是否打包为electron应用，第二个设置接口域名

 

上面的plugin.config.js也要改

 

 if (isBuildForElectron) {
    config.target('electron-renderer');
  }

 

改造util/request.js

 

 

 let url = apiUrl
  if (isBuildForElectron) {
    url = `${baseUrl}${apiUrl}` // 兼容 electron
  }

 

 

 

二、找一个Electron打包的脚手架，快速获取：https://github.com/electron/electron-quick-start，这是一个快速开始，咱们把它看成脚手架用，一点问题也没有

 找到main.js，删掉以下：

 -  mainWindow.loadFile('index.html')

增长以下：

  + mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))

 

修改BrowserWindow的配置

webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      allowRunningInsecureContent: true
}

 

根目录增长ant文件夹，把adp build后的文件放入ant文件夹

 

修改package.json，在package.json中增长build和修改script

 

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    + "pack": "electron-builder --dir",
    + "dist": "electron-builder"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^5.0.0"
  },
  + "build": {
    + "appId": "xxx",
    + "productName": "xxxx系统",
    + "mac": {
      + "category": "your.app.category.type"
    + }
  + }
+ }

 

 执行

npm  run dist

 

PS：

一、对接1和2，使用electron-builder进行打包，使用electron-builder可使得Electron打包变得很简单，固然打包方案不止eb，还有electron-packager，可是前者打包出来的包更体积小

electron-builder的安装步骤和基本使用步骤，看----> npm-->electron-builder-->Quick Setup Guide

https://www.npmjs.com/package/electron-builder

 

二、解决Adp中的请求失败问题，或者说跨域问题：

http://www.javashuo.com/article/p-tvoytjge-et.html

 

 Electron脚手架的package.json

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^5.0.0"
  },
  "build": {
    "appId": "your.id",
    "mac": {
      "category": "your.app.category.type"
    }
  }
}

 

 

3.Electron脚手架打包过程：

 

 

 

 

打包或的文件在项目的dist里，咱们能够看到一些安装包，这就是咱们要的东西了，直接拿来安装便可，目前是默认安到 C:

4.就算不设置target为electron-renderer，用Electron的loadUrl这个API，同样能读取Adp的内容，由于Electron本质就是一个浏览器或者更准确说是一个能够运行JS、HTML、CSS的环境

5.Electron的依赖不太好安装，国内或者香港环境不建议使用yarn和npm，建议使用 cnpm

 

 6.报如下错：

unable to find electron app 

 请看：https://stackoverflow.com/questions/37489543/electron-rebuild-unable-to-find-electron-app

 

7.builder和packer二者的对比： https://segmentfault.com/a/1190000013924153

 

我已上传打包工具 https://github.com/heytheww/electron-build

 

20190806更新：

1.electron-builder的target，设置为nisi时，能够默认带卸载程序，而且能够支持配置安装路径

2.使用pkg.json配置electron-builder很快会失效，我看了一下，官方推荐使用 js配置文件

 

20190823更新

补坑：

1.若是遇到执行 npm run dist时，一直在下载 electron-v5.0.10-win32-ia32 或者 electron-v5.0.10-win32-x64之类的，就去这里找包https://npm.taobao.org/mirrors/electron，手动下载，放到下图图示位置，有一点很草泥马的就是，淘宝镜像的命名是v5.0.1必定要改成v5.0.10，不然electron-builder就会认为没下载。。。转而去下载

 

官方解决指南：

https://electronjs.org/docs/tutorial/installation

 

 

2.一直在下载winCodeSign-2.5.0，其实这个是electron-builder的依赖包，也是手动去github下，而后放到图示位置，注意啊，这个要压缩包一个解压的也要一个，都要放出来

 

最后说一点，以上的踩坑，谷歌一下，每一个人都有本身的办法，好像都能解决问题，也是服了！