or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

babel-plugins.mdindex.mdmain-preset.mdreact-native.md
tile.json

main-preset.mddocs/

Main Preset Configuration

Core preset factory function that provides comprehensive Babel configuration for Taro applications, intelligently selecting presets and plugins based on target platform, framework, and environment.

Capabilities

Preset Factory Function

Main entry point that returns a Babel configuration object optimized for the specified framework and target environment.

/**
 * Main preset factory function for Babel Preset Taro
 * @param {Object} _ - Babel API object (unused in current implementation)
 * @param {PresetOptions} options - Configuration options
 * @returns {BabelConfig} Complete Babel configuration object
 */
function babelPresetTaro(_, options = {}) { ... }

interface PresetOptions {
  /** Target framework */
  framework: 'react' | 'vue3' | 'solid' | 'preact';
  /** Compiler type (affects preset selection) */
  compiler?: 'vite' | string;
  /** TypeScript support configuration */
  ts?: boolean | TypeScriptConfig;
  /** React JSX runtime mode (default: 'automatic') */
  reactJsxRuntime?: 'automatic' | 'classic';
  /** Enable hot reloading in development (default: true) */
  hot?: boolean;
  /** Vue3 JSX support configuration (default: true) */
  vueJsx?: boolean | VueJsxConfig;
  /** Additional React preset options */
  react?: ReactPresetConfig;
  /** Babel env targets (default: {ios: '9', android: '5'}) */
  targets?: TargetsConfig;
  /** Core-js polyfill strategy (default: false) */
  useBuiltIns?: 'entry' | 'usage' | false;
  /** Enable loose mode transformations (default: false) */
  loose?: boolean;
  /** Enable debug output (default: false) */
  debug?: boolean;
  /** Module transform type (default: false) */
  modules?: string | false;
  /** Enable spec-compliant transforms */
  spec?: boolean;
  /** Ignore browserslist configuration */
  ignoreBrowserslistConfig?: boolean;
  /** Custom browserslist config path */
  configPath?: string;
  /** Include specific transforms */
  include?: string[];
  /** Exclude specific transforms */
  exclude?: string[];
  /** Enable shipped proposals */
  shippedProposals?: boolean;
  /** Force all transforms */
  forceAllTransforms?: boolean;
  /** Decorators before export syntax */
  decoratorsBeforeExport?: boolean;
  /** Use legacy decorators */
  decoratorsLegacy?: boolean;
  /** Absolute runtime path */
  absoluteRuntime?: string | boolean;
  /** Runtime version */
  version?: string;
  /** Enable dynamic import node plugin */
  'dynamic-import-node'?: boolean;
}

interface BabelConfig {
  sourceType: 'unambiguous';
  overrides: OverrideConfig[];
}

Usage Examples:

const babelPresetTaro = require('babel-preset-taro');

// React configuration
const reactConfig = babelPresetTaro({}, {
  framework: 'react',
  ts: true,
  reactJsxRuntime: 'automatic',
  hot: true,
  targets: {
    ios: '10',
    android: '5'
  }
});

// Vue3 configuration
const vueConfig = babelPresetTaro({}, {
  framework: 'vue3',
  ts: true,
  vueJsx: {
    mergeProps: false
  },
  useBuiltIns: 'usage'
});

// Solid configuration
const solidConfig = babelPresetTaro({}, {
  framework: 'solid',
  ts: true,
  loose: true
});

Framework-Specific Configuration

React Framework Support

Configures React-specific presets and plugins including JSX transformation and hot reloading.

interface ReactPresetConfig {
  /** JSX runtime mode */
  runtime?: 'automatic' | 'classic';
  /** Development mode */
  development?: boolean;
  /** Throw if namespace is used */
  throwIfNamespace?: boolean;
  /** Pure annotation */
  pure?: boolean;
}

Vue3 Framework Support

Configures Vue3-specific JSX transformation and TypeScript integration.

interface VueJsxConfig {
  /** Transform 'v-on' to onXxx props */
  transformOn?: boolean;
  /** Optimize components */
  optimize?: boolean;
  /** Merge props */
  mergeProps?: boolean;
  /** Enable object slots */
  enableObjectSlots?: boolean;
}

TypeScript Configuration

Handles TypeScript compilation with framework-aware settings.

interface TypeScriptConfig {
  /** Enable all extensions */
  allExtensions?: boolean;
  /** Enable TSX */
  isTSX?: boolean;
  /** JSX pragma */
  jsxPragma?: string;
  /** JSX pragma fragment */
  jsxPragmaFrag?: string;
  /** Allow namespaces */
  allowNamespaces?: boolean;
  /** Allow declare fields */
  allowDeclareFields?: boolean;
}

Environment Detection

Browserslist Detection

Utility function that detects if the project has browserslist configuration.

/**
 * Detects if project has browserslist configuration
 * @returns {boolean} True if browserslist config found
 */
function hasBrowserslist() { ... }

Checks for browserslist configuration in:

  • package.json browserslist field
  • .browserslistrc file
  • BROWSERSLIST environment variable

Platform-Specific Behavior

Web/H5 Platform

  • Enables React Refresh for development hot reloading
  • Disables dynamic-import-node by default
  • Supports all framework options

Mini-Program Platforms

  • Enables dynamic-import-node for compatibility
  • Applies Taro component transformations
  • Framework-specific optimizations

Harmony Platform

  • Forces TypeScript processing through Babel
  • Uses standard web configuration otherwise

Types

interface OverrideConfig {
  exclude?: RegExp[];
  include?: RegExp | string;
  presets?: any[];
  plugins?: any[];
}

interface TargetsConfig {
  /** iOS version */
  ios?: string;
  /** Android version */
  android?: string;
  /** Node version */
  node?: string;  
  /** Browsers query */
  browsers?: string[];
}

interface EnvConfig {
  spec?: boolean;
  loose?: boolean;
  debug?: boolean;
  modules?: string | false;
  targets?: TargetsConfig;
  useBuiltIns?: 'entry' | 'usage' | false;
  ignoreBrowserslistConfig?: boolean;
  configPath?: string;
  include?: string[];
  exclude?: string[];
  shippedProposals?: boolean;
  forceAllTransforms?: boolean;
  corejs?: string;
}