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