Electron+React+Ant-Design 构建初始化应用

参考：

https://www.imooc.com/article/39978

https://www.jianshu.com/p/20817ba6041d

Electron：作为Native支持的项目搭建

React：作为前端界面框架

Ant-Design作为UI库

安装Electron

使用npm的方式进行全局安装，因为electron有自己的命令行工具，所以使用全局安装

electron安装时会因为链接地址无法访问进而无法安装，需要使用npm的代理模式进行安装

全局安装electron并指定版本号，以下方式进行安装时在单独的cmd窗口中执行即可，创建项目工程后需单独再次进行安装引入：

npm install electron@3.0.4 -g

安装完成后输入以下命令进行验证安装是否成功，该命令返回安装版本号：

electron -v

创建React项目

使用Facebook官方的构建工具create-react-app进行构建

先要进行全局安装create-react-app：

npm install create-react-app -g

创建React项目工程：

create-react-app my-app

进入项目根目录并启动，如能正常启动，在浏览器看到react的欢迎页面，则说明项目创建成功

#进入根目录
cd my-app

#启动
yarn start

引入Ant-Design

Ant-Design官网：https://ant.design/index-cn

推荐使用yarn包管理工具

全局安装yarn：

npm install yarn -g

使用yarn引入ant-design

yarn add antd

Ant-Design高级配置

使用ant-design的高级配置进行配置，使其进行按需加载，官网介绍地址：https://ant.design/docs/react/use-with-create-react-app-cn

全局加载 antd 组件的样式（对前端性能是个隐患）

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

引入 react-app-rewired

yarn add react-app-rewired --dev

修改 package.json 里的启动配置。

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理）

yarn add babel-plugin-import --dev

现在我们尝试修改 config-overrides.js 文件。

+ const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
+   config = injectBabelPlugin(
+     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
+     config,
+   );
    return config;
  };

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块。

import React, { Component } from 'react';
- import Button from 'antd/lib/button';
+ 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;

最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。

以下命令为设置自定义主题用

yarn add react-app-rewire-less --dev

集成Electron

引入electron，使用cnpm会快一些

cnpm i -D electron@3.0.4
#or
cnpm i -D electron@latest

在根目录下创建main.js文件，文件内容如下：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
const pkg = require('./package.json')
// 保持一个对于 window 对象的全局引用，如果你不这样做， 
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭 
let win
function createWindow() {
    // 创建浏览器窗口。 
    win = new BrowserWindow({ width: 800, height: 600 })
    // 然后加载应用的 index.html。 
    // package中的DEV为true时，开启调试窗口。为false时使用编译发布版本 
    if (pkg.DEV) {
        win.loadURL('http://localhost:3000/')
    } else {
        win.loadURL(url.format({
            pathname: path.join(__dirname, './build/index.html'),
            protocol: 'file:',
            slashes: true
        }))
    }
    // 打开开发者工具。 
    // win.webContents.openDevTools() 
    // 当 window 被关闭，这个事件会被触发。 
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话， 
        // 通常会把多个 window 对象存放在一个数组里面， 
        // 与此同时，你应该删除相应的元素。 
        win = null
    })
}
// Electron 会在初始化后并准备 
// 创建浏览器窗口时，调用这个函数。 
// 部分 API 在 ready 事件触发后才能使用。 
app.on('ready', createWindow)
// 当全部窗口关闭时退出。 
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， 
    // 否则绝大部分应用及其菜单栏会保持激活。 
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时， 
    // 通常在应用程序中重新创建一个窗口。 
    if (win === null) {
        createWindow()
    }
})
                // 在这文件，你可以续写应用剩下主进程代码。 
                // 也可以拆分成几个文件，然后用 require 导入。 
                // 在这里可以添加一些electron相关的其他模块，比如nodejs的一些原生模块 
                // 文件模块 
                // const BTFile = require('./sys_modules/BTFile') 
                // BTFile.getAppPath() 

在package.json中添加以下命令

"main": "main.js",
"homepage": ".",
"DEV": true,

在package.json文件中，添加electron的启动命令，如下：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
+    "estart": "electron ."
},

启动程序

首先需要启动react的程序

yarn start

再次启动electron程序

yarn estart