Seamless integration between Rollup and Babel for transpiling ES6/7+ code during bundling
npx @tessl/cli install tessl/npm-rollup-plugin-babel@4.4.0rollup-plugin-babel provides seamless integration between Rollup (JavaScript module bundler) and Babel (JavaScript transpiler), enabling developers to transform ES6/7+ code during the bundling process. It automatically deduplicates Babel helpers, supports both Babel 6 and 7, and handles complex scenarios like external dependencies and runtime helpers.
npm install --save-dev rollup-plugin-babel@latestimport babel from "rollup-plugin-babel";For CommonJS:
const babel = require("rollup-plugin-babel");import { rollup } from "rollup";
import babel from "rollup-plugin-babel";
// Modern Rollup (1.x+)
rollup({
input: "main.js",
plugins: [
babel({
exclude: "node_modules/**"
})
]
}).then(bundle => {
// Bundle is ready
});
// Legacy Rollup (0.x)
rollup({
entry: "main.js", // 'entry' was used instead of 'input'
plugins: [
babel({
exclude: "node_modules/**"
})
]
});rollup-plugin-babel is built around several key components:
Creates a Rollup plugin for Babel transpilation with comprehensive configuration options.
/**
* Creates a Rollup plugin for Babel transpilation
* @param {BabelPluginOptions} options - Configuration options
* @returns {RollupPlugin} Configured Rollup plugin
*/
function babel(options?: BabelPluginOptions): RollupPlugin;
interface BabelPluginOptions {
/** File extensions to transpile (default: babel.DEFAULT_EXTENSIONS: ['.js', '.jsx', '.es6', '.es', '.mjs']) */
extensions?: string[];
/** Minimatch pattern(s) for files to include */
include?: string | RegExp | Array<string | RegExp>;
/** Minimatch pattern(s) for files to exclude */
exclude?: string | RegExp | Array<string | RegExp>;
/** Whether to use external Babel helpers via global babelHelpers object (default: false) */
externalHelpers?: boolean;
/** Whitelist specific external helpers when using externalHelpers */
externalHelpersWhitelist?: string[];
/** Whether to use @babel/plugin-transform-runtime helpers (default: false) */
runtimeHelpers?: boolean;
/** Enable sourcemaps - all variants map to same option (default: true) */
sourcemap?: boolean;
sourcemaps?: boolean;
sourceMap?: boolean;
sourceMaps?: boolean;
/** Standard Babel configuration options */
plugins?: any[];
presets?: any[];
babelrc?: boolean;
/** Any other Babel configuration options */
[key: string]: any;
}
interface RollupPlugin {
name: string;
resolveId?(id: string): string | null;
load?(id: string): string | null;
transform?(code: string, id: string): Promise<TransformResult | null>;
}
interface TransformResult {
code: string;
map?: any;
}Usage Examples:
// Basic configuration
babel({
exclude: "node_modules/**",
presets: [["@babel/preset-env", { modules: false }]]
})
// With external helpers
babel({
externalHelpers: true,
plugins: ["external-helpers"]
})
// Runtime helpers configuration
babel({
runtimeHelpers: true,
plugins: ["@babel/plugin-transform-runtime"]
})
// File filtering
babel({
include: ["src/**/*"],
exclude: ["src/**/*.test.js"],
extensions: [".js", ".jsx", ".ts", ".tsx"]
})Advanced utility for creating custom Babel plugin configurations with lifecycle hooks.
/**
* Creates a custom plugin builder with advanced configuration hooks
* @param {CustomCallback} callback - Callback that receives babel core instance
* @returns {PluginFactory} Custom plugin factory function
*/
function custom(callback: CustomCallback): PluginFactory;
type CustomCallback = (babelCore: typeof import('@babel/core')) => CustomHooks;
interface CustomHooks {
/**
* Modify plugin options before processing. Must be synchronous.
* @param pluginOptions - Raw options passed to the plugin
* @returns Object with customOptions and pluginOptions
*/
options?(pluginOptions: any): OptionsResult;
/**
* Modify Babel configuration per file
* @param cfg - Babel's PartialConfig object
* @param context - Contains code and customOptions
* @returns Modified Babel options object
*/
config?(cfg: PartialConfig, context: ConfigContext): any;
/**
* Modify transformation result after Babel processing
* @param result - Babel transformation result
* @param context - Contains code, customOptions, config, and transformOptions
* @returns Modified transformation result
*/
result?(result: TransformResult, context: ResultContext): TransformResult;
}
interface OptionsResult {
/** Custom options to pass to config and result hooks */
customOptions?: any;
/** Processed plugin options to pass to Babel */
pluginOptions: any;
}
interface ConfigContext {
/** Source code being transformed */
code: string;
/** Custom options returned from options hook */
customOptions: any;
}
interface ResultContext {
/** Source code being transformed */
code: string;
/** Custom options returned from options hook */
customOptions: any;
/** Babel configuration object */
config: any;
/** Final Babel transform options */
transformOptions: any;
}
interface PartialConfig {
/** Check if Babel found a filesystem config (.babelrc, babel.config.js, etc.) */
hasFilesystemConfig(): boolean;
/** Babel configuration options */
options: any;
}
type PluginFactory = (options?: any) => RollupPlugin;Usage Examples:
// Custom plugin with configuration hooks
const customBabel = babel.custom(babelCore => ({
options(opts) {
const { customOpt, ...pluginOptions } = opts;
return {
customOptions: { customOpt },
pluginOptions
};
},
config(cfg, { code, customOptions }) {
if (cfg.hasFilesystemConfig()) {
return cfg.options;
}
return {
...cfg.options,
plugins: [
...(cfg.options.plugins || []),
myCustomPlugin
]
};
},
result(result, { customOptions }) {
return {
...result,
code: result.code + "\\n// Generated with custom transforms"
};
}
}));
// Use the custom plugin
export default {
plugins: [customBabel({ customOpt: true })]
};The plugin automatically manages Babel helpers to optimize bundle size through three strategies:
babelHelpers object. Use with externalHelpers: true and the external-helpers plugin.runtimeHelpers: true and @babel/plugin-transform-runtime.Automatic Helper Deduplication: Unlike manual Babel compilation, rollup-plugin-babel automatically deduplicates inline helpers across all modules, preventing code duplication even when helpers are used in multiple files.
// External helpers configuration
babel({
externalHelpers: true,
plugins: ["external-helpers"]
})
// Runtime helpers (requires @babel/plugin-transform-runtime)
babel({
runtimeHelpers: true,
plugins: ["@babel/plugin-transform-runtime"]
})Control which files are processed using include/exclude patterns and extensions:
babel({
// Process only source files
include: ["src/**/*"],
// Skip test files and node_modules
exclude: ["**/*.test.js", "node_modules/**"],
// Support additional extensions
extensions: [".js", ".jsx", ".ts", ".tsx"]
})The plugin respects .babelrc files and supports all standard Babel options:
babel({
// Disable .babelrc lookup
babelrc: false,
// Inline preset configuration
presets: [["@babel/preset-env", { modules: false }]],
// Plugin configuration
plugins: ["@babel/plugin-proposal-class-properties"]
})The plugin includes a preflight check system that validates Babel configuration before processing files:
The plugin automatically tests Babel configuration by transforming a sample class to detect:
Module Transform Error:
Rollup requires that your Babel configuration keeps ES6 module syntax intact.
Unfortunately it looks like your configuration specifies a module transformer
to replace ES6 modules with another module format.Solution: Add modules: false to your @babel/preset-env configuration
Runtime Helpers Error:
Runtime helpers are not enabled. Either exclude the transform-runtime Babel plugin
or pass the `runtimeHelpers: true` option.Solution: Set runtimeHelpers: true when using @babel/plugin-transform-runtime
Async Options Hook Error:
.options hook can't be asynchronous. It should return { customOptions, pluginsOptions } synchronously.Solution: Ensure custom plugin options hooks return objects directly, not Promises
7 || ^7.0.0-rc.2)>=0.60.0 <3)exclude: "node_modules/**" to avoid transpiling dependenciesexternalHelpers for projects with many modules to reduce bundle sizeruntimeHelpers for applications that can include @babel/runtime as a dependencyinclude/exclude patterns can significantly impact build performancebabel({
exclude: "node_modules/**",
presets: [["@babel/preset-env", { modules: false }]]
})babel({
extensions: [".js", ".jsx", ".ts", ".tsx"],
presets: ["@babel/preset-typescript"]
})babel({
exclude: "node_modules/**",
presets: [
["@babel/preset-env", { modules: false }],
"@babel/preset-react"
]
})babel({
externalHelpers: true,
exclude: "node_modules/**",
plugins: ["external-helpers"]
})