如何使用 electron-forge 搭建 React + Ts 的项目

npm init electron-app@latest [project-name] -- --template=[template-name]

npm init electron-app@latest demo -- --template=webpack-typescript

"devDependencies": {
  "@electron-forge/cli": "^7.6.0",
  "@electron-forge/maker-deb": "^7.6.0",
  "@electron-forge/maker-rpm": "^7.6.0",
  "@electron-forge/maker-squirrel": "^7.6.0",
  "@electron-forge/maker-zip": "^7.6.0",
  "@electron-forge/plugin-auto-unpack-natives": "^7.6.0",
  "@electron-forge/plugin-fuses": "^7.6.0",
  "@electron-forge/plugin-webpack": "^7.6.0",
  "@electron/fuses": "^1.8.0",
  "@typescript-eslint/eslint-plugin": "^5.0.0",
  "@typescript-eslint/parser": "^5.0.0",
  "@vercel/webpack-asset-relocator-loader": "1.7.3",
  "css-loader": "^6.0.0",
  "electron": "33.2.1",
  "eslint": "^8.0.1",
  "eslint-plugin-import": "^2.25.0",
  "fork-ts-checker-webpack-plugin": "^7.2.13",
  "node-loader": "^2.0.0",
  "style-loader": "^3.0.0",
  "ts-loader": "^9.2.2",
  "ts-node": "^10.0.0",
  "typescript": "~4.5.4"
},
"dependencies": {
  "electron-squirrel-startup": "^1.0.1"
}

# 运行npm start

Failed to load: ...\...\ele-react-demo\forge.config.ts
An unhandled rejection has occurred inside Forge:
TSError:
1. ⨯ Unable to compile TypeScript:
forge.config.ts:1:34 - error TS2307: Cannot find module '@electron-forge/shared-types' or its corresponding type declarations.

"devDependencies": {
    "@electron-forge/shared-types": "^7.6.0",
    "@electron-forge/maker-base": "^7.6.0",
    "@electron-forge/plugin-base": "^7.6.0",
    "webpack": "^5.97.0",
    "@types/node": "^22.10.1"
}

# 打包
npm run make

.webpack     # 项目编译部分
 ├- main     # electron 部分
 └- renderer # web 部分
node_modules # 项目依赖
package.json

# 安装 React 包
npm install --save react react-dom
# 安装 React 类型支持相关包
npm install --save-dev @types/react @types/react-dom

"compilerOptions": {
  "jsx": "react-jsx"
}

/** src/app.tsx */
import { createRoot } from 'react-dom/client';
import { useState } from 'react';
// 主应用
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Hello React</h1>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
    </>
  );
}
const root = createRoot(document.body);
root.render(<App />);

npm install --save-dev sass sass-loader

// webpack.renderer.config.ts
// ··· ···
// 加入对对应样式文件的解析规则
rules.push({
  test: /\.(sass|scss|css)$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
});
// ··· ···

/* index.scss */
body {
  h1 {
    color: #68945c;
  }
}

const config: ForgeConfig = {
  packagerConfig: {
    asar: true,
    // 通过如下配置项，配置需打包的静态资源
    // 该配置会将对应资源复制到打包后的 resource 目录下
    // 这里表示复制 src/assets 整个目录
    // 打包后在 out/**-win32-x64/resource 目录下，会有一个 assets 目录
    extraResource: ['./src/assets']
  }
}

// src/app.tsx
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Hello React</h1>
      // 通过相对路径
      // 打包后的结构可看上方解答
      // web 部分在 resource/app.asar/.webpack/renderer/main_window
      // 资源部分在 resource/assets
      <img src="../../../../assets/images/cat.jpg" />
      // 也可以使用 path 拼接路径，如：path.join(process.resourcesPath, 'assets/images/cat.jpg')
      // process.resourcesPath 表示 resource 目录
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
    </>
  );
}

npm install --save-dev copy-webpack-plugin

// src/app.tsx
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Hello React</h1>
      // 使用静态资源
      <img src="./static/images/cat.jpg" />
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
    </>
  );
}

// Loading 窗口
let loadingWin: BrowserWindow;
// Loading 窗口的渲染文档，即上侧的 loading 效果
const loadingUrl = path.join(__dirname, '../renderer/static/loading.html');
/** Loading 窗口 */
const createLoading = () => {
  return new Promise((resolve, reject) => {
    loadingWin = new BrowserWindow({
      // 一开始是否显示
      show: false,
      width: 512,
      height: 512,
      frame: false, // 无边框(窗口、工具栏等)，只包含网页内容
      transparent: true // 窗口是否支持透明，在做高级效果时最好为 true
    });
    // 当窗口显示时
    loadingWin.once('show', () => {
      resolve(true);
    });
    // 配置窗口渲染文档
    loadingWin.loadFile(loadingUrl);
    // 显示 Loading 窗口
    loadingWin.show();
  });
};
/** 主窗口 */
const createWindow = () => {
  // 创建渲染窗口
  const mainWindow = new BrowserWindow({
    // 窗口图标
    // icon: './assets/logo/logo.ico',
    height: 600,
    width: 800,
    // 一开始隐藏
    show: false,
    webPreferences: {
      // 预加载脚本
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
    }
  });
  // 主窗口准备还显示
  mainWindow.once('ready-to-show', () => {
    // 隐藏 Loading 窗口
    loadingWin.hide();
    // 关闭 Loading 窗口
    loadingWin.close();
    // 展示 主窗口
    mainWindow.show();
  });
  // 为窗口加载 index.html
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
  // 打开开发者工具
  // mainWindow.webContents.openDevTools();
};
// 当 Electron 初始化完成并准备创建渲染窗口(mainWindow)时调用
// 某些 API 只能在此事件发生后使用
// app.on('ready', createWindow);
app.on('ready', async () => {
  // 先创建 Loading 窗口
  await createLoading();
  // 再创建 主窗口
  createWindow();
});

# 安装依赖
pnpm install
# 运行
npm start
# 打包
npm run make