开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载本指南围绕 Electron Forge 官方提供的 Webpack TypeScript 项目模板展开讲解如何通过一条命令初始化一个主进程 渲染进程双 webpack 构建、TypeScript 开箱即用的 Electron 应用并深入剖析模板生成的forge.config.mts、webpack 配置文件、tsconfig 与主进程/渲染进程代码之间的协作关系。阅读本文后你将能够独立初始化、理解并二次配置该模板掌握 Electron Forge Webpack 插件electron-forge/plugin-webpack的典型用法。模板能为你解决什么要让 Electron 与 webpack、TypeScript 协同工作通常需要手工做三件事搭建两套 webpack 配置主进程一套、渲染进程一套、配置 ts-loader 与类型检查、在源码中处理 webpack 插件注入的入口路径。该模板把这一切预置完成只要执行一次初始化命令就能得到一份带合理 TypeScript 默认配置的可用工程——这正是文档中with sane TypeScript configuration defaults所描述的核心价值。模板本身位于仓库的 packages/template/webpack 目录其实现类 WebpackTemplate.ts 继承自BaseTemplate负责把 tmpl 下的文件按 TypeScript / JavaScript 两种变体复制并改写进新项目。快速开始初始化一个新项目文档给出的初始化命令如下npx create-electron-applatest my-new-app --templatewebpack-typescript命令执行后会生成my-new-app目录其中包含模板预置的 webpack 与 TypeScript 配置。版本提示以当前仓库源码为准从 find-template.ts 的实现来看webpack-typescript这种独立的旧式短名模板已不再存在CLI 会抛出迁移提示The webpack-typescript template no longer exists. Use --template webpack --typescript instead.因此当前推荐使用统一后的写法npx create-electron-applatest my-new-app --templatewebpack --typescript两种写法最终都落到同一个WebpackTemplate--typescript时启用options.typescript分支。对应关系可参考 find-template.spec.ts 中[webpack-typescript, webpack]的测试断言。初始化完成后在生成的目录里执行npm start即可启动开发模式。有关 Electron Forge 专属的配置项参见 Webpack Plugin 文档。生成的项目结构以 TypeScript 变体为例模板会生成如下文件完整清单见 tmpl 目录并由 WebpackTemplate.spec.ts 逐一断言文件作用forge.config.mtsElectron Forge 配置文件注册 makers、Webpack 插件与 Fuseswebpack.main.config.ts主进程 webpack 配置webpack.renderer.config.ts渲染进程 webpack 配置webpack.rules.ts共享的 loader 规则原生模块、ts-loader 等webpack.plugins.tsfork-ts-checker-webpack-plugin 类型检查插件tsconfig.jsonTypeScript 编译配置src/main.ts主进程入口src/renderer.ts渲染进程入口src/preload.tspreload 脚本src/declarations.d.ts为 webpack 魔法全局变量提供的类型声明src/index.html、src/index.css页面与样式注意package.json的main字段指向.webpack/main/index.cjs这是因为 Webpack 插件会把主进程与 preload 打包为 CommonJS 产物.cjs扩展名详见 webpack.mdx。深入 forge.config.mts插件与打包配置模板生成的 forge.config.mts 是理解整个构建链路的关键其核心结构如下import { WebpackPlugin } from electron-forge/plugin-webpack; import { mainConfig } from ./webpack.main.config; import { rendererConfig } from ./webpack.renderer.config; const config: ForgeConfig { packagerConfig: { asar: true, // 以 ASAR 归档打包应用 }, rebuildConfig: {}, makers: [ // 平台安装包生成器 new MakerSquirrel({}), // Windows new MakerZIP({}, [darwin]), // macOS new MakerRpm({}), // Linux RPM new MakerDeb({}), // Linux DEB ], plugins: [ new AutoUnpackNativesPlugin({}), new WebpackPlugin({ mainConfig, renderer: { config: rendererConfig, entryPoints: [{ html: ./src/index.html, js: ./src/renderer.ts, name: main_window, preload: { js: ./src/preload.ts }, }], }, }), new FusesPlugin({ ... }), ], };其中WebpackPlugin的两项配置是必填的详见 webpack.mdxmainConfig主进程的 webpack 配置对象或字符串路径renderer.config渲染进程的 webpack 配置对象或字符串路径renderer.entryPoints声明渲染窗口的入口name: main_window会派生出一对魔法全局变量MAIN_WINDOW_WEBPACK_ENTRY与MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY见下文。此外模板还通过FusesPlugin启用了 Electron Fuses 加固禁用RunAsNode、开启 Cookie 加密、仅从 ASAR 加载应用等并配置了四个平台的 makers。webpack 配置拆解主进程、渲染进程与共享规则主进程配置webpack.main.config.ts 以./src/main.ts为入口挂载共享 rules 与插件并声明了模块解析扩展名export const mainConfig: Configuration { entry: ./src/main.ts, module: { rules }, plugins, resolve: { extensions: [.js, .ts, .jsx, .tsx, .css, .json], }, };渲染进程配置webpack.renderer.config.ts 在共享 rules 基础上追加 CSS 处理style-loadercss-loader用于打包renderer.ts中import ./index.css引入的样式rules.push({ test: /\.css$/, use: [{ loader: style-loader }, { loader: css-loader }], });共享 rules原生模块与 TypeScriptwebpack.rules.ts 定义了三条核心规则原生 Node 模块对native_modules/..node$使用node-loader——因为 asset relocator 会生成一个实为 cjs 的假.node文件需要特殊处理node_modules 中的 JS/Node 文件交给vercel/webpack-asset-relocator-loader并把产物输出到native_modules目录TypeScript 文件对.tsx?$使用ts-loader且开启transpileOnly: true仅转译、不做类型检查。类型检查由 webpack.plugins.ts 中的fork-ts-checker-webpack-plugin在独立进程中完成避免拖慢 webpack 编译。而 TS 变体专属的ts-loader、fork-ts-checker-webpack-plugin、typescript依赖则通过 WebpackTemplate.ts 中的TS_ONLY_DEV_DEPS集合按需注入或剔除。主进程代码魔法全局变量Webpack 插件会为每个 entry point 定义两个全局变量详见 webpack.mdx渲染进程入口 → 后缀_WEBPACK_ENTRYpreload 脚本 → 后缀_PRELOAD_WEBPACK_ENTRY。因此main_window入口对应MAIN_WINDOW_WEBPACK_ENTRY与MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY。模板的 main.ts 展示了标准用法declare const MAIN_WINDOW_WEBPACK_ENTRY: string; declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string; const mainWindow new BrowserWindow({ height: 600, width: 800, webPreferences: { preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, }, }); mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);在 TypeScript 下这些变量必须手动声明模板通过在src/下放置declarations.d.ts集中处理该文件位于 packages/template/webpack/tmpl/declarations.d.ts初始化时会被复制到新项目的src/目录。模板源码中也保留了 Windows 安装器场景的electron-squirrel-startup处理与 macOS 平台约定window-all-closed不退出等。TypeScript 配置要点tsconfig.json 提供了一套贴近现代打包器生态的默认值{ compilerOptions: { target: ESNext, module: preserve, moduleResolution: bundler, allowJs: true, skipLibCheck: true, esModuleInterop: true, noImplicitAny: true, sourceMap: true, resolveJsonModule: true }, include: [src/**/*, *.ts, *.mts] }两个细节值得注意moduleResolution: bundler与module: preserve配合 webpack 的模块解析include覆盖了根目录的*.ts/*.mts即forge.config.mts与各 webpack 配置文件。WebpackTemplate.spec.ts 特别断言compilerOptions.rootDir必须未设置否则根级配置文件会被rootDir: src以 TS6059 错误拒绝。package.json中还提供了typechecktsc --noEmit、lintoxlint oxfmt等脚本见 tmpl/package.json。开发模式与终端 UI运行npm start后Webpack 插件会为每个 compiler主进程、每个渲染进程与 preload target在 Forge 的终端 UI 中建立一个标签页详见 webpack.mdx可用←/→或数字切换标签、a查看合并视图、r重启 Electron 应用、q退出渲染进程在开发模式下由webpack-dev-server驱动天然支持 Hot Module ReplacementHMR便于快速迭代界面代码。Windows 上的注意事项原文档明确警告在该模板上使用 Windows 的 Git Bash 命令行可能导致 Electron 应用无法渲染打包后的应用不受影响。因此 Windows 下建议使用 CMD.exe、PowerShell 或 WSL2 来运行与开发。与纯 Webpack 模板的关系仓库中还提供了无 TypeScript 的纯 Webpack 模板二者共用同一个WebpackTemplate实现未传--typescript时初始化任务会通过stripAndRename把.ts文件改写为.js移除ts-loader规则、fork-ts-checker插件与typecheck脚本并把forge.config.mts中的模块导入改写为字符串路径如./webpack.main.config.mjs相关逻辑与断言分别见 WebpackTemplate.ts 和 WebpackTemplate.spec.ts。JS 变体下也无需自行声明魔法全局变量。小结Webpack TypeScript 模板把 Electron 工程中最繁琐的构建编排封装成了可复用的默认配置一条命令即可获得双进程 webpack 打包、ts-loader fork-ts-checker 的类型安全开发链路、preload 沙箱支持与 Fuses 加固。后续无论是调整 entry point、追加 webpack loader还是切换打包产物格式都可以从本文涉及的forge.config.mts与四个 webpack 配置文件入手并随时查阅 Webpack Plugin 与 CLI 文档获得更完整的选项说明。赞分享开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载相关推荐Electron Forge Vite TypeScript 模板从零快速搭建基于 Vite 构建的 TypeScript Electron 应用Electron Forge Vite TypeScript 模板从零快速搭建基于 Vite 构建的 TypeScript Electron 应用 Ele开发工具桌面应用前端构建Electron Forge Vite 模板用 create-electron-app 快速搭建 Vite 驱动的 Electron 应用Electron Forge Vite 模板用 create electron app 快速搭建 Vite 驱动的 Electron 应用 electron开发工具桌面应用前端构建Electron Forge 的 Webpack 模板一条命令搭建基于 Webpack 构建的 Electron 应用Electron Forge 的 Webpack 模板一条命令搭建基于 Webpack 构建的 Electron 应用 在 Electron Forge 中开发工具桌面应用前端构建上一篇20高效Obsidian模板构建系统化的Zettelkasten卡片盒笔记系统下一篇终极Visual C运行库修复指南如何一次性解决所有DLL缺失问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/7 2:23:25 · 阅读 1.2k 使用 Electron Forge Webpack + TypeScript 模板快速搭建 Electron 应用
开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载本指南围绕 Electron Forge 官方提供的 Webpack TypeScript 项目模板展开讲解如何通过一条命令初始化一个主进程 渲染进程双 webpack 构建、TypeScript 开箱即用的 Electron 应用并深入剖析模板生成的forge.config.mts、webpack 配置文件、tsconfig 与主进程/渲染进程代码之间的协作关系。阅读本文后你将能够独立初始化、理解并二次配置该模板掌握 Electron Forge Webpack 插件electron-forge/plugin-webpack的典型用法。模板能为你解决什么要让 Electron 与 webpack、TypeScript 协同工作通常需要手工做三件事搭建两套 webpack 配置主进程一套、渲染进程一套、配置 ts-loader 与类型检查、在源码中处理 webpack 插件注入的入口路径。该模板把这一切预置完成只要执行一次初始化命令就能得到一份带合理 TypeScript 默认配置的可用工程——这正是文档中with sane TypeScript configuration defaults所描述的核心价值。模板本身位于仓库的 packages/template/webpack 目录其实现类 WebpackTemplate.ts 继承自BaseTemplate负责把 tmpl 下的文件按 TypeScript / JavaScript 两种变体复制并改写进新项目。快速开始初始化一个新项目文档给出的初始化命令如下npx create-electron-applatest my-new-app --templatewebpack-typescript命令执行后会生成my-new-app目录其中包含模板预置的 webpack 与 TypeScript 配置。版本提示以当前仓库源码为准从 find-template.ts 的实现来看webpack-typescript这种独立的旧式短名模板已不再存在CLI 会抛出迁移提示The webpack-typescript template no longer exists. Use --template webpack --typescript instead.因此当前推荐使用统一后的写法npx create-electron-applatest my-new-app --templatewebpack --typescript两种写法最终都落到同一个WebpackTemplate--typescript时启用options.typescript分支。对应关系可参考 find-template.spec.ts 中[webpack-typescript, webpack]的测试断言。初始化完成后在生成的目录里执行npm start即可启动开发模式。有关 Electron Forge 专属的配置项参见 Webpack Plugin 文档。生成的项目结构以 TypeScript 变体为例模板会生成如下文件完整清单见 tmpl 目录并由 WebpackTemplate.spec.ts 逐一断言文件作用forge.config.mtsElectron Forge 配置文件注册 makers、Webpack 插件与 Fuseswebpack.main.config.ts主进程 webpack 配置webpack.renderer.config.ts渲染进程 webpack 配置webpack.rules.ts共享的 loader 规则原生模块、ts-loader 等webpack.plugins.tsfork-ts-checker-webpack-plugin 类型检查插件tsconfig.jsonTypeScript 编译配置src/main.ts主进程入口src/renderer.ts渲染进程入口src/preload.tspreload 脚本src/declarations.d.ts为 webpack 魔法全局变量提供的类型声明src/index.html、src/index.css页面与样式注意package.json的main字段指向.webpack/main/index.cjs这是因为 Webpack 插件会把主进程与 preload 打包为 CommonJS 产物.cjs扩展名详见 webpack.mdx。深入 forge.config.mts插件与打包配置模板生成的 forge.config.mts 是理解整个构建链路的关键其核心结构如下import { WebpackPlugin } from electron-forge/plugin-webpack; import { mainConfig } from ./webpack.main.config; import { rendererConfig } from ./webpack.renderer.config; const config: ForgeConfig { packagerConfig: { asar: true, // 以 ASAR 归档打包应用 }, rebuildConfig: {}, makers: [ // 平台安装包生成器 new MakerSquirrel({}), // Windows new MakerZIP({}, [darwin]), // macOS new MakerRpm({}), // Linux RPM new MakerDeb({}), // Linux DEB ], plugins: [ new AutoUnpackNativesPlugin({}), new WebpackPlugin({ mainConfig, renderer: { config: rendererConfig, entryPoints: [{ html: ./src/index.html, js: ./src/renderer.ts, name: main_window, preload: { js: ./src/preload.ts }, }], }, }), new FusesPlugin({ ... }), ], };其中WebpackPlugin的两项配置是必填的详见 webpack.mdxmainConfig主进程的 webpack 配置对象或字符串路径renderer.config渲染进程的 webpack 配置对象或字符串路径renderer.entryPoints声明渲染窗口的入口name: main_window会派生出一对魔法全局变量MAIN_WINDOW_WEBPACK_ENTRY与MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY见下文。此外模板还通过FusesPlugin启用了 Electron Fuses 加固禁用RunAsNode、开启 Cookie 加密、仅从 ASAR 加载应用等并配置了四个平台的 makers。webpack 配置拆解主进程、渲染进程与共享规则主进程配置webpack.main.config.ts 以./src/main.ts为入口挂载共享 rules 与插件并声明了模块解析扩展名export const mainConfig: Configuration { entry: ./src/main.ts, module: { rules }, plugins, resolve: { extensions: [.js, .ts, .jsx, .tsx, .css, .json], }, };渲染进程配置webpack.renderer.config.ts 在共享 rules 基础上追加 CSS 处理style-loadercss-loader用于打包renderer.ts中import ./index.css引入的样式rules.push({ test: /\.css$/, use: [{ loader: style-loader }, { loader: css-loader }], });共享 rules原生模块与 TypeScriptwebpack.rules.ts 定义了三条核心规则原生 Node 模块对native_modules/..node$使用node-loader——因为 asset relocator 会生成一个实为 cjs 的假.node文件需要特殊处理node_modules 中的 JS/Node 文件交给vercel/webpack-asset-relocator-loader并把产物输出到native_modules目录TypeScript 文件对.tsx?$使用ts-loader且开启transpileOnly: true仅转译、不做类型检查。类型检查由 webpack.plugins.ts 中的fork-ts-checker-webpack-plugin在独立进程中完成避免拖慢 webpack 编译。而 TS 变体专属的ts-loader、fork-ts-checker-webpack-plugin、typescript依赖则通过 WebpackTemplate.ts 中的TS_ONLY_DEV_DEPS集合按需注入或剔除。主进程代码魔法全局变量Webpack 插件会为每个 entry point 定义两个全局变量详见 webpack.mdx渲染进程入口 → 后缀_WEBPACK_ENTRYpreload 脚本 → 后缀_PRELOAD_WEBPACK_ENTRY。因此main_window入口对应MAIN_WINDOW_WEBPACK_ENTRY与MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY。模板的 main.ts 展示了标准用法declare const MAIN_WINDOW_WEBPACK_ENTRY: string; declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string; const mainWindow new BrowserWindow({ height: 600, width: 800, webPreferences: { preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, }, }); mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);在 TypeScript 下这些变量必须手动声明模板通过在src/下放置declarations.d.ts集中处理该文件位于 packages/template/webpack/tmpl/declarations.d.ts初始化时会被复制到新项目的src/目录。模板源码中也保留了 Windows 安装器场景的electron-squirrel-startup处理与 macOS 平台约定window-all-closed不退出等。TypeScript 配置要点tsconfig.json 提供了一套贴近现代打包器生态的默认值{ compilerOptions: { target: ESNext, module: preserve, moduleResolution: bundler, allowJs: true, skipLibCheck: true, esModuleInterop: true, noImplicitAny: true, sourceMap: true, resolveJsonModule: true }, include: [src/**/*, *.ts, *.mts] }两个细节值得注意moduleResolution: bundler与module: preserve配合 webpack 的模块解析include覆盖了根目录的*.ts/*.mts即forge.config.mts与各 webpack 配置文件。WebpackTemplate.spec.ts 特别断言compilerOptions.rootDir必须未设置否则根级配置文件会被rootDir: src以 TS6059 错误拒绝。package.json中还提供了typechecktsc --noEmit、lintoxlint oxfmt等脚本见 tmpl/package.json。开发模式与终端 UI运行npm start后Webpack 插件会为每个 compiler主进程、每个渲染进程与 preload target在 Forge 的终端 UI 中建立一个标签页详见 webpack.mdx可用←/→或数字切换标签、a查看合并视图、r重启 Electron 应用、q退出渲染进程在开发模式下由webpack-dev-server驱动天然支持 Hot Module ReplacementHMR便于快速迭代界面代码。Windows 上的注意事项原文档明确警告在该模板上使用 Windows 的 Git Bash 命令行可能导致 Electron 应用无法渲染打包后的应用不受影响。因此 Windows 下建议使用 CMD.exe、PowerShell 或 WSL2 来运行与开发。与纯 Webpack 模板的关系仓库中还提供了无 TypeScript 的纯 Webpack 模板二者共用同一个WebpackTemplate实现未传--typescript时初始化任务会通过stripAndRename把.ts文件改写为.js移除ts-loader规则、fork-ts-checker插件与typecheck脚本并把forge.config.mts中的模块导入改写为字符串路径如./webpack.main.config.mjs相关逻辑与断言分别见 WebpackTemplate.ts 和 WebpackTemplate.spec.ts。JS 变体下也无需自行声明魔法全局变量。小结Webpack TypeScript 模板把 Electron 工程中最繁琐的构建编排封装成了可复用的默认配置一条命令即可获得双进程 webpack 打包、ts-loader fork-ts-checker 的类型安全开发链路、preload 沙箱支持与 Fuses 加固。后续无论是调整 entry point、追加 webpack loader还是切换打包产物格式都可以从本文涉及的forge.config.mts与四个 webpack 配置文件入手并随时查阅 Webpack Plugin 与 CLI 文档获得更完整的选项说明。赞分享开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载相关推荐Electron Forge Vite TypeScript 模板从零快速搭建基于 Vite 构建的 TypeScript Electron 应用Electron Forge Vite TypeScript 模板从零快速搭建基于 Vite 构建的 TypeScript Electron 应用 Ele开发工具桌面应用前端构建Electron Forge Vite 模板用 create-electron-app 快速搭建 Vite 驱动的 Electron 应用Electron Forge Vite 模板用 create electron app 快速搭建 Vite 驱动的 Electron 应用 electron开发工具桌面应用前端构建Electron Forge 的 Webpack 模板一条命令搭建基于 Webpack 构建的 Electron 应用Electron Forge 的 Webpack 模板一条命令搭建基于 Webpack 构建的 Electron 应用 在 Electron Forge 中开发工具桌面应用前端构建上一篇20高效Obsidian模板构建系统化的Zettelkasten卡片盒笔记系统下一篇终极Visual C运行库修复指南如何一次性解决所有DLL缺失问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考