如何使用 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