What is Rollup and how can I use it with React?

What is Rollup and how can I use it with React?

Rollup is a module bundler for JavaScript that compiles small pieces of code into a larger, more efficient bundle. You can use it with React to optimize your application by reducing the size of your JavaScript files.

What are the benefits of using Rollup over Webpack?

Rollup is generally simpler and produces smaller bundles due to its tree-shaking capabilities, which eliminate unused code. It's particularly effective for libraries and smaller projects.

Can you show me a basic configuration for Rollup with React?

Sure! Here's a basic rollup.config.js:

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyApp'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**'
    })
  ]
};

This configuration uses Babel to transpile your React code.

How do I install Rollup and its plugins?

You can install Rollup and its plugins using npm. Run the following command:

npm install --save-dev rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-commonjs