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.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
transformer.mddocs/
Transformer Implementation
The core transformer that integrates with Parcel's build pipeline to apply Babel transformations to JavaScript, TypeScript, and JSX assets.
Capabilities
BabelTransformer (Default Export)
The default export is a Transformer instance (not a class) that implements Parcel's Transformer interface for Babel processing.
/**
* Default export - Babel transformer instance for Parcel
* This is a pre-configured Transformer instance, not a class or constructor
* Implements the complete Transformer interface for Babel compilation
*/
export default BabelTransformer: Transformer;
interface Transformer {
loadConfig(options: LoadConfigOptions): Promise<BabelConfigResult | null>;
canReuseAST(options: CanReuseASTOptions): boolean;
transform(options: TransformOptions): Promise<MutableAsset[]>;
generate(options: GenerateOptions): Promise<GenerateResult>;
}Load Configuration
Loads and validates Babel configuration for the current asset being processed.
/**
* Loads Babel configuration for the current asset
* @param options - Configuration loading options
* @returns Promise resolving to BabelConfigResult or null if no config needed
*/
loadConfig(options: LoadConfigOptions): Promise<BabelConfigResult | null>;
interface LoadConfigOptions {
config: Config;
options: PluginOptions;
logger: PluginLogger;
}Usage Example:
// Called internally by Parcel
const configResult = await transformer.loadConfig({
config: parcelConfig,
options: pluginOptions,
logger: parcelLogger
});AST Reuse Check
Determines if an existing AST can be reused for the current transformation.
/**
* Determines if the provided AST can be reused for transformation
* @param options - AST reuse check options
* @returns True if AST can be reused, false otherwise
*/
canReuseAST(options: CanReuseASTOptions): boolean;
interface CanReuseASTOptions {
ast: AST;
}
interface AST {
type: string;
version: string;
program: any;
}Implementation Details:
- Returns
trueif AST type is 'babel' and version satisfies '^7.0.0' - Enables performance optimization by reusing compatible ASTs
Transform Asset
Performs the core Babel transformation on JavaScript assets.
/**
* Transforms JavaScript/TypeScript/JSX assets using Babel
* @param options - Transformation options
* @returns Promise resolving to array containing the transformed asset
*/
transform(options: TransformOptions): Promise<MutableAsset[]>;
interface TransformOptions {
asset: MutableAsset;
config: BabelConfigResult | null;
logger: PluginLogger;
options: PluginOptions;
tracer: PluginTracer;
}Usage Example:
// Called internally by Parcel
const transformedAssets = await transformer.transform({
asset: jsAsset,
config: babelConfig,
logger: parcelLogger,
options: pluginOptions,
tracer: performanceTracer
});Transformation Process:
- Checks if Babel configuration exists
- Applies additional plugins from asset metadata if present
- Calls
babel7()function to perform actual transformation - Enhances any errors with source context
- Returns array containing the single transformed asset
Generate Code
Generates final JavaScript code and source maps from the transformed AST.
/**
* Generates JavaScript code and source maps from Babel AST
* @param options - Code generation options
* @returns Promise resolving to generated code and source map
*/
generate(options: GenerateOptions): Promise<GenerateResult>;
interface GenerateOptions {
asset: MutableAsset;
ast: AST;
options: PluginOptions;
}
interface GenerateResult {
content: string;
map: SourceMap;
}Generation Process:
- Retrieves original source map from asset
- Resolves @babel/core and @babel/generator dependencies
- Generates code using Babel generator with:
- Source file name relative to project root
- Source map generation enabled based on environment
- Comment preservation enabled
- Import attributes using 'with' keyword
- Creates new SourceMap and adds index mappings
- Copies source content from original map if available
Usage Example:
// Called internally by Parcel during code generation phase
const result = await transformer.generate({
asset: processedAsset,
ast: babelAST,
options: pluginOptions
});
console.log(result.content); // Generated JavaScript code
console.log(result.map); // Source map for debuggingError Handling
The transformer includes comprehensive error handling:
- Configuration Errors: Invalid or problematic Babel configurations
- Transformation Errors: Babel compilation failures with enhanced context
- Dependency Errors: Missing or incompatible Babel dependencies
- AST Errors: Invalid or incompatible AST structures
All errors are enhanced with source context using the babelErrorEnhancer function before being thrown.
Performance Considerations
- AST Reuse: Checks for compatible ASTs to avoid re-parsing
- Dependency Caching: Resolves and caches Babel dependencies
- Source Map Optimization: Efficient source map generation and copying
- Configuration Warnings: Alerts about performance-impacting configurations
Install with Tessl CLI
npx tessl i tessl/npm-parcel--transformer-babel