Electron打包React构建桌面应用

一、Electron简介
  Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用程序的框架。这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行。
  在目前浏览器和移动端盛行的互联网环境下，跨平台的桌面应用开发，也为前端提供了一个新分支方向。

二、搭建准备
1、检查git和node是否安装完成

git --version
node -v
npm -v

2、搭建React
  安装create-react-app

npm install -g create-react-app

  创建my-electron-app项目

create-react-app my-electron-app

  启动项目

cd my-electron-app && npm start

3、安装electron包

npm i --save-dev electron

三、创建基本应用程序
  首先需要了解下Electron，用Electron开发应用程序就像构建一个带有网页界面的Node.js应用程序。同样使用package.json文件作为主入口，主脚本指定了运行主进程的 Electron应用程序的入口，这里是main.js 文件。
1、创建main.js文件

// 导入app、BrowserWindow模块
// app 控制应用程序的事件生命周期。事件调用app.on('eventName', callback)，方法调用app.functionName(arg)
// BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app
// Electron参考文档 https://www.electronjs.org/docs
const { app, BrowserWindow, nativeImage } = require('electron');
   const url = require('url');
   const path = require('path');

function createWindow () {
  let mainWindow = new BrowserWindow({
    width: 800, // 窗口宽度
    height: 600, // 窗口高度
    title: "Electron", // 窗口标题,如果由loadURL()加载的HTML文件中含有标签