TS/TSX

Farm support compiling Js/Jsx/Ts/Tsx out of box, and compile Jsx/Tsx to React by default.

./button.tsx

Farm using SWC to compile scripts, and Farm has set reasonable default configurations for script compilation. Also, you can use compilation.script to configure how to compile your script file. see compilation.script for details.

Configuring Swc Parser

You can configuring the SWC Parser through compilation.script.parser. Refer to https://swc.rs/docs/configuration/compilation#jscparser.

For example, if you want to enable decorator, you can set compilation.script.parser.esConfig.decorators(or tsConfig.decorators if the module is TS):

farm.config.ts

By default Farm set jsx: true for .jsx|.tsx files. Other field are default to SWC's defaults.

Configuring Target

Using compilation.script.target to configure your target env when running your project, Farm set it based on output.targetEnv.

note

Farm set compilation.script.target automatically based on output.targetEnv. Normally you should not set target manually, use output.targetEnv would be enough.

This option can be used along with compilation.presetEnv to gracefully downgrade your project for old browsers. For example, you can set target to ES5 and enable presetEnv, then your project will be fully downgrade to ES5.

farm.config.ts

Refer to Syntax Downgrade and Polyfill for more about presetEnv and target.

Decorators

Decorators is disabled by default, you can set compilation.script.parser.tsConfig.decorators to true to enable decorators.

Farm provide a example for supporting decorators, see https://github.com/farm-fe/farm/tree/main/examples/decorators By default, Farm won't transform decorators for modules under node_modules, refer to compilation.script.decorators.excludes.

Using SWC Plugins

SWC Plugins can be used directly in Farm, for example, we use swc-plugin-vue-jsx to compiling vue jsx in Farm:

farm.config.ts

Refer to Using Plugins for more details.

Vite-style import.meta.glob

Farm fully support Vite-style import.meta.glob, see glob import.

for example:

The above will be transformed into the following:

Using { eager: true }:

The above will be transformed into the following:

multiple patterns are supported:

negative patterns are also supported:

note

• You should also be aware that all the arguments in the import.meta.glob must be passed as literals. You can NOT use variables or expressions in them.
• import.meta.glob transformed by Farm in compile time, it does not exist in runtime.