我是一个初学者与电子。我试图获得电子应用程序的.exe文件。我开始创建一个React应用程序与npx create-react-app my-app --template typescript。然后我安装了以下软件包

cd my-app
npm install @types/electron-devtools-installer electron-devtools-installer electron-is-dev electron-reload
npm install -D concurrently electron electron-builder wait-on cross-env

字符串
我的react应用程序有一个index.tsx文件，看起来像这样，我直到现在才使用index.html：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Element2 from "./components/element2";
import Element1 from "./components/element1";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="path2" element={<Element2/>} />
          <Route path="path1" element={<Element1 />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

型
我对package.json做了一些修改，看起来像这样：

{
  "name": "translationsapp",
  "homepage": ".",
  "main": "build/electron/main.js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.14",
    "@mui/material": "^5.14.14",
    "@npm-iav-frontend/iav-frontend-framework": "^11.0.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/electron-devtools-installer": "^2.2.4",
    "@types/jest": "^27.5.2",
    "@types/react": "^18.2.28",
    "@types/react-dom": "^18.2.13",
    "electron-devtools-installer": "^3.2.0",
    "electron-is-dev": "^2.0.0",
    "electron-reload": "^2.0.0-alpha.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "electron-builder install-app-deps",
    "electron:dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://127.0.0.1:3000 && tsc -p electron -w\" \"wait-on http://127.0.0.1:3000 && tsc -p electron && electron .\"",
    "electron:build": "npm run build && tsc -p electron && electron-builder"
  },
  "build": {
    "extends": null,
    "files": [
      "build/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@types/node": "^20.8.7",
    "concurrently": "^8.2.2",
    "cross-env": "^7.0.3",
    "electron": "^27.0.1",
    "electron-builder": "^24.6.4",
    "wait-on": "^7.0.1"
  }
}

型
我还添加了一个名为electron的文件夹，其中包含两个文件main.ts和tsconfig.json，如下所示：

// main.ts
import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as isDev from 'electron-is-dev';
import installExtension, { REACT_DEVELOPER_TOOLS } from "electron-devtools-installer";

let win: BrowserWindow | null = null;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  console.log(`this is the link:${__dirname}/../index.html`)
  if (isDev) {
    win.loadURL('http://localhost:3000');
  } else {
    // 'build/index.html'
    win.loadFile(`${__dirname}/../index.html`);
  }

  win.on('closed', () => win = null);

  // Hot Reloading
  if (isDev) {
    // 'node_modules/.bin/electronPath'
    require('electron-reload')(__dirname, {
      electron: path.join(__dirname, '..', '..', 'node_modules', '.bin', 'electron'),
      forceHardReset: true,
      hardResetMethod: 'exit'
    });
  }

  // DevTools
  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));

  if (isDev) {
    win.webContents.openDevTools();
  }
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

\\tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "outDir": "../build", // Output transpiled files to build/electron/
    "rootDir": "../",
    "noEmitOnError": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

在配置并使用npm run electron:build运行构建之后，我的项目的最终结构如下所示：

my-app/
├── package.json
│
## render process
├── tsconfig.json
├── public/
├── src/
│
## main process
├── electron/
│   ├── main.ts
│   └── tsconfig.json
│
## build output
├── build/
│   ├── index.html
│   ├── static/
│   │   ├── css/
│   │   └── js/
│   │
│   └── electron/
│      └── main.js
│
## distribution packages
└── dist/
    ├── win-unpacked/
    └── translationsapp Setup 0.1.0.exe
    └── other files

型
使用npm run electron:dev在开发模式下运行会打开electron应用程序，并在http://localhost:3000上呈现类似于web上的所有内容。另一方面，运行构建win.loadFile(${__dirname}/../index.html)会返回一个空白的UI。控制台不会显示任何错误。启动.exe文件也是一样的。这是我在结束时得到的x1c 0d1x我不明白什么是错误，最重要的是，如果没有错误显示。感谢您的帮助！！