Electron Forge集成React Typescript完整步骤

[一、创建Electron Forge项目](#一、创建Electron Forge项目)

一、创建Electron Forge项目

bash 复制代码

npx create-electron-app@latest my-app

选择：typescript、vite、最新版本

bash 复制代码

"start": "electron-forge start",    
"package": "electron-forge package",
"make": "electron-forge make",

项目自带了3个核心脚本命令，publish可以直接忽略掉（基本用不到），

start ：启动项目;

package: 测试打包（开发阶段最常用）

特点：✅ 速度快（比 make 快 50%），适合开发中频繁验证；✅ 产物可直接运行（双击文件夹内的 exe/dmg 即可启动应用），无需安装；✅ 无安装引导、无桌面快捷方式、无卸载功能，仅自己测试用。

make: 生产打包（交付用户必用）

特点：✅ 会根据 electron-forge.config.js 中 makers 配置，生成对应平台的安装包（Windows=exe、Mac=dmg、Linux=deb）；✅ 产物带完整的安装 / 卸载逻辑（如安装时创建桌面快捷方式、卸载时清理文件）；✅ 是最终分发给用户的产物，适合对外交付。

package 和 make 命令均可打包生成 PC 端的安装包文件，但这类命令仅能为当前操作系统打包对应版本的安装包；若需同时完成 Windows、macOS、Linux 三大平台的安装包打包，原本需要配备三台对应系统的电脑，可通过虚拟机、云服务器、多设备部署或云打包平台这几种方式解决。

二、集成React

react核心依赖：

bash 复制代码

yarn add react react-dom

ts项目必装类型：

bash 复制代码

yarn add @types/react @types/react-dom --dev

在/src下创建App.tsx

javascript 复制代码

export default function App() {
  return (
    <div style={{ padding: 20, fontFamily: 'Arial' }}>
      <h1>✅ Electron + React + TypeScript 集成成功</h1>
      <p>基于 Yarn 4.x + Electron Forge + Vite 构建</p>
      <p>{process.env.NODE_ENV}</p>
    </div>
  );
}

在项目根目录下创建index.tsx

javascript 复制代码

import { createRoot } from 'react-dom/client';
import App from './src/App';

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = createRoot(rootElement);
  root.render(<App />);
}

在index.html里加入根节点，配置render为自己的index.tsx的路径

html 复制代码

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>XLODA</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="module" src="/index.tsx"></script>
</html>

yarn run start启动项目，发现启动正常，页面正常。到这里集成react成功。

三、安全相关Warning解决

启动项目后，你可能看到控制台会有这个warning。

解决方案如下：

在index.html中加入

html 复制代码

<meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self';"
    />

完整版：

html 复制代码

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>XLODA</title>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self';"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="module" src="/index.tsx"></script>
</html>

但这个设置可能会影响vite在开发环境的热刷新，生产环境下正常。

所以我们需要对vite进行配置：

引入插件：

bash 复制代码

yarn add @vitejs/plugin-react@^4.2.1 --dev

vite.renderer.config.ts修改如下：

javascript 复制代码

// https://vitejs.dev/config
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production';
  // 核心：开发/生产差异化 CSP 规则
  const cspPolicy = isProd
    ? // 生产环境：严格规则（无 unsafe 项，彻底消除警告）
      `default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self';`
    : // 开发环境：放宽规则（保证 React 热更新/本地调试）
      `default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self' http://localhost:* ws://localhost:*; object-src 'none'; base-uri 'self';`;

  return {
    plugins: [react()],
    // Vite 4.x 原生支持的写法，直接替换 HTML 中的占位符
    transformIndexHtml: (html: string) => html.replace('<%= cspPolicy %>', cspPolicy)
  };
});

这样测试环境用测试环境自己的，生产环境有生产环境的安全配置，安全相关warning完美解决。

四、Typescript相关配置

tsconfig.json的配置：

javascript 复制代码

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] },
    "resolveJsonModule": true,
    "strict": true,
    "types": ["vite/client"],
    "isolatedModules": true,
    "verbatimModuleSyntax": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "dist", "out"],
  "ts-node": {
    "compilerOptions": { "module": "CommonJS" }
  }
}

最终完成electron项目的初始化！