How do I configure Rollup for a React project?

How do I configure Rollup for a React project?

To configure Rollup for a React project, you'll need to set up a Rollup configuration file and install necessary plugins.

What plugins do I need for Rollup to work with React?

You'll need plugins like @rollup/plugin-babel for transpiling JSX and @rollup/plugin-node-resolve to resolve modules.

Can you show me a basic Rollup configuration example?

Sure! Here's a simple example:

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
  plugins: [
    resolve(),
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-react'],
    }),
  ],
};

How do I run Rollup after configuring it?

You can run Rollup by adding a script in your package.json like this:

"scripts": {
  "build": "rollup -c"
}

Then, just run npm run build in your terminal.