electron+antd詳細教程

第一步：

要作一個electron項目，理論上咱們應該從electron-quick-start開始，就是說咱們須要以下3個文件:

• package.json，node工程最基本的要求，相似於Java的pom.xml
• main.js 建立窗口，工做在electron的主進程
• index.html 頁面，工做在electron的渲染進程

但因爲咱們要使用antd, antd基於react，它是一個react工程，因此咱們從最簡單的react工程
create-react-app開始，爲何不用antd的腳手架？官方說這個腳手架只是作demo用，我用antd-init試了一下，發現package.json裏東西太多了，並且生成的代碼有點莫名其妙，好比index.html裏引入了common.js，項目里根本就沒有common.js啊，這個腳手架的文檔說的也太簡單，因此我就不用它了。

在桌面上單擊鼠標右鍵（要同時按住shift鍵），選擇「在此處打開Power Shell窗口(S)」，運行

npx create-react-app dry

注意：

• npx要求npm5.2+，並且安裝路徑不能有空格，若是你的node已經安裝在Program Files下了，先全局安裝腳手架npm install create-react-app -g， 而後再建立工程create-react-app dry。
• Win10最好使用Power Shell， 之後都不要再用cmd了,用cmd有些包會安裝失敗，由於有些腳本執行不了

通過這一步咱們立馬就有了一個node工程，並且是開箱即用的react工程。
react的腳手架幫咱們作了不少工做，而且把webpack的不少配置文件都隱藏了起來，項目看起來很是清爽。若是因爲某種緣由你必需要修改默認的配置，你能夠把默認的配置文件「噴」出來。執行npm run eject後你就會看到項目裏多了不少配置文件。要注意腳手架幫你把配置文件整齊的放在了一個抽屜裏，你把它倒出來以後又以爲太亂了，想放回去，這就難辦了。
通常狀況下咱們是不須要eject的，若是你非要eject，請三思。

第二步

如今package.json, index.html都有了，還差一個main.js。

從electron-quick-start拷貝一份main.js，放在src目錄下：

將mainWindow.loadFile('index.html')修改成
mainWindow.loadURL('http://localhost:3000')，注意改成loadURL。
react項目須要編譯後才能生成靜態文件的，開發時咱們須要啓動node server。
因此這裏要改爲URL,內容以下：

const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {

  mainWindow = new BrowserWindow({width: 800, height: 600})

  mainWindow.loadURL('http://localhost:3000')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

還須要

• 在package.json里加一句"main": "src/main.js",, main.js是electron的啓動腳本，在這裏建立了一個窗口並加載頁面。
• 在scripts里加一句"electron": "electron ."

哦，咱們還沒安裝electron呢，如今來安裝它：

npm install electron --save-dev

注意：別用cnpm安裝，否則打包的時候會卡在那裏不動，切記。

好了，咱們先來測試一下，在dry下啓動兩個Power Shell， 先運行
npm run start（或者npm start），啓動好了在另外一個shell窗口裏運行npm run electron。

不出意外，你將看到以下畫面：

若是你看到的是一片空白。 點擊"View >> Toggle Developer Tools",控制檯輸出
Not allowed to load local resource: file:///C:/Users/XXX/Desktop/dry/index.html。請檢查main.js文件，應該是loadURL,而不是loadFile。

第三步

開始添加antd，也能夠直接看官方文檔在 create-react-app 中使用：

①先停掉剛纔的服務，連續按3次Ctrl C。
②npm install antd --save
③爲了能夠按需加載，咱們還須要安裝兩個東西：
npm install react-app-rewired --save
npm install babel-plugin-import --save
④ package.json的scripts裏將react-scripts替換成react-app-rewired。
⑤在項目根目錄裏建立config-overrides.js,內容以下：

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
    config,
  );
  return config;
};

⑥測試，跟以前同樣，分別運行npm run start和npm run electron。不出意外你將會看到一個按鈕：

試着將"Button",改成"Button666",能夠看到electron會自動刷新。按鈕顯示"Button666"。
到這裏就基本告一段落了，可是有些地方咱們須要改進一下。

第四步

1. 每次都要啓動2個進程豈不是很麻煩？
2. 我想調試主進程的代碼怎麼辦？
3. 我不想使用默認的端口怎麼辦？
4. 測試的時候使用的是localhost,打包的時候怎麼辦？
5. 怎麼打包？
6. 怎麼加一個icon？
7. require('xxx')不起做用

這篇文章裏用了foreman來管理進程，是個很聰明的方法，能夠解決第1個問題，可是沒辦法解決第2個問題。若是Devtron還能夠用的話，那麼用foreman會是個很是好的方法，惋惜Devtron這個項目不更新了。

其實前2個問題能夠一塊兒解決，就是使用VS Code:

