react使用electron打包为桌面应用

#1. 准备

比如说你的react项目写到了一定地步，那就准备开始打包项目吧，先npm安装electron和electron-packager,建议全局安装。

#2. 安装

npm i -g electron electron-packager

#3. 打包

先打包你的react项目，再package.json中增加一行"homepage":"./",

再执行build

npm run build

完事你的根目录下会多出一个文件夹build，如下

这个build就是了，

进去build里面有个index.html文件，双击打开看能不能出效果，可以就没事了，要是不可以的话，可能是你使用了react-router的BroswerHistory，换成HashHistory就可以了。

#4. 增加electron相关文件配置

再build文件夹下新增俩文件  main.js和package.json

const electron = require('electron');
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;
 
// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
 
function createWindow() {
  // 创建一个新的浏览器窗口
  win = new BrowserWindow({width: 1920, height: 1080});
 
  // 并且装载应用的index.html页面
  win.loadURL(`file://${__dirname}/index.html`);
 
  // 打开开发工具页面
  //win.webContents.openDevTools();
 
  // 当窗口关闭时调用的方法
  win.on('closed', () => {
    // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
    // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
    win = null;
  });
}
 
// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
  // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
app.on('activate', () => {
  // 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
  // 窗口打开
  if (win === null) {
    createWindow();
  }
});

{
    "name":"niubi",
    "version":"1.0",
    "main":"main.js",
    "author": {
        "name":"YaSuo"
    },
    "license": "MIT"
}

#5. 打包

build文件夹下运行cmd命令行

electron-packager . niubi --win --out=nice --arch=x64 --overwrite

等一会就好了，在build下会多出一个nice文件夹，去最里面点击.exe执行文件即可显示出桌面应用

注：electron远比这复杂的多，这个就是初级尝试，详细学习还请移步官网