
前端构建构建工具开发工具【免费下载链接】farmExtremely fast Vite-compatible web build tool written in Rust项目地址https://gitcode.com/gh_mirrors/fa/farm点击查看免费下载导读本指南围绕 Farm 官方 JavaScript 插件farmfe/js-plugin-electron展开讲解如何用 Farm 这一基于 Rust 的 Vite 兼容构建工具开发 Electron 桌面应用。阅读本文后你将掌握插件安装与最小配置、main与preload双入口的构建模型、开发模式下的进程热重启与 preload 热更新机制以及生产构建与打包Electron Forge的完整闭环方案。文章内容以插件源码src/index.ts与仓库自带示例工程examples/electron为事实依据所有配置均可直接复制运行。插件是什么一条 Farm 与 Electron 之间的双构建桥梁Electron 应用由三部分组成主进程main、预加载脚本preload与渲染进程renderer。渲染进程可以用 Farm 当作普通的 Web 应用来开发HTML / CSS / TS / 框架均可但主进程与 preload 脚本是 Node.js 环境下的独立构建产物需要单独的入口和输出。farmfe/js-plugin-electron的价值就在于在 Farm 的一次编译会话中把主进程与 preload 脚本当作嵌套构建一并处理。从 src/index.ts 的实现可以看到该插件会通过config钩子修改全局配置如默认把publicPath设为./保证加载相对资源在开发服务器启动后configureServer自动编译 main / preload 并启动 Electron 进程在整次构建结束finish钩子时以生产模式重新编译 main / preload产出可直接打包的产物。因此你只需要运行farm开发或farm build生产一条命令Electron 侧的编译与启动全部由插件托管无需额外脚本。安装与最小配置安装插件在 Farm 项目中以开发依赖安装插件官方文档README-zh-CN.md提供了三种包管理器方式# npm npm install farmfe/js-plugin-electron --save-dev # yarn yarn add -D farmfe/js-plugin-electron # pnpm pnpm add -D farmfe/js-plugin-electron注意插件本身将electron作为devDependencies使用见 package.json你的项目同样需要安装electron与farmfe/core、farmfe/cli示例工程 examples/electron/package.json 中即包含完整依赖清单。在 farm.config.ts 中启用插件官方文档给出的最小配置README-zh-CN.mdimport { defineConfig } from farmfe/core import electron from farmfe/js-plugin-electron export default defineConfig({ plugins: [ electron({ main: { input: electron/main.ts, }, preload: { input: electron/preload.ts, }, }), ], })代码中同时出现了两条importimport electron from farmfe/js-plugin-electron与import electron from ./farm-plugin-electron这是文档行文上的冗余实际使用时二选一即可——发布场景使用包名导入本地联调插件源码时使用相对路径导入。仓库示例工程 examples/electron/farm.config.ts 与文档配置几乎一致仅额外关闭了持久化缓存import { defineConfig } from farmfe/core; import electron from farmfe/js-plugin-electron; export default defineConfig({ compilation: { persistentCache: false, }, plugins: [ electron({ main: { input: electron/main.ts, }, preload: { input: electron/preload.ts, }, }), ], });关闭persistentCache是因为插件内部在 resolveFarmConfig 中也会强制persistentCache false——Electron 主进程产物依赖process.cwd()等运行期环境不适合使用跨进程缓存。插件选项详解官方文档给出的完整类型定义README-zh-CN.mdimport type { UserConfig } from farmfe/core export interface BuildOptions { /** * compilation.input 的别名 */ input: string | Recordstring, string farm?: UserConfig } export interface ElectronPluginOptions { main: BuildOptions preload?: BuildOptions }各字段的语义与取值说明如下以 src/index.ts 的源码注释与实现为准字段类型必填说明mainBuildOptions✅主进程构建配置对应最终产出dist-electron/main.jspreloadBuildOptions❌preload 脚本构建配置对应最终产出dist-electron/preload.js或.mjs见下文格式推断BuildOptions.inputstring \| Recordstring, string✅compilation.input的快捷方式传字符串时自动以文件名作为入口名BuildOptions.farmUserConfig❌透传给该次嵌套构建的完整 Farm 配置可覆盖输出路径、格式、压缩等任意编译选项input 的两种写法从源码 resolveFarmConfig 可以看到字符串写法会被自动展开为{ [path.parse(input).name]: input }即input: electron/main.ts等价于input: { main: electron/main.ts }若需要多入口主进程例如多窗口场景可直接传入Record形式input: { main: electron/main.ts, tray: electron/tray.ts }。farm 字段的覆盖能力farm字段会原样合并进该次嵌套构建的配置resolveFarmConfig返回{ ...opts.farm, configFile: false }。这意味着你可以在其中设置任何 Farm 编译选项例如electron({ main: { input: electron/main.ts, farm: { compilation: { output: { path: dist-electron, format: cjs, }, minify: true, sourcemap: true, }, }, }, })插件自动注入的默认编译行为即使你只填写了input插件也会在 resolveFarmConfig 中为每次嵌套构建注入一组面向 Electron 的默认值。理解这些默认值有助于排查产物异常配置项默认值作用与来源compilation.output.pathdist-electron主进程与 preload 的统一输出目录compilation.output.targetEnvlibrary以库形式产出避免被当作 Web 应用打包compilation.output.formatmain包类型为module时esm否则cjspreload默认cjs自动适配工程类型见下文格式推断compilation.output.entryFilenamepreload 且工程为 ESM 时[entryName].mjs否则[entryName].js匹配 Electron ESM preload 必须以.mjs结尾的约束compilation.external追加^electron$把electron模块标记为外部依赖避免被打包进产物compilation.minify开发模式false生产构建true与当前 Farm 运行模式联动compilation.watch开发模式true开发时监听 main / preload 源文件变化compilation.persistentCachefalse关闭持久化缓存保证 Electron 产物一致partialBundling.enforceResourcespreload 构建追加[{ test: [.], name: preload }]强制 preload 的全部模块合并为单个preload文件确保脚本可被require/加载格式推断的完整逻辑源码中的格式推断逻辑src/index.tsif (!opts.farm.compilation.output.format) { opts.farm.compilation.output.format name preload ? // In most cases, preload scripts use cjs format cjs : isEsm ? esm : cjs; }其中isEsm来自对项目根目录package.json中type: module的解析resolvePackageJson。归纳如下main 进程跟随工程类型——package.json声明type: module时产出 ESMmain.js否则产出 CJS。示例工程 examples/electron/package.json 即type: module因此其 main 产物为 ESMpreload 脚本绝大多数场景使用cjs只有当工程为 ESM 时输出文件扩展名改为.mjsElectron 官方要求 ESM preload 脚本必须为.mjs扩展名同时仍以 CJS 格式构建见 entryFilename 逻辑。这也是示例中 preload 的引用写法为preload.mjs的原因见 electron/main.ts。开发模式一键启动与进程热更新插件开发模式的完整工作流来自 configureServerFarm 开发服务器启动后插件把isDev置为true并在 HTTP 服务listening事件中继续将服务器地址解析为http://localhost:port并写入环境变量FARM_DEV_SERVER_URLresolveServerUrl对main与preload分别执行一次farmBuild嵌套构建同时为每次构建注册一个名为:startup的finish钩子插件构建完成后若为preload向渲染进程发送full-reload触发整页刷新preload 脚本热更新若为main则通过Starter.start()重启 Electron 主进程index.ts。Starter 类Electron 进程的启停管理主进程重启由 Starter 类完成通过spawn(electronPath, [., --no-sandbox], { stdio: inherit })以当前目录启动 Electron--no-sandbox便于在容器/CI 环境运行启动前先exit()杀掉旧进程并移除监听器避免端口与窗口残留Electron 退出时同步结束 Farm 命令进程this.electronApp.once(exit, process.exit)在进程退出钩子中清理 Electron 子进程防止僵尸进程。主进程如何加载开发页面在 examples/electron/electron/main.ts 中可以看到开发与生产的页面加载分支if (process.env.FARM_DEV_SERVER_URL) { win.loadURL(process.env.FARM_DEV_SERVER_URL) win.webContents.openDevTools() } else { win.loadFile(path.join(process.env.DIST, index.html)) }开发模式下直接加载FARM_DEV_SERVER_URLFarm 开发服务器地址从而获得 HMR、模块热替换等完整开发体验生产模式加载打包后的dist/index.html。渲染进程的环境变量声明示例工程在 electron/electron-env.d.ts 中为 TypeScript 声明了这三个插件相关环境变量可照搬到自己的项目中declare namespace NodeJS { interface ProcessEnv { DIST: string // 打包目录 dist FARM_PUBLIC: string // /dist/ 或 /public/ FARM_DEV_SERVER_URL?: string // Farm dev server run address } }生产构建从编译到打包生产模式下farm build插件走finish钩子index.ts跳过开发流程if (isDev) return对main与preload依次执行生产构建自动启用minify: true见默认值表产出位于dist-electron目录。与 Electron Forge 集成打包示例工程使用 Electron Forge 完成安装包制作forge.config.cjs其构建脚本为build: farm build electron-forge packageForge 配置中的关键点是packagerConfig.ignore: /.*/忽略全部文件再通过beforeCopy仅复制运行所需的三样内容const items [ dist, // 渲染进程产物 dist-electron, // main preload 产物 package.json, // 应用元信息与入口声明 ] for (const item of items) { fs.copySync(path.join(__dirname, item), path.join(buildPath, item)) }这一设计很干净只拷贝构建产物与包描述文件不携带源码与 node_modules因此最终安装包体积小、结构清晰。同时记得在package.json中把应用入口指向dist-electron/main.js示例见 examples/electron/package.json。正确性验证仓库 e2e 测试仓库为 Electron 示例提供了端到端测试 examples/electron/e2e.spec.mjs它验证了插件的完整链路清理dist与dist-electron后执行farm build完成生产构建通过playwright-chromium的_electron.launch启动 Electron 应用参数同样带--no-sandbox断言渲染页面标题为Electron Farm TypeScript与 src/main.ts 中的 H1 一致并对窗口截图保存到 screenshots/app-window.png。测试同时给出了一个环境提示Linux 的 CI 环境偶发无法启动 Electron 窗口时测试会放行通过避免环境因素误报。版本与演进插件当前的发布版本为2.0.0-beta.0package.json。从 CHANGELOG.md 可以看到其演进脉络1.0.0新增插件支持 Farm 开发 Electron 应用1.0.1支持 Electron 产物中的相对路径1.0.2新的import.meta.url运行时并合并 preload 输出文件与enforceResources单文件产出对应1.0.3修复依赖被意外标记为外部的问题2.0.0-beta.0随 Farm v2.0.0 发布。小结farmfe/js-plugin-electron用一次 Farm 命令、两层嵌套构建的设计把 Electron 主进程、preload 与渲染进程的开发体验统一到 Farm 的生态里开发时自动编译、自动拉起/重启 Electron、preload 改动即刷生产时产出dist-electron供 Forge 等工具直接打包。上手路径建议参考 examples/electron 完整示例对照本文的选项表与默认值表理解插件行为再按需用BuildOptions.farm覆盖默认编译设置。相关文件索引插件文档js-plugins/electron/README-zh-CN.md 英文版 js-plugins/electron/README.md插件源码js-plugins/electron/src/index.ts完整示例examples/electron/farm.config.ts、examples/electron/electron/main.ts、examples/electron/electron/preload.ts打包配置examples/electron/forge.config.cjs端到端验证examples/electron/e2e.spec.mjs赞分享前端构建构建工具开发工具【免费下载链接】farmExtremely fast Vite-compatible web build tool written in Rust项目地址https://gitcode.com/gh_mirrors/fa/farm点击查看免费下载相关推荐用 Farm 构建 Electron 应用farmfe/js-plugin-electron 插件安装、配置与双进程构建全指南用 Farm 构建 Electron 应用farmfe/js plugin electron 插件安装、配置与双进程构建全指南 Farm 是一个用 Rust前端构建构建工具开发工具用 uv 重塑 Python 依赖管理agents24 仓库中的现代 Python 项目工作流实战指南用 uv 重塑 Python 依赖管理agents24 仓库中的现代 Python 项目工作流实战指南 导读 本文以 agents24 仓库中 uv pack前端构建构建工具开发工具command-line-args在微服务架构中的应用分布式CLI工具开发command line args在微服务架构中的应用分布式CLI工具开发 在微服务架构中分布式CLI工具开发面临着多服务协同、参数统一管理和跨环境配置等挑上一篇godropbox 缓存系统深度解析从本地缓存到分布式存储的完整指南下一篇独角数卡支付系统构建企业级高可用自动售货解决方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考