假設你已經安裝好了VS Code, "File >> Add Folder to Workspace"，選擇桌面上的dry文件夾。(dry=Do not Repeat Yourself)。
而後"Terminal >> Configure Default Build Task..."，選擇 "npm: start",會自動生成一個.vscode文件夾和一個tasks.json。

在type上面添加一行："label": "antd", (重要)
在group下面添加一行："isBackground": true。 (重要)，
內容以下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "antd",
            "type": "npm",
            "script": "start",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "isBackground": true
        }
    ]
}

VS Code運行的時候會一直等到task完成後纔會啓動electron。這是須要的，否則electron會啓動失敗。
isBackground的意思是讓node 服務一直在後臺運行。關閉electron後，netstat -ano | findstr 3000你會看到node服務仍然在運行。

點擊VS Code左側"Debug(Ctrl+Shift+D)"按鈕，而後點擊"Configure or Fix 'launch.json'"，選擇"Node.js"， 會自動生成一個launch.json。將這個文件的內容替換成：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "preLaunchTask": "antd"
    }
  ]
}

點擊"Start Debugging"，你能夠看到electron出來了。
在createWindow函數裏打一個斷點再次點擊"Start Debugging"，你會看到，程序在斷點處停下來了。唿，小功告成。

如今來解決第3個問題。

再這以前你要把佔用3000端口的進程殺掉。
netstat -ano | findstr 3000找到 pid 19420,
而後taskkill /pid 19420 -t -f

方法很簡單，就是在運行npm run start的時候設置環境變量PORT，將端口傳進去。windows和*nix平臺設置環境變量的方法不同，爲了跨平臺咱們須要安裝一個包：

npm install cross-env --save-dev

將package.json裏scripts的start命令替換成"start": "cross-env PORT=5000 react-app-rewired start"。小功告成。

第4個問題

main.js裏添加2句：

const path = require('path')
const url = require('url')

並將mainWindow.loadURL替換成以下：

const startUrl = process.env.ELECTRON_START_URL || url.format({
  pathname: path.join(__dirname, '/../build/index.html'),
  protocol: 'file:',
  slashes: true
});
mainWindow.loadURL(startUrl);

在package.json裏添加一句： "homepage": "./" （很是很是重要）

若是不設置這個屬性，編譯後會輸出以下信息，

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

能夠看看編譯後的build/index.html裏，PUBLIC_URL被替換成了"/"， <link rel="manifest" href="/manifest.json">
打包後運行dry.exe只會顯示一片空白。

react腳手架假設你的應用是放在web服務器的根目錄或者子路徑下的。這裏設置 "homePage":"./"，就表示咱們的項目是放在當前目錄。
設置這個之後，publicPath的值就是"./", 編譯的時候會把這個傳給webpack，打包後electron才能正確加載。
參考文檔的PUBLIC_URL

在launch.json裏添加一句：

"env":{"ELECTRON_START_URL":"http://localhost:5000"}

你會看到如今的端口變成5000了，而且我們的main.js能「感知」到是不是dev模式。

第5個問題

①先安裝打包工具npm install electron-packager --save-dev
②而後編譯 npm run build， 會生成一個build文件夾，優化後的靜態資源(html和js)都放在這裏了。
③添加打包命令。很簡單，直接從electron-api-demos的package.json拷貝一下就完事了。

稍做修改，咱們生成64位的exe文件，而且將資源打包一下,文件輸出路徑爲當前目錄的output目錄。指定exe的名稱爲dry。
在package.json的scripts裏添加以下：

"package:win": "electron-packager ./ dry --out ./output --overwrite --asar=true --prune=true --platform=win32 --arch=x64",

④在dry文件夾下新建assets/app-icon/win目錄，而後將準備好的app.ico文件放在這裏
⑤執行npm run package:win

第6個問題

很簡單，在「package:win」里加一句--icon=assets/app-icon/win/app.ico。 ico文件能夠用.png文件在線轉。

第7個問題

在渲染進程裏使用window.require，好比：
const mysql = window.require('mysql2');，
var ipcRenderer = window.require('electron').ipcRenderer;

參考大神的文章末尾

可能遇到的問題

若是你使用antd的腳手架，而且執行antd-init的時候報以下錯誤：
antd-init : 沒法將「antd-init」項識別爲 cmdlet、函數、腳本文件或可運行程序的名稱。，請確保環境變量Path裏配置了全局包目錄：D:\nodejs\node_global

爲何不用Photon或者React-Desktop？

2個我都試過了，效果並很差。尤爲用photon,你可能須要require.js之類的來實現按需加載。綁定事件還得用原生的js來寫。更麻煩的是之後沒辦法添加插件。
React-Desktop功能太少，很差用。並且它的Segmented Control組件的樣式很差。作桌面小工具不須要菜單欄，這個時候Tab組件就很是重要，因此我放棄
React-Desktop了。
用antd是最爽的，文檔清楚，組件豐富，可擴展性也強。

Demo地址

dry.zip