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

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"
  }
}