前端构建构建工具开发工具【免费下载链接】farmExtremely fast Vite-compatible web build tool written in Rust项目地址https://gitcode.com/gh_mirrors/fa/farm点击查看免费下载导读本篇指南围绕 Farm 官方脚手架create-farm-rs内置的tauri/vanilla模板展开讲解如何用原生 HTML、CSS 与 TypeScript 快速搭建一个基于 Tauri 的桌面应用并以 Farm 作为前端构建工具驱动开发、构建与预览全流程。读完本文你将掌握该模板的完整目录结构、tauri.conf.json与farm.config.ts的协作方式、greet命令的前后端桥接原理以及如何用 CLI 一行命令生成项目并跑通tauri dev。关联文档位于 crates/create-farm-rs/templates/tauri/vanilla/README.md本文所有代码与配置均来自该模板目录下的真实文件可对照验证。模板概览Tauri Vanilla TS 是什么tauri/vanilla是 Farm 项目脚手架中面向桌面端的一组模板之一。与 React、Vue、Svelte、Solid、Preact 等带框架的变体不同它刻意保持零框架依赖只使用Vanilla HTML页面骨架由 index.html 直接承载Vanilla CSS全局样式写在 src/styles.css并支持跟随系统自动切换深色/浅色主题TypeScript前端逻辑集中在 src/main.ts通过tauri-apps/api调用 Rust 侧能力。原 README 明确指出该模板的目标是帮助你开始使用 Tauri 进行原生 HTML、CSS 和 TypeScript 开发因此它是学习 Tauri 命令机制、理解 Farm 与 Tauri 双构建系统协作的最小可运行示例。推荐 IDE 环境原文档给出了开发该模板推荐的 IDE 配置核心是 VS Code 搭配两个关键扩展扩展作用TauriTauri 官方扩展提供配置校验、调试与快捷命令rust-analyzerRust 语言服务用于编辑src-tauri下的 Rust 代码时获得补全、诊断与跳转由于本项目同时包含 TypeScript 前端与 Rust 后端建议再配合 VS Code 内置的 TypeScript 支持即可获得完整开发体验。模板中的 gitignore 也预留了.vscode/*但保留!.vscode/extensions.json的规则说明官方期待你在项目中落地一套团队级 IDE 配置。目录结构逐层拆解从 templates/tauri/vanilla 目录看模板分为两大部分tauri/vanilla/ ├── index.html # 前端入口页面 ├── farm.config.ts # Farm 构建配置 ├── package.json # 前端脚本与依赖声明 ├── tsconfig.json # TypeScript 编译配置 ├── src/ │ ├── main.ts # 前端 TS 逻辑调用 Tauri command │ ├── styles.css # 全局样式 │ └── assets/ # 展示用 logoFarm/Tauri/TS └── src-tauri/ # Tauri 后端Rust ├── Cargo.toml # Rust 依赖清单 ├── tauri.conf.json # Tauri 核心配置 └── src/main.rs # Rust 入口与 command 定义前端部分由 Farm 构建后端部分由 Cargo Tauri 构建两者通过固定的开发端口与产物目录衔接。前端Farm 负责构建的 Vanilla TSFarm 配置farm.config.ts 是全模板最简配置import { defineConfig } from farmfe/core; export default defineConfig({ server: { port: 1420 } });关键点在于server.port 1420。这个端口不是随意选的——它必须与 Tauri 侧tauri.conf.json中的devPathhttp://localhost:1420保持一致否则tauri dev启动的 WebView 将无法加载 Farm 的开发服务器页面。两个端口配置必须同步修改这是双构建系统协作的核心约束。入口页面index.html 使用标准 ES Module 方式引入资源link relstylesheet href/src/styles.css / script typemodule src/src/main.ts defer/script页面主体包含一个问候表单输入框 Greet 按钮 结果展示区#greet-msg以及三枚可点击的 LogoFarm、Tauri、TypeScript用于演示前端与 Rust 后端的交互入口。前端逻辑src/main.ts 演示了 Tauri 命令调用import { invoke } from tauri-apps/api/tauri; async function greet() { if (greetMsgEl greetInputEl) { greetMsgEl.textContent await invoke(greet, { name: greetInputEl.value }); } } window.addEventListener(DOMContentLoaded, () { greetInputEl document.querySelector(#greet-input); greetMsgEl document.querySelector(#greet-msg); document.querySelector(#greet-form)?.addEventListener(submit, (e) { e.preventDefault(); greet(); }); });这里invoke(greet, { name: ... })会通过 Tauri 的 IPC 桥把name参数传给 Rust 侧注册的greet命令并把返回的字符串写入页面。表单提交被preventDefault()拦截避免触发页面刷新导致 WebView 重载。包脚本package.json 定义了完整命令链{ scripts: { dev: farm, build: tsc farm build, preview: farm preview, tauri: tauri }, dependencies: { tauri-apps/api: ^1 }, devDependencies: { tauri-apps/cli: ^1, farmfe/cli: beta, farmfe/core: beta, typescript: ^5.0.2 } }farm/farm build/farm preview分别是 Farm 的开发服务器、产物构建与本地预览tsc在构建前做一次类型检查tsconfig.json中noEmit: true只查不产出tauri-apps/api是前端调用 Rust 的运行时依赖tauri-apps/cli是 Tauri 的脚手架 CLI。TypeScript 配置tsconfig.json 采用 Bundler 模式{ compilerOptions: { target: ES2020, module: ESNext, lib: [ES2020, DOM, DOM.Iterable], moduleResolution: bundler, allowImportingTsExtensions: true, resolveJsonModule: true, isolatedModules: true, noEmit: true, strict: true, noUnusedLocals: true, noUnusedParameters: true, noFallthroughCasesInSwitch: true }, include: [src] }moduleResolution: bundler与allowImportingTsExtensions是为 Farm 这类现代打包器准备的strict及noUnused*系列规则让模板默认处于较严格的类型检查水平。后端Rust 侧的 Tauri 壳Rust 入口src-tauri/src/main.rs 是理解整个模板原理的钥匙#![cfg_attr(not(debug_assertions), windows_subsystem windows)] #[tauri::command] fn greet(name: str) - String { format!(Hello, {}! Youve been greeted from Rust!, name) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![greet]) .run(tauri::generate_context!()) .expect(error while running tauri application); }三个要点windows_subsystemrelease 构建在 Windows 上不弹出额外控制台窗口注释明确标注DO NOT REMOVE#[tauri::command]宏把greet函数暴露为可被前端invoke调用的命令invoke_handler通过generate_handler!完成注册——这正是前端main.ts中invoke(greet, ...)能命中greet的原因generate_context!()在编译期嵌入tauri.conf.json与图标资源是 Tauri 应用打包的基础。Rust 依赖src-tauri/Cargo.toml[build-dependencies] tauri-build { version 1, features [] } [dependencies] tauri { version 1, features [shell-open] } serde { version 1, features [derive] } serde_json 1 [features] custom-protocol [tauri/custom-protocol]shell-openfeature 对应tauri.conf.jsonallowlist 中shell.open: true的能力点击链接跳转外部浏览器custom-protocolfeature 用于生产构建没有开发服务器时通过自定义协议加载资源注释同样标注DO NOT REMOVEserde/serde_json是 Tauri 命令参数序列化的基础依赖。核心配置src-tauri/tauri.conf.json 把前后端两套构建系统粘合在一起{ build: { beforeDevCommand: pnpm dev, beforeBuildCommand: pnpm build, devPath: http://localhost:1420, distDir: ../dist, withGlobalTauri: true }, package: { productName: FARM-TEMPLATE-NAME, version: 0.0.0 }, tauri: { allowlist: { all: false, shell: { all: false, open: true } }, windows: [ { title: FARM-TEMPLATE-NAME, width: 800, height: 600 } ], security: { csp: null }, bundle: { active: true, targets: all, identifier: com.tauri.dev, icon: [ icons/32x32.png, icons/128x128.png, icons/128x1282x.png, icons/icon.icns, icons/icon.ico ] } } }逐项说明字段值含义beforeDevCommandpnpm devtauri dev之前自动启动 Farm 开发服务器beforeBuildCommandpnpm buildtauri build之前先执行类型检查 Farm 产物构建devPathhttp://localhost:1420开发模式下 WebView 加载的地址与farm.config.ts端口对应distDir../dist生产构建时 WebView 加载的静态产物目录Farm 默认输出目录withGlobalTauritrue把 Tauri API 挂到全局window便于无打包器场景直接使用allowlist.shell.opentrue允许打开系统默认浏览器页面中 Farm/Tauri 链接跳转依赖此项windows800×600应用主窗口尺寸title由项目名填充bundletargetsall生成当前平台全部目标格式msi/dmg/appimage 等完整的工作流闭环是tauri dev ├─ beforeDevCommand: pnpm dev ──► Farm dev server 监听 http://localhost:1420 └─ WebView 加载 http://localhost:1420 ──► 用户操作 ──► invoke(greet) ──► Rust 命令返回端到端开发流程实战1. 用 CLI 生成项目该模板由 create-farm-rs 脚手架提供模板枚举定义在 crates/create-farm-rs/src/template.rs其中TauriSubTemplate::Vanilla对应的标识为tauri/vanilla。命令行生成方式以 npm 为例npm create farmlatest -- --template tauri-vanilla # 或先创建再追加参数 npm create farmlatest my-tauri-app -- --template tauri-vanilla脚手架支持的关键参数定义于 crates/create-farm-rs/src/args.rs参数说明-m, --manager指定包管理器pnpm/yarn/npm/bun-t, --template指定模板如tauri、tauri-vanilla、tauri-react等-f, --force目标目录非空时强制覆盖--dry-run试运行不写入任何文件若不带--templateCLI 会进入交互选择先选顶层框架其中包含Tauri与Tauri2选中后再让你挑选react/vue/svelte/vanilla/solid/preact子模板逻辑见 crates/create-farm-rs/src/lib.rs 的run_cli。注意交互式校验要求项目名只包含小写字母、数字与连字符且不能以数字开头见 lib.rs 中is_valid_pkg_name非法输入会被自动纠正或要求重输。2. 安装依赖并启动开发生成目录后按脚手架提示执行命令由PackageManager的install_cmd()与get_run_cmd()动态给出见 crates/create-farm-rs/src/package_manager.rscd my-tauri-app pnpm install # npm install / yarn / bun install pnpm tauri dev # npm run tauri dev / yarn tauri dev / bun tauri devpnpm tauri dev会触发beforeDevCommandpnpm dev拉起 Farm 开发服务器再以开发模式编译 Rust 并打开 WebView。在页面输入框输入名字并点击Greet即可看到 Rust 返回的Hello, xxx! Youve been greeted from Rust!——这是验证前后端桥接打通的最小闭环。3. 构建与打包pnpm tauri build该命令依次执行beforeBuildCommand→pnpm build先tsc做类型检查再farm build产出静态资源到dist/Cargo release 构建 Rust 二进制依据tauri.conf.json的bundle配置生成安装包Windows 下为.msi/.exemacOS 下为.app/.dmgLinux 下为.deb/.AppImage等。若只想验证前端产物可单独运行pnpm build后用pnpm preview通过 Farm 预览dist目录。模板渲染机制占位符如何变成你的项目名该模板目录中的package.json、Cargo.toml、tauri.conf.json里出现的FARM-TEMPLATE-NAME并非遗留文本而是脚手架渲染时的占位符。在 crates/create-farm-rs/src/template.rs 的render()中可以看到完整机制模板文件通过#[derive(RustEmbed)]的EMBEDDED_TEMPLATES在编译期打包进二进制运行时按Template::Tauri(Some(Vanilla))对应的tauri/vanilla前缀筛选文件并写出写文件时会把所有FARM-TEMPLATE-NAME替换为你的项目名project_name因此productName、窗口title、Cargopackage.name都会自动跟随项目名gitignore文件会被重命名为.gitignore再写出避免打包时被当作普通文件忽略dry-run模式下只打印计划不落盘方便预览生成效果。从模板出发的可扩展路径理解该模板的协作模型后你可以按需扩展增加 Tauri 命令在 main.rs 中用#[tauri::command]定义新函数加入generate_handler!列表前端即可invoke调用调整端口同时修改farm.config.ts的server.port与tauri.conf.json的devPath二者必须一致更换入口框架tauri/目录下还有react/、vue/、svelte/、solid/、preact/变体见 templates/tauri结构同构、可对照迁移升级 Tauri 2仓库同时维护tauri2/模板见 templates/tauri2/vanilla其结构在tauri基础上增加了capabilities/default.json权限声明命令注册改为src-tauri/src/lib.rs可结合官方迁移文档比对差异。小结tauri/vanilla模板是一个麻雀虽小、五脏俱全的最小桌面应用示例Farm 负责快速构建与热更新的前端侧Tauri 提供 Rust 驱动的原生壳与 IPC 桥tauri.conf.json则是连接两套构建系统的契约文件。对初学者它是理解 Tauri 命令模型与 Farm 双构建协作的最佳起点对老手它也是搭建新桌面项目、或把现有 Web 前端快速包装成桌面应用的可靠基底。需要动手验证时直接运行npm create farmlatest -- --template tauri-vanilla并执行tauri dev即可复现本文全部流程。赞分享前端构建构建工具开发工具【免费下载链接】farmExtremely fast Vite-compatible web build tool written in Rust项目地址https://gitcode.com/gh_mirrors/fa/farm点击查看免费下载相关推荐Farm 构建 Tauri React TypeScript 桌面应用模板结构与配置全解析Farm 构建 Tauri React TypeScript 桌面应用模板结构与配置全解析 本指南以 Farm 仓库中 create farm rs前端构建构建工具开发工具使用 Amazon S3 托管 Squirrel.Windows 发布文件从存储桶搭建到自动化更新分发使用 Amazon S3 托管 Squirrel.Windows 发布文件从存储桶搭建到自动化更新分发 Amazon S3 是托管 Squirrel.Wind前端构建构建工具开发工具TypeScript与Tauri构建轻量级桌面应用TypeScript与Tauri构建轻量级桌面应用 你是否还在为Electron应用的庞大体积而困扰是否希望开发出启动速度快、资源占用低的桌面应用本文将带文档教程上一篇一份SKILL.md无限复用awesome-claude-design设计资产跨项目迁移终极指南下一篇Open Brain数据卫生实战指纹去重与重复内容回填的完整操作指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考