electron 打包antd项目的详细流程

流程： 创建一个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

就会进行打包所有系统下的桌面应用了。如下图所示。