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下，而後放到圖示位置，注意啊，這個要壓縮包一個解壓的也要一個，都要放出來

 

最後說一點，以上的踩坑，谷歌一下，每一個人都有本身的辦法，好像都能解決問題，也是服了！