electron 打包_Electron结合React开发桌面应用

React 结合 Electron 开发桌面应用入门

Electron 是 Github 发布的跨平台桌面应用开发工具，它支持使用 web 技术来开发桌面应用，即你可以使用 Html+css+JavaScript 来开发桌面应用，而不用学习新的桌面端开发语言。Electron 的图形界面渲染采用 Chromium 浏览器的内核实现，但又能通过 Node.js 调用丰富的原先操作系统 API。本文着眼于 Electron 结合 React 的开发实践。

Electron 快速开始

首先，安装 electron

npm install --save-dev electron

根据 Electron 官方的electron-quick-start，创建 Electron 应用最基础的三个组成部分:

• main.js 用于控制应用主进程
• index.html 用于控制渲染进程
• package.json 项目配置

这里的主进程和渲染进程是 Electron 中的两个进程。主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

index.html这里不多说，就是一个网页文件。main.js中代码大致是这样的：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 并且为你的应用加载index.html
  win.loadFile('index.html');

  // 打开开发者工具
  win.webContents.openDevTools();
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

其中win.loadFile('index.html')用于窗口应用加载网页文件，即主进程和渲染进程的联通。

既然这样，我们是不是可以将使用 React 开发的单页应用打包后的index.html作为渲染的主页？答案是肯定的。

package.json:

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "electron": "electron ."
  }
}

启动应用：

yarn electron

React 结合 Electron

这里 React 应用采用 webpack 构建。webpack 中对于 electron 应用有提供支持

• 开发模式

webpack 的配置中加一条：

module.exports = {
  target: 'electron-renderer'
};

表示构建完成的项目用于 electron 渲染。

package.json添加一条启动 react 应用的脚本

{
  "scripts": {
    "electron": "electron .",
    "start-renderer": "webpack-dev-server --config webpack.dev.js",
    "build-react": "webpack --progress --config webpack.react.js"
  }
}

然后main.js做相应修改

// 加载应用----适用于 react 项目
win.loadURL('http://localhost:3000/');

启动 React：

yarn start-renderer

启动 Electron

yarn electron

这样 react 项目的热更新也能应用到 electron 项目中。

• 生成模式

webpack 的配置中加一条：

module.exports = {
  target: 'electron-preload'
};

yarn build-renderer 打包 react 应用

main.js做相应修改

win.loadFile('./dist/index.html');

然后使用electron-builder打包成客户端应用。