【桌面应用】electron 打包antd项目的详细流程

本文链接：https://blog.csdn.net/bojie5744/article/details/72742309

流程：创建一个electron 项目，把新建的或者已经存在的antd项目编译后的文件复制到electron 项目里面。

1）创建antd项目

cnpm install -g create-react-app
create-react-app  antd-app 
cd  antd-app
cnpm install antd --save

复制并且覆盖下面的内容到App.js里面。

import React, {
    Component
} from 'react';
import {
    DatePicker,
    message,
    Button
} from 'antd';
import 'antd/dist/antd.css';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    show() {
        alert('hellowolrd!');
    }

    render() {
        return ( < center > < Button onClick = { this.show.bind(this) }
            type = "primary" > see you again! < /Button></center > );
    }

}

export default App;

执行npm run start 就可以启动开发模式了，界面如下。
这里写图片描述
执行npm run build是编译项目，文件会生成在build文件夹里面。

2）执行npm run build编译项目。

3）创建electron项目。

$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies
$ cnpm install
$ cnpm install --save-dev   electron-packager

在package.json 文件里面添加build命令。
 ```diff
  "scripts": {
    "start": "electron .",
    +"build":"electron-packager ./ --all --out ./build-app --platform=all --arch=all --overwrite "
  }

Run the app

$ npm start 启动electron应用。ctrl+c关闭。


4）复制antd项目编译后的文件到electron-quick-start文件夹下。复制的内容有static文件夹，index.html文件等，即在antd项目中build文件夹里面所有内容。
修改index.html里面引用的css，js的路径，把/static/XXX.js 改为./static/XXX.js ，其实就是把原来绝对地址的路径改为相对路径。

5）在electron-quick-start目录下，执行npm start就能看到antd项目被加载进去了。

6）打包antd项目。
在命令行执行以下内容，修改ELECTRON镜像为淘宝的地址。
linux or Mac：
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
window：
set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
执行npm run build
就会进行打包所有系统下的桌面应用了。如下图所示。
![这里写图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNTI1MTkyMDU2OTkx?x-oss-process=image/format,png)
![这里写图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNTI1MTkyMzAxNTg4?x-oss-process=image/format,png)