创建项目

yarn create react-app my-app
cd my-app

添加 electron

yarn add -D electron electron-builder cross-env

添加 第三方模块

yarn add antd express

antd 用来测试渲染继承第三方库

express 用来测试主进程第三方库

修改 package.json 文件

package.json

  "description": "create-react-app electron electron-builder dotcoo test",
  "author": "dotcoo <dotcoo@dotcoo.com>",
  "main": "public/electron.js",
  "homepage": ".",

  scripts: {
    "electron": "cross-env NODE_ENV=development electron .",
    "pack": "cross-env NODE_ENV=production yarn run build && electron-builder --dir",
    "dist": "cross-env NODE_ENV=production yarn run build && electron-builder"
  }

  将 dependencies 中的内容剪切到 devDependencies 中,
  这不会影响 react 的打包, react 打包时不是通过 dependencies 来识别依赖包的, 而是 webpack 分析出来的,
  留下 express, 因为 express 不是 react 用到的, 而是我们的 my-app 用到的,
  在 electron-builder 打包的时候会把 dependencies 中的 express 模块会打包到 appa.asar 中,

添加 electron 主进程文件

文件: public/electron.js

// 引入模块
const url = require('url');
const path = require('path');
const { app, BrowserWindow } = require('electron');

// 开发环境
const isDev = process.env.NODE_ENV === 'development';

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win = null;

function createWindow() {
  // 创建浏览器窗口。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 使用 preload 预加载模块, 可以把 nodeIntegration 禁用掉, 在 preload 阶段是可以访问 node 的,
      // 这样做是因为即使启用了 node, webpack 在进行打包的时候也不会识别 node 模块和 electron 模块,
      // nodeIntegration: true,
      // 使用 proload 预加载注入的模块, 参看下方的 preload.js 文件
      preload: path.join(__dirname, './preload.js'),
    },
  });

  // 删除菜单
  // win.removeMenu();

  // 加载index.html文件
  win.loadURL(isDev ? 'http://localhost:3000' : url.format({
    protocol: 'file',
    slashes: true,
    pathname: path.join(__dirname, 'index.html'),
  }));

  // 打开开发者工具
  isDev && 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 渲染进程文件

文件: pubilc/preload.js

// 这里是预加载文件, 即使不开启 nodeIntegration 也可以使用 node 模块,
// 我们将需要的模块, 添加到 window 上, 然后再页面中可以从 window 对象上取到需要的模块.
window.electron = require('electron');
window.fs = require('fs');
window.express = require('express');
// https://www.dotcoo.com/create-react-app-electron-electron-builder

react 中使用 node 模块

文件: src/App.js

引入

import { Button } from 'antd';
import 'antd/dist/antd.css';

打印

console.log(window.electron);
console.log(window.fs);
console.log(window.express);

jsx

<Button type="primary" icon="user">你好</Button>

浏览器查看

启动项目

yarn start

查看浏览器控制台

antd 正常显示

控制台看到三个 undefined, 是正常现象, 因为这里还没有用的 electron 和 node.

使用 electron 查看

执行命令:

yarn run electron

查看控制台, 使用菜单 View - Toggle Developer Tools 打开控制台

antd 正常显示

electron 模块 和 node 内置的 fs 模块都正常打印了

在渲染进程中通过 window.electron 和 window.fs 来访问这两个模块

第三方模块 express 也正常打印了

在渲染进程中通过 window.express 来访问 express 模块

打包 exe 文件查看

执行命令:

yarn run dist

双击 dist\win-unpacked\my-app.exe 文件执行.

antd 正常显示

在控制台可以看到 electron fs 和 express 都正常打印了, 说明打包也成功了.