ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Electron Forge 自定义模板开发指南:基于 ForgeTemplate 接口编写可复用的脚手架模板

Electron Forge 自定义模板开发指南:基于 ForgeTemplate 接口编写可复用的脚手架模板 开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载导读Electron Forge 提供了一套完整的模板Template机制允许开发者以ForgeTemplate接口为契约编写自己的脚手架模板让init命令能够按照团队规范生成全新的 Electron 应用工程。本文以 docs/advanced/extending-electron-forge/writing-templates.md 为骨架结合electron-forge/shared-types中的接口定义、create-electron-app的初始化流程以及electron-forge/template-base等内置模板的实现系统讲解模板接口的每一个字段、模板文件如何组织、init命令如何加载与校验模板以及如何把自定义模板应用到实际项目初始化中。读完本文你将能够从零编写、注册并使用一个完整的自定义 Forge 模板。模板在 Electron Forge 中的定位Electron Forge 的项目初始化流程由create-electron-app即init命令的封装驱动它会解析包管理器、解析模板、初始化目录与 Git 仓库、调用模板的初始化逻辑、安装依赖并最终生成一个可直接electron-forge start的工程。其中“解析模板”与“调用模板”两步完全依赖ForgeTemplate接口因此编写自定义模板的本质就是实现ForgeTemplate接口。内置的base、vite、webpack三个官方模板分别由 packages/template/base/src/BaseTemplate.ts、packages/template/vite/src/ViteTemplate.ts 和 packages/template/webpack/src/WebpackTemplate.ts 实现它们全部实现了ForgeTemplate接口是学习自定义模板的最佳参考。ForgeTemplate 接口全字段解析接口定义位于共享类型包 packages/utils/types/src/index.ts完整字段如下字段必填说明requiredForgeVersion必需该模板支持的 Electron Forge 版本语义化版本范围semver range例如^6.0.0-beta.1dependencies可选传递给包管理器可含版本范围的包标识符列表会写入package.json的dependencies字段例如jquery或jquery^3.0.0devDependencies可选传递给包管理器的包标识符列表会写入devDependencies字段例如eslint或eslint^7.0.0getDevDependencies可选根据init选项动态计算开发依赖的异步函数一旦定义优先于devDependencies被使用initializeTemplate可选异步函数允许模板执行自定义动作例如把tmpl目录中的文件复制进新应用函数签名见下接口的 TypeScript 定义节选自 packages/utils/types/src/index.tsexport interface ForgeTemplate { requiredForgeVersion?: string; dependencies?: string[]; devDependencies?: string[]; /** * Computes dev dependencies for the given init options. Takes precedence * over devDependencies when defined. */ getDevDependencies?: (options: InitTemplateOptions) string[]; initializeTemplate?: ( dir: string, options: InitTemplateOptions, ) Promisevoid | ForgeListrTaskDefinition[]; }其中InitTemplateOptions包含copyCIFiles、force、typescript三个布尔选项ForgeListrTaskDefinition是 listr2 的任务定义意味着模板可以通过返回一组任务来驱动交互式的初始化进度展示。requiredForgeVersion版本兼容性闸门该字段是模板的“兼容性声明”在初始化时会被强制校验。init流程中的validateTemplate见 packages/external/create-electron-app/src/init.ts会做两件事如果模板没有提供requiredForgeVersion直接抛错Cannot use a template (${template}) with this version of Electron Forge, as it does not specify its required Forge version.用当前create-electron-app的版本与requiredForgeVersion做semver.satisfies匹配不匹配则抛错Template (${template}) is not compatible with this version of Electron Forge (${forgeVersion}), it requires ${requiredForgeVersion}。因此写模板时务必声明准确的版本范围例如 8.0.0-alpha.0或^6.0.0-beta.1。内置的BaseTemplate直接把当前 Forge 版本作为requiredForgeVersion见 packages/template/base/src/BaseTemplate.ts保证“模板版本与 Forge 版本天然同步”。dependencies 与 devDependencies依赖注入这两个字段是包标识符package spec列表最终会被installDependencies原样交给包管理器安装。init的任务列表见 packages/external/create-electron-app/src/init.ts会将dependencies作为生产依赖安装写入dependencies字段将devDependencies或getDevDependencies的返回值作为开发依赖安装写入devDependencies字段随后统一安装 Electron 本身initNPM步骤默认取latest标签可通过--electron-version指定beta、nightly或具体版本。标识符可以带版本范围例如jquery、jquery^3.0.0、eslint^7.0.0。参考实现中BaseTemplate的dependencies/devDependenciesgetter 会读取自身tmpl/package.json中的依赖字段并把ELECTRON_FORGE/VERSION占位符替换为^${currentForgeVersion}见 packages/template/base/src/BaseTemplate.ts从而保证模板引入的 Forge 相关包版本与当前 Forge 一致。getDevDependencies按选项动态裁剪依赖getDevDependencies接收InitTemplateOptions含typescript等标志返回最终安装的开发依赖列表优先级高于devDependencies。ViteTemplate就利用它实现了“JS/TS 双变体”当options.typescript为 false 时过滤掉types/electron-squirrel-startup与typescript等仅 TypeScript 变体需要的依赖见 packages/template/vite/src/ViteTemplate.ts。initializeTemplate模板的“主执行体”initializeTemplate(dir, options)接收目标目录init的dir参数默认process.cwd()和初始化选项返回Promisevoid | ForgeListrTaskDefinition[]。返回任务数组时init会以task.newListr(tasks)的方式串行执行它们见 packages/external/create-electron-app/src/init.ts从而获得带标题、可嵌套的进度输出。BaseTemplate.initializeTemplate是一个完整范例packages/template/base/src/BaseTemplate.ts它返回两个任务Copying starter files创建src/目录按检测到的包管理器复制根级文件_gitignore→.gitignore、forge.config.jspnpm 追加pnpm-workspace.yamlYarn 2 追加_yarnrc.yml并复制index.css、index.js、index.html、preload.js到src/Initializing package.json读取tmpl/package.json模板合并子类模板的字段与 scripts用目录名生成name/productName调用determineAuthor填充author并按包管理器写入额外字段pnpm 会写devEngines.packageManager: pnpm11.21.0等最终落盘到目标目录。ViteTemplate.initializeTemplate则进一步展示了子类扩展模式packages/template/vite/src/ViteTemplate.ts先调用super.initializeTemplate拿到 base 任务再追加“覆盖 forge.config、生成 Vite 配置、处理 TS/JS 双变体、改写 index.html”等任务。模板文件的组织方式tmpl 目录约定内置模板都把待复制文件放在包内的tmpl/目录中例如base 模板packages/template/base/tmpl/ 下含_gitignore、_yarnrc.yml、forge.config.js、index.css、index.html、index.js、package.json、preload.js、pnpm-workspace.yamlvite 模板packages/template/vite/tmpl/ 下含forge.config.mts、main.ts、preload.ts、renderer.ts及各 Vite 配置文件。两点实践要点下划线前缀文件表示“隐藏文件”_gitignore复制时会被重命名为.gitignorebase 模板中file.replace(/^_/, .)_yarnrc.yml同理文件在initializeTemplate中复制BaseTemplate提供copy(source, target)内部用fs.cp(..., { recursive: true })与copyTemplateFile(destDir, basename)辅助方法自定义模板可以直接复用或参照实现。base 模板的tmpl/package.json是依赖注入的源头packages/template/base/tmpl/package.json{ name: , productName: , version: 1.0.0, private: true, description: My Electron application description, keywords: [], license: MIT, author: , main: ./src/index.js, scripts: { start: electron-forge start, package: electron-forge package, make: electron-forge make, release: electron-forge release } }注意dependencies/devDependencies并不写死在这里——模板依赖由接口字段或getDevDependencies在运行时注入initializePackageJSON只负责合并结构字段与 scripts。init 命令与模板加载机制使用自定义模板需要运行init命令并把--template指向包含ForgeTemplate实现的文件npx electron-forge init --templatemy-template命令行入口的定义见 docs/cli.mdinit命令会在给定目录默认当前目录.初始化一个 Forge 应用所有 flag 均为可选--template接受模板名称非内置模板必须在使用前全局安装。也可以直接用封装脚本npx create-electron-app dir --templatemy-template官方推荐路径。模板解析顺序与路径解析findTemplate见 packages/external/create-electron-app/src/init-scripts/find-template.ts按以下顺序尝试解析--template的值绝对路径直接转换为file://URL 并导入兼容 Windows 风格路径名称拼接依次尝试electron-forge-template-${template}、electron-forge/template-${template}、template本身全部失败则抛出Failed to locate custom template: ${template}.。解析到模块后通过templateModule.default ?? templateModule解出模板对象同时兼容 ESM 默认导出与 CommonJSmodule.exports因此自定义模板既可写成.cjs也可写成.mjs/.ts。模板的消费流程init的整体任务链packages/external/create-electron-app/src/init.ts依次为解析包管理器 → 解析模板 → 解析 Electron 版本 → 初始化目录 → 初始化 Git 仓库 →校验模板兼容性→ 调用initializeTemplate→ 通过 Corepack 锁定包管理器非 npm→ 安装依赖生产依赖 → 开发依赖 → Electron。由此可见requiredForgeVersion的校验发生在模板初始化之前任何版本不匹配都会在生成文件之前终止。实战编写一个最小可用的自定义模板综合以上机制一个最小化的模板模块可以这样写保存为my-template.cjsconst fs require(fs/promises); const path require(path); const baseTemplate require(electron-forge/template-base).default; module.exports { // 必须声明兼容的 Forge 版本范围 requiredForgeVersion: 8.0.0-alpha.0, // 可选在 base 模板依赖之上追加自己的生产依赖 dependencies: [...baseTemplate.dependencies, semver7.7.3], devDependencies: [...baseTemplate.devDependencies, types/semver7.7.1], // 可选复用 base 模板的初始化逻辑再追加自定义任务 initializeTemplate: async (directory) { const tasks await baseTemplate.initializeTemplate(directory, {}); return [ ...tasks, { title: Adding custom template files, task: async () { await fs.cp( path.resolve(__dirname, tmpl, _bar), path.resolve(directory, .bar), { recursive: true }, ); await fs.cp( path.resolve(__dirname, tmpl, src), path.resolve(directory, src), { recursive: true }, ); }, }, ]; }, };这个例子与仓库中custom_init测试夹具packages/external/create-electron-app/spec/fixture/custom_init/index.cjs同构是官方验证过的自定义模板形态以 base 模板为基底追加依赖与文件复制任务。然后把它交给init# 方式一把模板模块放到 node_modules 可解析的位置如全局安装 npx electron-forge init --templatemy-template # 方式二直接用绝对路径指向实现文件 npx create-electron-app my-app --template/path/to/my-template.cjs版本不兼容时的典型报错Template (my-template) is not compatible with this version of Electron Forge (8.0.0), it requires 9.0.0官方测试如何验证模板仓库通过 packages/utils/test-utils/src/template-tests.ts 提供跨包管理器npm/pnpm/yarn与模块格式CJS/ESM的端到端模板测试工具它用本地create-electron-app创建项目向 preload 与主进程注入 IPC 探针运行start脚本并断言输出中包含__FORGE_INTERNAL_MAIN_PROCESS_OK__与__FORGE_INTERNAL_PRELOAD_PROCESS_OK__最后检查锁文件与所选包管理器一致。各官方模板的慢速测试如 packages/template/base/spec/template-base-e2e.slow.verdaccio.spec.ts、packages/template/vite/spec/template-vite-e2e.slow.verdaccio.spec.ts即基于该工具在 Verdaccio 私有源上安装并启动真实应用。这意味着模板只要被成功创建的项目能正常start就说明它的结构、依赖注入与初始化逻辑是自洽的——自定义模板上线前完全可以参照这套思路做冒烟验证。小结编写 Electron Forge 自定义模板的核心就一条实现ForgeTemplate接口。requiredForgeVersion负责版本兼容校验dependencies/devDependencies或getDevDependencies负责依赖注入initializeTemplate负责生成工程文件模板资源建议放在包的tmpl/目录通过--template传给init命令后findTemplate会完成名称解析与模块导入init会在校验通过后按序执行初始化与依赖安装。需要参考更完整的实现时直接阅读 BaseTemplate.ts 与 ViteTemplate.ts 即可。赞分享开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载相关推荐Leiningen 自定义模板编写指南从 lein new template 生成脚手架到 Clojars 发布Leiningen 自定义模板编写指南从 lein new template 生成脚手架到 Clojars 发布 Leiningen 内置的 lein new构建工具CLIElectron 应用脚手架与 CLI 工具全指南Boilerplate vs CLI、Electron Forge、electron-builder 与模板生态Electron 应用脚手架与 CLI 工具全指南Boilerplate vs CLI、Electron Forge、electron builder 与模板桌面应用跨平台前端如何创建可复用的AI助手模板Forge技能开发终极指南如何创建可复用的AI助手模板Forge技能开发终极指南 Forge是一款强大的AI增强终端开发环境它能将AI能力与您的开发环境无缝集成为Claude、GP人工智能AI 技能AI 插件上一篇Windows 11任务栏拖放功能终极修复指南免费恢复消失的生产力下一篇Windows热键冲突检测利器Hotkey Detective技术解析与实战应用创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表