Electron Forge、React 创建

使用的版本

1、创建Electron

#创建react项目
npx create-react-app very-pdf --use-npm
cd very-pdf

#添加electron-forge
npx @electron-forge/cli import

#添加环境监测
npm i electron-is-dev

npm i -D concurrently wait-on

npm install cross-env

2、public添加electron.js

const { app, BrowserWindow } = require('electron');
const isDev = require("electron-is-dev");
const path = require('path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
// and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );

  // Open the DevTools.
  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: "detach" });
  }
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

3、修改package.json以下地方（没有删除）

{  
"main": "public/electron.js",
"scripts": {
    "dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:3000 && electron .",
    "start": "react-scripts start",
    "package": "react-scripts build && electron-forge package",
    "make": "react-scripts build && electron-forge make"
    }
}

在npm start之前传递BROWSER=none选项将阻止我们的 React 应用程序启动后启动常规浏览器选项卡。如果我们现在运行npm run dev,那么我们将能够看到使用 Electron 而不是在浏览器窗口中运行的 React 应用程序

4、运行

npm run dev