or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

babel-processing.mdconfiguration.mderror-handling.mdindex.mdtransformer.mdutilities.md
tile.json

tessl/npm-parcel--transformer-babel

A Parcel transformer plugin that transforms JavaScript code using Babel with automatic configuration discovery and intelligent defaults for modern JavaScript, TypeScript, JSX, and Flow.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@parcel/transformer-babel@2.15.x

To install, run

npx @tessl/cli install tessl/npm-parcel--transformer-babel@2.15.0

index.mddocs/

@parcel/transformer-babel

@parcel/transformer-babel is a Parcel transformer plugin that integrates Babel compilation into the Parcel build pipeline. It automatically discovers and applies Babel configuration files or uses intelligent defaults when no configuration is found, supporting modern JavaScript features, TypeScript, JSX, and Flow type stripping.

Package Information

  • Package Name: @parcel/transformer-babel
  • Package Type: npm
  • Language: JavaScript (with Flow types)
  • Installation: Installed automatically as part of Parcel, or npm install @parcel/transformer-babel
  • License: MIT
  • Node Version: >= 16.0.0
  • Parcel Version: ^2.15.4

Core Imports

// This is a Parcel plugin - not directly imported by users
// Parcel automatically loads and uses this transformer based on configuration

// For plugin development or advanced use cases:
const BabelTransformer = require("@parcel/transformer-babel");
// BabelTransformer is the default export - a pre-configured Transformer instance

// Named exports for specific functionality:
const { load } = require("@parcel/transformer-babel/lib/config");
const { babelErrorEnhancer } = require("@parcel/transformer-babel/lib/babelErrorUtils");

Basic Usage

This transformer is used internally by Parcel and not directly by user code. Parcel automatically applies this transformer to JavaScript, TypeScript, and JSX files based on configuration.

Automatic Babel Configuration Discovery:

// .babelrc or babel.config.js in your project
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Default Behavior (no config):

  • Automatically applies Flow type stripping when flow-bin is detected
  • Enables TypeScript compilation for .ts and .tsx files
  • Applies JSX transformation when React-like dependencies are found
  • Uses @babel/preset-env with browserslist targets from package.json

Architecture

@parcel/transformer-babel is built around several key components:

  • Configuration System: Automatic discovery of Babel config files with fallback to intelligent defaults
  • Transformer Pipeline: Integration with Parcel's asset transformation system
  • AST Management: Efficient AST reuse and source map handling
  • Error Enhancement: Enhanced error reporting with source context
  • Auto-installation: Automatic installation of required Babel dependencies
  • Performance Optimization: Caching strategies and performance warnings for sub-optimal configurations

Capabilities

Transformer Implementation

The core transformer that integrates with Parcel's build pipeline to apply Babel transformations to JavaScript assets.

// Default export - Pre-configured Transformer instance (not a class)
export default BabelTransformer: Transformer;

interface Transformer {
  loadConfig(options: {
    config: Config;
    options: PluginOptions;
    logger: PluginLogger;
  }): Promise<BabelConfigResult | null>;
  
  canReuseAST(options: { ast: AST }): boolean;
  
  transform(options: {
    asset: MutableAsset;
    config: BabelConfigResult | null;
    logger: PluginLogger;
    options: PluginOptions;
    tracer: PluginTracer;
  }): Promise<MutableAsset[]>;
  
  generate(options: {
    asset: MutableAsset;
    ast: AST;
    options: PluginOptions;
  }): Promise<{ content: string; map: SourceMap }>;
}

Transformer Implementation

Configuration Management

Babel configuration loading, validation, and default configuration generation with automatic dependency detection.

function load(
  config: Config,
  options: PluginOptions,
  logger: PluginLogger
): Promise<BabelConfigResult | null>;

interface BabelConfigResult {
  internal: boolean;
  config: BabelConfig;
  targets?: mixed;
  syntaxPlugins?: mixed;
}

interface BabelConfig {
  plugins?: Array<any>;
  presets?: Array<any>;
}

Configuration Management

Babel Processing Engine

Core Babel 7 processing functionality that performs the actual code transformation with AST management.

function babel7(opts: Babel7TransformOptions): Promise<AST | null>;

interface Babel7TransformOptions {
  asset: MutableAsset;
  options: PluginOptions;
  logger: PluginLogger;
  babelOptions: any;
  additionalPlugins?: Array<any>;
  tracer: PluginTracer;
}

Babel Processing Engine

Error Handling

Enhanced error reporting and diagnostics for Babel compilation errors.

function babelErrorEnhancer(
  error: BabelError,
  asset: BaseAsset
): Promise<BabelError>;

interface BabelError extends Error {
  loc?: {
    line: number;
    column: number;
  };
  source?: string;
  filePath?: string;
}

Error Handling

Utility Functions

Internal helper functions for target conversion, JSX detection, Flow configuration, and AST manipulation. These are not exported and are used internally by the transformer.

// Internal utility functions (not exported)
function enginesToBabelTargets(env: Environment): BabelTargets;  // @internal
function isJSX(options: PluginOptions, config: Config): Promise<boolean>;  // @internal  
function getFlowOptions(config: Config, options: PluginOptions): Promise<BabelConfig | null>;  // @internal
function remapAstLocations(t: BabelTypes, ast: BabelNodeFile, map: SourceMap): void;  // @internal

Utility Functions

Common Types

// Core Parcel types used throughout the transformer
interface Config {
  isSource: boolean;
  searchPath: string;
  invalidateOnFileCreate(options: { fileName: string; aboveFilePath: string }): void;
  invalidateOnFileChange(filePath: string): void;
  invalidateOnStartup(): void;
  invalidateOnEnvChange(envVar: string): void;
  addDevDependency(dependency: DevDependency): void;
  setCacheKey(key: string): void;
  getPackage(): Promise<PackageJSON | null>;
  getConfigFrom<T>(searchPath: string, filenames: string[]): Promise<ConfigResult<T> | null>;
}

interface PluginOptions {
  inputFS: FileSystem;
  packageManager: PackageManager;
  projectRoot: string;
  env: { [key: string]: string };
  mode: string;
  shouldAutoInstall: boolean;
}

interface MutableAsset {
  filePath: string;
  env: Environment;
  meta: AssetMeta;
  getAST(): Promise<AST | null>;
  setAST(ast: AST): void;
  getCode(): Promise<string>;
  getMap(): Promise<SourceMap | null>;
  isASTDirty(): boolean;
  invalidateOnFileChange(filePath: string): void;
  invalidateOnFileCreate(options: { filePath: string }): void;
}

interface Environment {
  engines: { [key: string]: string };
  outputFormat: string;
  sourceMap: boolean;
  isBrowser(): boolean;
}