Rollup Deployment and Usage Guide

Prerequisites

• Node.js: Version 14.0.0 or higher (recommended: latest LTS)
• npm: Version 6.0.0 or higher (recommended: latest)
• Git: For version control and cloning the repository

Installation

Global Installation (Recommended for CLI usage)

npm install --global rollup

Local Installation (Recommended for projects)

npm install --save-dev rollup

Verify Installation

rollup --version

Configuration

Basic Configuration File

Create a rollup.config.js file in your project root:

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  }
};

Common Configuration Options

• input: Entry point of your application
• output.file: Output bundle file path
• output.format: Output format (cjs, es, iife, umd, amd)
• output.name: Bundle name for IIFE/UMD formats

Build & Run

Command Line Usage

Bundle for Node.js

rollup main.js --format cjs --file bundle.js

Bundle for Browsers

rollup main.js --format iife --name "myBundle" --file bundle.js

Bundle for Both (UMD)

rollup main.js --format umd --name "myBundle" --file bundle.js

Using Configuration File

rollup --config

Or with a specific config file:

rollup --config rollup.config.js

Development Server

Rollup doesn't include a built-in dev server. Use with:

npm install --save-dev serve
# Then add to package.json scripts
# "dev": "rollup -c -w && serve dist"

Deployment

Static Hosting

Rollup bundles are ideal for static hosting on platforms like:

• Vercel: Perfect for static sites and SPAs
• Netlify: Excellent for Jamstack applications
• GitHub Pages: Free hosting for open-source projects
• Cloudflare Pages: Fast global CDN

Node.js Applications

For Node.js deployments:

# Build your bundle
rollup -c

# Deploy to platforms like:
# - Heroku
# - Railway
# - DigitalOcean App Platform
# - AWS Lambda (with appropriate wrapper)

Library Publishing

To publish your library:

# Build your library bundle
rollup -c

# Publish to npm
npm publish

Project Templates

Rollup provides starter templates for common use cases:

# Library template
git clone https://github.com/rollup/rollup-starter-lib.git

# Application template
git clone https://github.com/rollup/rollup-starter-app.git

Common Issues and Solutions

Issue: "Cannot find module" errors

Solution: Ensure your input file path is correct in the config file.

Issue: Tree shaking not working

Solution: Use ES module syntax (import/export) instead of CommonJS (require/module.exports).

Issue: Bundle too large

Solution: Check for unused imports and ensure proper tree shaking. Use rollup-plugin-terser for minification.

Issue: Dynamic imports not working

Solution: Ensure your target environment supports dynamic imports or use appropriate plugins.

Issue: TypeScript compilation errors

Solution: Use @rollup/plugin-typescript and ensure proper TypeScript configuration.

Advanced Configuration

Plugins

Install plugins as needed:

npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs

Example with Plugins

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    nodeResolve(),
    commonjs()
  ]
};

Performance Tips

1. Use the latest Node.js version for optimal performance
2. Enable caching with --cache flag for development
3. Use production mode for smaller bundles
4. Consider parallel builds for large projects
5. Monitor bundle size with appropriate plugins

Community and Support

• Discord Chat: Join the community at https://is.gd/rollup_chat
• Documentation: https://rollupjs.org/
• GitHub Issues: https://github.com/rollup/rollup/issues
• Stack Overflow: Tag questions with rollupjs

This guide covers the essential steps for deploying and using Rollup in your projects. For more advanced usage and specific plugin configurations, refer to the official documentation.