tessl/npm-rollup--plugin-babel

Seamless integration between Rollup and Babel enabling transpilation during bundling with multiple helper strategies.

—

Pending

Overview

Eval results

Files

Output Plugin

Name: tessl/npm-rollup--plugin-babel
Author: tessl

The output plugin transforms generated chunks after Rollup has completed its bundling process. This is the only way to transform Rollup's auto-generated wrapper code and is useful for applying compatibility transformations to the final output.

Capabilities

Output Plugin Function

Creates a plugin for transforming output chunks during the renderChunk phase.

/**
 * Creates a Babel plugin for transforming output chunks
 * @param options - Plugin options for output transformation
 * @returns Plugin instance for output transformation
 */
function getBabelOutputPlugin(options?: RollupBabelOutputPluginOptions): Plugin;

Usage Examples:

import { getBabelOutputPlugin } from '@rollup/plugin-babel';

// Basic output transformation
export default {
  input: 'main.js',
  plugins: [
    getBabelOutputPlugin({
      presets: ['@babel/preset-env']
    })
  ],
  output: [
    { file: 'bundle.cjs.js', format: 'cjs' },
    { file: 'bundle.es.js', format: 'es' }
  ]
};

// Applied to specific outputs only
export default {
  input: 'main.js',
  output: [
    { file: 'bundle.js', format: 'es' },
    {
      file: 'bundle.es5.js',
      format: 'es',
      plugins: [getBabelOutputPlugin({ presets: ['@babel/preset-env'] })]
    }
  ]
};

Configuration Options

Configuration interface for output plugin.

interface RollupBabelOutputPluginOptions extends Omit<BabelTransformOptions, 'include' | 'exclude'> {
  /**
   * Allow formats other than ES modules or CommonJS
   * @default false
   */
  allowAllFormats?: boolean;
}

Usage Examples:

Format Compatibility

Working with different output formats:

// Recommended: Use ES format and let Babel handle module transformation
export default {
  input: 'main.js',
  output: {
    file: 'bundle.umd.js',
    format: 'es' // Keep as ES, let Babel transform
  },
  plugins: [
    getBabelOutputPlugin({
      presets: [['@babel/preset-env', { modules: 'umd' }]]
    })
  ]
};

// Alternative: Allow all formats (less safe)
export default {
  input: 'main.js',
  output: {
    file: 'bundle.iife.js',
    format: 'iife'
  },
  plugins: [
    getBabelOutputPlugin({
      allowAllFormats: true,
      presets: ['@babel/preset-env']
    })
  ]
};

Babel Configuration Files

Output plugin doesn't automatically search for Babel config files:

import path from 'path';

getBabelOutputPlugin({
  configFile: path.resolve(__dirname, 'babel.config.js'),
  presets: ['@babel/preset-env']
});

Runtime Helpers

Using runtime helpers with output transformation:

// For ES modules
getBabelOutputPlugin({
  presets: ['@babel/preset-env'],
  plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]]
});

// For CommonJS
getBabelOutputPlugin({
  presets: ['@babel/preset-env'],
  plugins: [['@babel/plugin-transform-runtime', { useESModules: false }]]
});

Combined Input and Output Processing

Using both input and output plugins together:

import { babel, getBabelOutputPlugin } from '@rollup/plugin-babel';

export default {
  input: 'main.js',
  plugins: [
    // Transform special syntax during input
    babel({ presets: ['@babel/preset-react'] })
  ],
  output: {
    file: 'bundle.js',
    format: 'es',
    plugins: [
      // Transform for compatibility during output
      getBabelOutputPlugin({ presets: ['@babel/preset-env'] })
    ]
  }
};

Output Plugin Limitations

Important constraints and considerations:

// These options are ignored and will produce warnings
getBabelOutputPlugin({
  include: '**/*.js',     // ⚠️ Ignored
  exclude: 'node_modules/**', // ⚠️ Ignored
  extensions: ['.js'],    // ⚠️ Ignored
  presets: ['@babel/preset-env']
});

// Format restrictions (without allowAllFormats)
getBabelOutputPlugin({
  // Only 'es' and 'cjs' formats are allowed by default
  presets: ['@babel/preset-env']
});

Plugin Hooks

The output plugin implements specific Rollup hooks:

interface OutputPlugin {
  name: 'babel';
  renderStart?(outputOptions: OutputOptions): void;
  renderChunk?(code: string, chunk: RenderedChunk, outputOptions: OutputOptions): TransformResult | null;
}

interface OutputOptions {
  format: 'es' | 'cjs' | 'amd' | 'iife' | 'umd' | 'system';
  // ... other output options
}

interface RenderedChunk {
  fileName: string;
  isEntry: boolean;
  isDynamicEntry: boolean;
  // ... other chunk properties
}

// From @babel/core
interface BabelTransformOptions {
  filename?: string;
  filenameRelative?: string;
  presets?: any[];
  plugins?: any[];
  sourceMaps?: boolean;
  sourceType?: 'script' | 'module' | 'unambiguous';
  // ... other Babel options
}

interface TransformResult {
  code: string;
  map?: SourceMap;
}

interface SourceMap {
  version: number;
  sources: string[];
  names: string[];
  mappings: string;
  file?: string;
  sourcesContent?: string[];
}

Install with Tessl CLI

npx tessl i tessl/npm-rollup--plugin-babel

docs

custom-plugin-factories.md