使用的版本
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