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
// ··· ···
// 加入對對應樣式文件的解析規(guī)則
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,
    // 通過如下配置項，配置需打包的靜態(tài)資源
    // 該配置會將對應資源復制到打包后的 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>
      // 使用靜態(tài)資源
      <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 = () => {
  // 創(chuàng)建渲染窗口
  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);
  // 打開開發(fā)者工具
  // mainWindow.webContents.openDevTools();
};
// 當 Electron 初始化完成并準備創(chuàng)建渲染窗口(mainWindow)時調用
// 某些 API 只能在此事件發(fā)生后使用
// app.on('ready', createWindow);
app.on('ready', async () => {
  // 先創(chuàng)建 Loading 窗口
  await createLoading();
  // 再創(chuàng)建 主窗口
  createWindow();
});

# 安裝依賴
pnpm install
# 運行
npm start
# 打包
npm run make