Essential Guide to rollup-plugin-babel

The rollup-plugin-babel is a powerful tool used in JavaScript development to transpile ES6+ code with Babel while bundling with Rollup, ensuring compatibility and optimized performance. This guide provides an in-depth introduction to rollup-plugin-babel, along with several useful API examples and an app demonstration to illustrate its application.

Table of Contents

• Installation
• Basic Usage
• Advanced Configuration
• API Examples
• Application Example

Installation

To get started with rollup-plugin-babel, you need to install it along with its peer dependencies:

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

Basic Usage

Here is a basic usage example of rollup-plugin-babel in a Rollup configuration:

import babel from '@rollup/plugin-babel';
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    babel({ babelHelpers: 'bundled' })
  ]
};

Advanced Configuration

The rollup-plugin-babel plugin offers extensive configuration options to customize the transpilation process:

import babel from '@rollup/plugin-babel';
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**',
      presets: [
        ['@babel/preset-env', { targets: '> 0.25% and not dead' }]
      ],
      plugins: [
        '@babel/plugin-transform-runtime'
      ]
    })
  ]
};

API Examples

Below are several practical examples of using the rollup-plugin-babel configuration:

Excluding Dependencies

You can exclude specific dependencies from being transpiled:

import babel from '@rollup/plugin-babel';
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    })
  ]
};

Using Babel Preset

Specify Babel presets for advanced control over transpilation:

import babel from '@rollup/plugin-babel';
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      presets: [
        ['@babel/preset-env', { targets: '> 0.25% and not dead' }]
      ]
    })
  ]
};

Adding Babel Plugins

Add specific Babel plugins to your configuration for additional transformations:

import babel from '@rollup/plugin-babel';
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'amd'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      plugins: [
        '@babel/plugin-proposal-class-properties'
      ]
    })
  ]
};

Application Example

Let’s create a simple JavaScript application using rollup-plugin-babel to demonstrate its capabilities:

// src/index.js class MyApp {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}
const app = new MyApp('World'); app.greet();

And the Rollup configuration to bundle this code with rollup-plugin-babel:

// rollup.config.js import babel from '@rollup/plugin-babel';
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'MyApp'
  },
  plugins: [
    babel({ babelHelpers: 'bundled' })
  ]
};

Run the build script to create the final bundle.js file:

npx rollup -c

This setup ensures your modern JavaScript code is transpiled and ready for use in a wide range of environments.

Hash: 4998068beea11326c8fcdf4fd2e4ccbe0ae596236803f3bd68d8caaf269b9d41