前端构建构建工具开发工具【免费下载链接】farmExtremely fast Vite-compatible web build tool written in Rust项目地址https://gitcode.com/gh_mirrors/fa/farm点击查看免费下载Farm基于 Rust 的高性能 Vite 兼容构建工具默认就能开箱即用地编译js/jsx/ts/tsx四类脚本文件并将jsx/tsx按 React 语义进行转换。本篇指南围绕compilation.script配置项展开系统讲解如何配置 SWC 解析器Parser、JavaScript 语法生成目标target、原生 Top-Level Await、类型导入处理策略、Decorators 变换以及 SWC 插件接入并介绍 Vite 风格import.meta.glob的编译期转换细节。读完本文你将能够独立为项目定制脚本编译链路并理解其底层实现原理。开箱即用的脚本编译能力Farm 对脚本文件的处理遵循默认合理、按需定制的原则Js/Jsx/Ts/Tsx四种模块类型无需任何配置即可编译其中Jsx/Tsx默认按 React 的方式转换。一个典型的 React 组件代码import Button from ./Button; function ButtonGroup(props: ButtonProps) { return ( div {props.buttons.map((b) ( Button{b}/Button ))} /div ); }可以直接交给 Farm 编译无需额外设置。底层上Farm 使用 SWC 完成脚本编译并在 crates/plugin_script/src/lib.rs 中以FarmPluginScript插件优先级 99承载脚本模块的 load、parse、依赖分析与资源渲染流程。从源码结构看脚本编译链路大致分为四步对应 lib.rs 中的load→parse→process_module→analyze_deps加载根据文件扩展名识别模块类型module_type_from_id读取文件内容与 sourcemap解析依据compilation.script.parser生成 SWC AST并标记顶层作用域top_level_mark/unresolved_mark模块处理按需执行 Decorators 变换 → 剥离 TypeScript 类型 → 执行 SWC 插件 → 转换import.meta.glob见 process_module 实现依赖分析DepsAnalyzer从 AST 中提取 import/require 依赖。所有脚本相关的自定义配置都集中在compilation.script中可参考 compilation.script 配置文档。配置 SWC Parser通过compilation.script.parser可以直接透传 SWC 的解析器选项。其中esConfig作用于.js/.jsx文件tsConfig作用于.ts/.tsx文件。例如要启用 Decorators 语法解析import { defineConfig } from farmfe/core; export default defineConfig({ compilation: { script: { parser: { // for .js/.jsx files esConfig: { decorators: true, }, // for .ts/.tsx files tsConfig: { decorators: true, }, }, }, }, });Farm 默认对.jsx|.tsx文件开启jsx: true其余字段均采用 SWC 的默认值。可在 packages/core/src/config/schema.ts 中看到esConfig与tsConfig支持的完整字段esConfigjsx、fnBind、decorators、decoratorsBeforeExport、exportDefaultFrom、importAssertions、privateInObject、allowSuperOutsideMethod、allowReturnOutsideFunctiontsConfigtsx、decorators、dts、noEarlyErrors。其中dts: true表示该文件为.d.ts类型声明文件Farm 会据此跳过实际的代码生成。解析器配置最终在parse阶段通过syntax_from_module_type应用到 SWC 语法解析上见 lib.rs 的 parse 实现。配置语法生成目标Targetcompilation.script.target控制生成 JavaScript 的语法版本可选值包括es3、es5、es2015es2022、esnext对应 schema.ts 中的 ECMAVersion 枚举。Farm 可以基于浏览器版本化的output.targetEnv自动推导 target:::note 设置output.targetEnv可获得常见生产环境的兼容性预设当只需要控制生成的 JavaScript 语法时直接配置script.target即可。 :::script.target可以配合compilation.presetEnv使用实现针对旧浏览器的整体降级。例如将 target 设为es5并开启presetEnv项目产物就会完整降级到 ES5import { defineConfig } from farmfe/core; export default defineConfig({ compilation: { script: { target: es5, }, presetEnv: true, }, });在底层实现中ScriptConfig.is_target_legacy()会判断 target 是否为es3/es5见 crates/core/src/config/script.rs供编译管线据此决定是否启用对应的旧语法兼容变换targetEnv则有browser、node、library以及自定义字符串等多种取值见 crates/core/src/config/output.rs。关于presetEnv与target的完整机制可进一步参考 Syntax Downgrade and Polyfill。原生 Top-Level Await通过compilation.script.nativeTopLevelAwait可以开启原生顶层await支持。开启后Farm 会保留模块顶层的await语句而不是把它转换掉import { defineConfig } from farmfe/core; export default defineConfig({ compilation: { script: { nativeTopLevelAwait: true, }, }, });:::note 使用该特性要求目标运行环境原生支持 Top-Level Await例如现代浏览器或 Node.js 14.8。 :::该选项在配置层面对应ScriptConfig.native_top_level_await字段见 script.rs。仓库的 top-level-await 示例 演示了该特性的真实使用场景若不开启此选项Farm 会在打包阶段将顶层await变换为兼容写法代价是运行时开销略有增加。控制未作为值使用的导入compilation.script.importNotUsedAsValues用于控制仅作类型导入type-only import的语句处理方式对应 TypeScript 的--importsNotUsedAsValues标志。可选值remove— 删除仅导入类型的 import 语句默认preserve— 保留所有 import 语句。import { defineConfig } from farmfe/core; export default defineConfig({ compilation: { script: { importNotUsedAsValues: remove, // 或 preserve }, }, });从源码看该配置还支持对象形式按正则规则对指定模块保留类型导入importNotUsedAsValues: { preserve: [node_modules/test$], }其底层实现位于 crates/core/src/config/script.rsImportNotUsedAsValues枚举共有Remove、Preserve、Rule三种形态is_preserved(module_id)在 Rule 形态下逐个匹配preserve正则该文件自带的单元测试test_script_import_not_used_as_values验证了node_modules/test被保留、node_modules/test1被移除的匹配行为。在 swc_script_transforms.rs 中default_config会把该策略映射为 SWCImportsNotUsedAsValues::Preserve/Remove作用于 TypeScript 剥离阶段。启用 DecoratorsDecorators 默认处于关闭状态需要两步开启先在 parser 中启用语法解析再配置变换行为。import { defineConfig } from farmfe/core; export default defineConfig({ compilation: { script: { parser: { tsConfig: { // support decorators decorators: true, }, }, // configuring decorators decorators: { legacyDecorator: true, decoratorMetadata: false, decoratorVersion: 2021-12, includes: [src/broken.ts], excludes: [node_modules/], } }, }, });各配置项含义如下对应 ScriptDecoratorsConfig配置项默认值说明legacyDecoratortrue使用 TypeScript 传统的legacyDecorators 语义decoratorMetadatafalse是否生成design:type等装饰器元数据配合emitDecoratorMetadatadecoratorVersion未设置标准规范版本可选2021-12或2022-03对应DecoratorVersion枚举includes[]正则数组仅对匹配的模块执行 Decorators 变换excludes[node_modules/]正则数组跳过匹配的模块默认排除node_modules/仓库提供了完整的 Decorators 支持示例可参考 examples/decorators 目录其中 farm.config.ts 将 target 设为es2022并以 library 模式输出 ESM。Decorators 变换的底层逻辑在 swc_script_transforms.rs 中transform_decorators先根据includes/excludes正则判断模块是否参与变换然后按decoratorVersion选择decorators2021-12 传统版或decorator_2022_03标准版变换器并在变换后注入 helper。注意执行顺序很关键——lib.rs 的 process_module 中注释明确说明 Decorators 变换必须先于 TypeScript 类型剥离执行因为变换过程可能依赖类型信息。默认情况下 Farm 不会对node_modules下的模块做 Decorators 变换详见 compilation.script.decorators.excludes。直接使用 SWC 插件Farm 支持在compilation.script.plugins中直接注册 SWC 插件WASM 形式例如用swc-plugin-vue-jsx编译 Vue JSX。对于 Vue SFC单文件组件则注册 Rust 插件farmfe/plugin-vueimport { defineConfig } from farmfe/core; import vue from farmfe/plugin-vue; export default defineConfig({ compilation: { script: { plugins: [ { name: swc-plugin-vue-jsx, options: { transformOn: true, optimize: true, }, filters: { // resolvedPaths: [.] moduleTypes: [tsx, jsx], }, }, ], }, }, plugins: [vue()], });每个 SWC 插件配置项包含三部分name插件包名Farm 会通过 NodeModules 解析器定位并加载其 WASM 字节码options透传给插件运行时的 JSON 选项filtersresolvedPaths正则数组按模块解析路径匹配与moduleTypes模块类型数组用于控制插件只作用于符合条件的模块。底层实现见 swc_plugins.rstransform_by_swc_plugins会先用should_execute_swc_plugin按 filters 过滤出应执行的插件再通过swc_plugin_runner依次对 AST 应用插件变换。为保证并发安全整个 WASM 变换被调度到独立的 OS 线程执行std::thread::scope 专用 tokio runtime避免在低核 CI 机器上因 rayon 线程池竞争导致死锁——这是 lib.rs 与 swc_plugins.rs 注释中明确记载的设计细节。更完整的说明见 Using Plugins 文档。Vite 风格import.meta.globFarm 完整支持 Vite 风格的import.meta.glob语法。最简单用法const modules import.meta.glob(./dir/*.js);上述代码会在编译期被转换成// code produced by Farm const modules { ./dir/foo.js: () import(./dir/foo.js), ./dir/bar.js: () import(./dir/bar.js), };使用{ eager: true }可以在编译期直接内联模块const modules import.meta.glob(./dir/*.js, { eager: true });转换结果为// code produced by Farm import * as __glob__0_0 from ./dir/foo.js; import * as __glob__0_1 from ./dir/bar.js; const modules { ./dir/foo.js: __glob__0_0, ./dir/bar.js: __glob__0_1, };同时支持多个匹配模式const modules import.meta.glob([./dir/*.js, ./another/*.js]);也支持否定模式negative patterns用!前缀排除文件const modules import.meta.glob([./dir/*.js, !**/bar.js]);// code produced by Farm const modules { ./dir/foo.js: () import(./dir/foo.js), };:::noteimport.meta.glob的所有参数必须以字面量形式传入不能使用变量或表达式import.meta.glob在编译期由 Farm 完成转换运行时并不存在该 API。 :::从实现看该变换由独立 crate swc_transformer_import_glob 提供transform_import_meta_glob解析出sources匹配到的模块列表、eager是否急切加载、glob_import_as如raw与import如default等信息再生成对应的懒加载箭头函数或命名/默认/命名空间导入create_eager_named_import、create_eager_default_import、create_eager_namespace_import并在模块顶部插入生成代码。该 crate 的tests目录下包含 50 余个转换测试用例可验证各种模式的输出形态。在 lib.rs 中import.meta.glob与import.meta.url的转换被统一放在process_module阶段、依赖分析之前执行确保生成的动态导入能进入后续的依赖图构建。小结compilation.script是 Farm 脚本编译能力的统一入口parser 决定如何解析target 决定生成到什么语法版本nativeTopLevelAwait、importNotUsedAsValues与decorators决定哪些语法特性被保留或变换plugins则允许无缝复用整个 SWC 插件生态而import.meta.glob让 Vite 风格的批量模块导入在编译期得到原生支持。上述所有能力都有对应的源码实现与测试用例支撑可在 crates/plugin_script、crates/core/src/config/script.rs 与 packages/core/src/config/schema.ts 中继续深入研读。赞分享前端构建构建工具开发工具【免费下载链接】farmExtremely fast Vite-compatible web build tool written in Rust项目地址https://gitcode.com/gh_mirrors/fa/farm点击查看免费下载相关推荐Farm 装饰器Decorators实战与原理从 script.decorators 配置到 SWC 底层转换Farm 装饰器Decorators实战与原理从 script.decorators 配置到 SWC 底层转换 导读 TypeScript / JavaS前端构建构建工具开发工具farmfe_plugin_script 演进与源码解析Farm 的 JS/TS 脚本编译插件是如何工作的farmfe_plugin_script 演进与源码解析Farm 的 JS/TS 脚本编译插件是如何工作的 Farm一个使用 Rust 编写的 Vite 兼前端构建构建工具开发工具Babel Decorators 插件实战babel/plugin-proposal-decorators 的 version 配置与双模式编译原理Babel Decorators 插件实战babel/plugin proposal decorators 的 version 配置与双模式编译原理 ba编译器开发工具上一篇PX4 中的 SensorGnssRf UORB 消息GNSS 射频状态监控的字段、枚举与多块发布机制下一篇Photoshop图层批量导出的终极解决方案效率提升90倍的专业插件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考