electron+antd进行桌面开发并打包教程

1、初始化工程目录并安装electron，(如果安装巨慢可换成淘宝源cnpm)

npx create-react-app electron-test
cd electron-test
npm install electron electron-builder cross-env --save-dev

2、在src目录下添加main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let mainWindow
function createWindow () {mainWindow = new BrowserWindow({width: 800, height: 600})const startUrl = process.env.ELECTRON_START_URL || url.format({pathname: path.join(__dirname, '/../asset/index.html'),protocol: 'file:',slashes: true});mainWindow.loadURL(startUrl);// 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()}
})

3、在package.json里添加

...
"main": "src/main.js",
"homepage": "./",
"scripts": {"electron": "cross-env ELECTRON_START_URL=http://localhost:3000 electron .",...},
...

4、测试启动

在第一个窗口输入

npm start

在第二个窗口输入

npm run electron

正常情况应该可以看到如下画面：

5、安装antd(如果安装慢可换成cnpm)

• 在第一个窗口输入

npm install antd react-app-rewired babel-plugin-import customize-cra less less-loader --save-dev

• 将package.json的script里的react-scripts替换成react-app-rewired

...
"scripts": {"electron": "cross-env ELECTRON_START_URL=http://localhost:3000 electron .","start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-app-rewired eject"},
...

• 创建文件config-overrides.js

const {override,fixBabelImports,addLessLoader,
} = require("customize-cra");
module.exports = override(fixBabelImports("import", {libraryName: "antd",libraryDirectory: "es",style: true // change importing css to less}),addLessLoader({javascriptEnabled: true,})
);

• 修改App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import { Button } from 'antd';
import './App.css';
class App extends Component {render() {return (<div className="App"><Button type="primary">Button</Button></div>);}
}
export default App;

6、再次启动

在第一个窗口输入

npm start

在第二个窗口输入

npm run electron

不出意外可以看到一个按钮

7、打包成exe

• 编译页面

npm run build
mv build asset

• 并将package.json里面dependencies和devDependencies前端依赖暂时删除，只保留后端依赖

"devDependencies": {"electron": "^7.1.4","electron-builder": "^21.2.0",...
}

• 删除node_modules重新安装

rm -rf node_modules
npm install

• package.json里添加

...
"scripts": {"dist": "electron-builder --win --x64",...},
"build": {"productName": "electron-test","appId": "com.xxx.xxxxx","win": {"target": ["nsis","zip"]}
},
...

• 运行命令(这一步如果下载慢建议翻墙)

npm run dist

• 然后就可以看到dist目录，里面就是生成的exe安装包和zip

8、最后列一下我的一下package.json（注意打包时依赖只保留后端依赖）

{"name": "electron-test","version": "0.1.0","private": true,"dependencies": {},"main": "src/main.js","homepage": "./","scripts": {"dist": "electron-builder --win --x64","electron": "cross-env ELECTRON_START_URL=http://localhost:3000 electron .","start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-app-rewired eject"},"build": {"productName": "electron-test","appId": "com.xxx.xxxxx","win": {"target": ["nsis","zip"]}},"eslintConfig": {"extends": "react-app"},"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies": {"@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","react": "^16.12.0","react-dom": "^16.12.0","react-scripts": "3.3.0","antd": "^3.26.2","babel-plugin-import": "^1.13.0","cross-env": "^6.0.3","customize-cra": "^0.9.1","electron": "^7.1.4","electron-builder": "^21.2.0","less": "^3.10.3","less-loader": "^5.0.0","react-app-rewired": "^2.1.5"}
}