electron 打包antd项目的详细流程

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

1）创建antd项目

cnpm install -g create-react-appcreate-react-app  antd-app cd  antd-appcnpm 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
就会进行打包所有系统下的桌面应用了。如下图所示。