or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

tessl/npm-babel-preset-taro

Comprehensive Babel preset for Taro cross-platform development framework supporting React, Vue3, Solid, and Preact with intelligent platform-specific optimizations

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-preset-taro@4.1.x

To install, run

npx @tessl/cli install tessl/npm-babel-preset-taro@4.1.0

index.mddocs/

Babel Preset Taro

Babel Preset Taro is a comprehensive Babel preset specifically designed for the Taro cross-platform development framework. It intelligently configures Babel transformation based on the target platform and framework choice (React, Vue3, Solid, Preact), providing optimal build tooling that adapts to different deployment targets while maintaining compatibility across diverse JavaScript platforms.

Package Information

  • Package Name: babel-preset-taro
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install babel-preset-taro

Core Imports

module.exports = {
  presets: [
    ['babel-preset-taro', {/** configuration options */}]
  ]
}

For programmatic usage:

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

Basic Usage

// babel.config.js
module.exports = {
  presets: [
    ['babel-preset-taro', {
      framework: 'react',
      ts: true,
      targets: {
        ios: '9',
        android: '5'
      }
    }]
  ]
}
// Programmatic usage
const babelPresetTaro = require('babel-preset-taro');

const config = babelPresetTaro({}, {
  framework: 'vue3',
  ts: true,
  vueJsx: true
});

Architecture

Babel Preset Taro is built around several key components:

  • Platform Detection: Automatically detects target platform (web, mini-program, React Native) via environment variables
  • Framework Adapters: Specialized configurations for React, Vue3, Solid, and Preact frameworks
  • Environment Optimization: Intelligent preset selection based on development/production environments
  • Plugin System: Extensible plugin architecture with built-in transformations for Taro-specific needs
  • Type Integration: Full TypeScript support with framework-aware configurations

Capabilities

Main Preset Configuration

Core preset factory function that returns comprehensive Babel configuration based on target platform, framework, and environment options.

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

interface PresetOptions {
  framework: 'react' | 'vue3' | 'solid' | 'preact';
  compiler?: 'vite' | string;
  ts?: boolean | object;
  reactJsxRuntime?: 'automatic' | 'classic';
  hot?: boolean;
  vueJsx?: boolean | object;
  react?: object;
  targets?: object;
  useBuiltIns?: 'entry' | 'usage' | false;
  loose?: boolean;
  debug?: boolean;
  modules?: string | false;
  spec?: boolean;
  ignoreBrowserslistConfig?: boolean;
  configPath?: string;
  include?: string[];
  exclude?: string[];
  shippedProposals?: boolean;
  forceAllTransforms?: boolean;
  decoratorsBeforeExport?: boolean;
  decoratorsLegacy?: boolean;
  absoluteRuntime?: string | boolean;
  version?: string;
  'dynamic-import-node'?: boolean;
}

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

Main Preset Configuration

React Native Support

Specialized preset configuration for React Native environments with optimized transformations and import handling for Taro RN APIs.

/**
 * React Native preset factory function
 * @param {Object} api - Babel API object  
 * @param {RNPresetOptions} options - RN-specific configuration options
 * @returns {RNBabelConfig} React Native Babel configuration
 */
function reactNativePreset(api, options = {}) { ... }

interface RNPresetOptions {
  framework?: 'react' | 'preact';
  decoratorsBeforeExport?: boolean;
  decoratorsLegacy?: boolean;
}

interface RNBabelConfig {
  presets: any[];
  plugins: any[];
}

React Native Support

Custom Babel Plugins

Built-in Babel plugins for Taro-specific transformations including component optimization and configuration cleanup.

/**
 * Plugin for removing definePageConfig calls from source files
 * @param {Object} babel - Babel instance
 * @returns {BabelPlugin} Plugin configuration
 */
function removeDefineConfigPlugin(babel) { ... }

/**
 * Plugin for transforming Taro List/ListItem components
 * @param {Object} api - Babel API with helper utilities
 * @returns {BabelPlugin} Component transformation plugin
 */  
function transformTaroComponentsPlugin(api) { ... }

interface BabelPlugin {
  name: string;
  visitor: object;
}

Custom Babel Plugins

Environment Variables

The preset behavior is controlled by several environment variables:

  • TARO_ENV: Target environment ('rn', 'h5', 'weapp')
  • TARO_PLATFORM: Target platform ('web', 'harmony', 'weapp')
  • NODE_ENV: Node environment ('production', 'development', 'test', 'jest')
  • BROWSERSLIST: Browserslist targets string

Types

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

interface TransformRuntimeConfig {
  regenerator: boolean;
  corejs: number | false;
  helpers: boolean;
  useESModules: boolean;
  absoluteRuntime: string | boolean;
  version: string;
}

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