Rollup Cheatsheet

_

Rollup - ES Modul Bundler

_

Rollup ist ein Modul-Bündler für JavaScript, der kleine Stücke von Code in etwas größer und komplexer, wie eine Bibliothek oder Anwendung kompiliert. Es verwendet das neue standardisierte Format für Codemodule, die in der ES6-Revision von JavaScript enthalten sind.

_

📋 Kopieren Alle Befehle 📄 PDF___

_

Inhaltsverzeichnis - (#Installation) - (#basic-configuration) - Eingabeoptionen - (#output-Optionen) - (Plugins) (#plugins) - Außenabhängigkeiten - (Tree Shaking) - Code Splitting - (#watch-mode) - Entwicklung gegen Produktion - (#typescript-integration) - (#css-and-assets) - (#Bibliotheksentwicklung) - Erweiterte Konfiguration - (#Performance Optimization) - (Troubleshooting) - (#best-practices)

• Installation

Globale Installation

# Install Rollup globally
npm install -g rollup

# Check version
rollup --version
```_

### Lokale Installation (empfohlen)
```bash
# Initialize npm project
npm init -y

# Install Rollup locally
npm install --save-dev rollup

# Install common plugins
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel
```_

### Paket.json Scripts
```json
{
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "build:prod": "NODE_ENV=production rollup -c"
  }
}
```_

oder Grundkonfiguration

### Minimal rollup.config.js
```javascript
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
};
```_

### Complete Basic Configuration
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};
```_

### Mehrere Konfigurationen
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

const configs = [
  // ES module build
  {
    input: 'src/main.js',
    output: {
      file: 'dist/bundle.esm.js',
      format: 'es'
    },
    plugins: [resolve(), commonjs()]
  },
  // UMD build
  {
    input: 'src/main.js',
    output: {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'MyLibrary'
    },
    plugins: [resolve(), commonjs()]
  }
];

export default configs;
```_

### Umweltbasierte Konfiguration
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: !production
  },
  plugins: [
    resolve(),
    commonjs(),
    production && terser()
  ]
};
```_

Eingabeoptionen

### Single Entry Point
```javascript
export default {
  input: 'src/main.js'
};
```_

### Mehrere Entry Points
```javascript
export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js',
    vendor: 'src/vendor.js'
  }
};
```_

### Dynamic Entry Points
```javascript
import glob from 'glob';

const entries = glob.sync('src/pages/*.js').reduce((acc, path) => {
  const entry = path.replace('src/pages/', '').replace('.js', '');
  acc[entry] = path;
  return acc;
}, {});

export default {
  input: entries
};
```_

### Eintritt mit externen Abhängigkeiten
```javascript
export default {
  input: 'src/main.js',
  external: ['lodash', 'react', 'react-dom']
};
```_

Ausgeben von Optionen

### Ausgabeformate
```javascript
// ES Module
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.esm.js',
    format: 'es'
  }
};

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

// UMD (Universal Module Definition)
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.umd.js',
    format: 'umd',
    name: 'MyLibrary'
  }
};

// IIFE (Immediately Invoked Function Expression)
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyApp'
  }
};

// AMD (Asynchronous Module Definition)
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.amd.js',
    format: 'amd'
  }
};

// SystemJS
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.system.js',
    format: 'system'
  }
};
```_

### Mehrere Ausgabeformate
```javascript
export default {
  input: 'src/main.js',
  output: [
    {
      file: 'dist/bundle.esm.js',
      format: 'es'
    },
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs'
    },
    {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'MyLibrary'
    }
  ]
};
```_

### Ausgabeverzeichnis
```javascript
export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js'
  },
  output: {
    dir: 'dist',
    format: 'es',
    entryFileNames: '[name].js',
    chunkFileNames: '[name]-[hash].js'
  }
};
```_

### Source Maps
```javascript
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true, // Generate external source map
    // sourcemap: 'inline', // Inline source map
    // sourcemap: 'hidden' // Generate but don't reference
  }
};
```_

In den Warenkorb

### Essential Plugins
```bash
# Install essential plugins
npm install --save-dev @rollup/plugin-node-resolve
npm install --save-dev @rollup/plugin-commonjs
npm install --save-dev @rollup/plugin-babel
npm install --save-dev @rollup/plugin-terser
```_

### Node Resolve Plugin
```javascript
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      browser: true, // Use browser field in package.json
      preferBuiltins: false, // Don't prefer Node.js built-ins
      extensions: ['.js', '.jsx', '.ts', '.tsx']
    })
  ]
};
```_

### CommonJS Plugin
```javascript
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    commonjs({
      include: 'node_modules/**', // Convert CommonJS modules
      exclude: ['node_modules/foo/**'], // Exclude specific modules
      transformMixedEsModules: true // Handle mixed ES/CommonJS modules
    })
  ]
};
```_

### Babel Plugin
```javascript
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
      presets: [
        ['@babel/preset-env', {
          targets: {
            browsers: ['> 1%', 'last 2 versions']
          }
        }]
      ]
    })
  ]
};
```_

### Terser Plugin (Minification)
```javascript
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    terser({
      compress: {
        drop_console: true, // Remove console.log
        drop_debugger: true // Remove debugger statements
      },
      format: {
        comments: false // Remove comments
      }
    })
  ]
};
```_

### Plugin ersetzen
```javascript
import replace from '@rollup/plugin-replace';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      '__VERSION__': JSON.stringify(process.env.npm_package_version)
    })
  ]
};
```_

### JSON Plugin
```javascript
import json from '@rollup/plugin-json';

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

// Usage in code
import { version } from '../package.json';
console.log(version);
```_

### URL Plugin (Einstellungen)
```javascript
import url from '@rollup/plugin-url';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    url({
      limit: 10 * 1024, // 10KB limit for inline
      include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif'],
      emitFiles: true
    })
  ]
};
```_

Externe Abhängigkeiten

### Grundlegende externe Konfiguration
```javascript
export default {
  input: 'src/main.js',
  external: ['lodash', 'react', 'react-dom'],
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    globals: {
      'lodash': '_',
      'react': 'React',
      'react-dom': 'ReactDOM'
    }
  }
};
```_

### Dynamische externe Funktion
```javascript
export default {
  input: 'src/main.js',
  external: (id) => {
    // Mark all node_modules as external
    return id.includes('node_modules');
  },
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
};
```_

### Peer Dependances as External
```javascript
import pkg from './package.json';

export default {
  input: 'src/main.js',
  external: Object.keys(pkg.peerDependencies || {}),
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
};
```_

♪ Tree Shaking

♪ Enabling Tree Shaking
```javascript
// Rollup automatically tree-shakes ES modules
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
};
```_

### Tree Shaking with Side Effects
```javascript
// package.json
{
  "sideEffects": false // No side effects, safe to tree-shake
}

// Or specify files with side effects
{
  "sideEffects": [
    "*.css",
    "./src/polyfills.js"
  ]
}
```_

### Nebenwirkungen bewahren
```javascript
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  treeshake: {
    moduleSideEffects: false, // Assume no side effects
    // moduleSideEffects: (id) => id.includes('polyfill')
  }
};
```_

### Tree Shaking Beispiel
```javascript
// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  console.log('This has a side effect!');
  return a * b;
}

// main.js
import { add } from './utils.js'; // Only 'add' will be included

console.log(add(2, 3));
```_

Code Splitting

### Dynamische Importe
```javascript
// main.js
async function loadModule() {
  const module = await import('./heavy-module.js');
  return module.default();
}

// Rollup config
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: '[name]-[hash].js'
  }
};
```_

### Manual Chunks
```javascript
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
    manualChunks: {
      vendor: ['lodash', 'react'],
      utils: ['src/utils/helpers.js', 'src/utils/constants.js']
    }
  }
};
```_

### Dynamic Manual Chunks
```javascript
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
    manualChunks: (id) => {
      if (id.includes('node_modules')) {
        return 'vendor';
      }
      if (id.includes('src/utils')) {
        return 'utils';
      }
    }
  }
};
```_

Entry Point Split
```javascript
export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js',
    vendor: 'src/vendor.js'
  },
  output: {
    dir: 'dist',
    format: 'es'
  }
};
```_

~ Watch Mode ~

### Basic Watch Mode
```bash
# Watch for changes
rollup -c -w

# Or with npm script
npm run dev
```_

### Watch Configuration
```javascript
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  watch: {
    include: 'src/**',
    exclude: 'node_modules/**',
    clearScreen: false
  }
};
```_

### Watch with Plugins
```javascript
import livereload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: !production
  },
  plugins: [
    // ... other plugins
    !production && serve({
      open: true,
      contentBase: 'dist',
      port: 3000
    }),
    !production && livereload('dist')
  ]
};
```_

Entwicklung gegen Produktion

### Umweltbasierte Konfiguration
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import replace from '@rollup/plugin-replace';

const production = process.env.NODE_ENV === 'production';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: !production
  },
  plugins: [
    resolve(),
    commonjs(),
    replace({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    production && terser()
  ].filter(Boolean)
};
```_

### Separate Config Files
```javascript
// rollup.config.dev.js
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  },
  plugins: [
    serve({
      contentBase: 'dist',
      port: 3000
    }),
    livereload('dist')
  ]
};

// rollup.config.prod.js
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    terser()
  ]
};
```_

### Paket.json Scripts
```json
{
  "scripts": {
    "dev": "rollup -c rollup.config.dev.js -w",
    "build": "NODE_ENV=production rollup -c rollup.config.prod.js"
  }
}
```_

Informieren Sie sich

### TypeScript Plugins
```bash
# Install TypeScript plugin
npm install --save-dev @rollup/plugin-typescript typescript
```_

```javascript
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/main.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    typescript({
      tsconfig: './tsconfig.json'
    })
  ]
};

TypeScript Configuration

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "declaration": true,
    "outDir": "dist"
  },
  "include": [
    "src"
  ]
}
```_

### TypeScript mit Babel
```javascript
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    typescript(),
    babel({
      babelHelpers: 'bundled',
      extensions: ['.js', '.ts']
    })
  ]
};
```_

CSS und Assets

### PostCSS Plugins
```bash
# Install PostCSS plugin
npm install --save-dev rollup-plugin-postcss
```_

```javascript
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    postcss({
      extract: true, // Extract to separate CSS file
      minimize: true, // Minify CSS
      sourceMap: true
    })
  ]
};

SCSS/Sass Support

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    postcss({
      extract: 'styles.css',
      use: ['sass']
    })
  ]
};
```_

### Asset Handling
```javascript
import url from '@rollup/plugin-url';
import copy from 'rollup-plugin-copy';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    url({
      limit: 10 * 1024, // 10KB
      include: ['**/*.svg', '**/*.png', '**/*.jpg'],
      emitFiles: true
    }),
    copy({
      targets: [
        { src: 'src/assets/images/*', dest: 'dist/images' },
        { src: 'src/assets/fonts/*', dest: 'dist/fonts' }
      ]
    })
  ]
};
```_

Bibliotheksentwicklung

### Bibliothek Konfiguration
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';

export default [
  // ES module build
  {
    input: 'src/index.js',
    external: Object.keys(pkg.peerDependencies || {}),
    output: {
      file: pkg.module,
      format: 'es'
    },
    plugins: [
      resolve(),
      commonjs()
    ]
  },
  // CommonJS build
  {
    input: 'src/index.js',
    external: Object.keys(pkg.peerDependencies || {}),
    output: {
      file: pkg.main,
      format: 'cjs'
    },
    plugins: [
      resolve(),
      commonjs()
    ]
  },
  // UMD build
  {
    input: 'src/index.js',
    output: {
      file: pkg.browser,
      format: 'umd',
      name: 'MyLibrary',
      globals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
      }
    },
    plugins: [
      resolve(),
      commonjs(),
      terser()
    ]
  }
];
```_

### Paket.json für Bibliothek
```json
{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup -c",
    "prepublishOnly": "npm run build"
  },
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}
```_

### TypeScript Bibliothek
```javascript
import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.esm.js',
      format: 'es'
    },
    {
      file: 'dist/index.cjs.js',
      format: 'cjs'
    }
  ],
  plugins: [
    typescript({
      declaration: true,
      declarationDir: 'dist'
    }),
    resolve(),
    commonjs()
  ]
};
```_

Erweiterte Konfiguration

### Custom Plugin
```javascript
function myPlugin() {
  return {
    name: 'my-plugin',
    buildStart(opts) {
      console.log('Build started');
    },
    transform(code, id) {
      if (id.endsWith('.special')) {
        return `export default ${JSON.stringify(code)}`;
      }
    },
    generateBundle(opts, bundle) {
      console.log('Bundle generated');
    }
  };
}

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    myPlugin()
  ]
};
```_

### Conditional Builds
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

const configs = [];

// Development build
if (process.env.NODE_ENV !== 'production') {
  configs.push({
    input: 'src/main.js',
    output: {
      file: 'dist/bundle.dev.js',
      format: 'iife',
      sourcemap: true
    },
    plugins: [resolve(), commonjs()]
  });
}

// Production build
if (process.env.NODE_ENV === 'production') {
  configs.push({
    input: 'src/main.js',
    output: {
      file: 'dist/bundle.min.js',
      format: 'iife'
    },
    plugins: [resolve(), commonjs(), terser()]
  });
}

export default configs;
```_

### Multi-entry with Shared Dependances
```javascript
export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js'
  },
  output: {
    dir: 'dist',
    format: 'es',
    manualChunks: {
      vendor: ['lodash', 'react'],
      shared: ['src/utils/shared.js']
    }
  }
};
```_

 Leistungsoptimierung

### Bundle Analysis
```bash
# Install bundle analyzer
npm install --save-dev rollup-plugin-analyzer

# Use in config
import analyze from 'rollup-plugin-analyzer';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    analyze({
      summaryOnly: true,
      limit: 10
    })
  ]
};
```_

### Dependancen optimieren
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      preferBuiltins: false,
      browser: true
    }),
    commonjs({
      include: 'node_modules/**'
    })
  ]
};
```_

### Minimieren Sie Bundle Größe
```javascript
import { terser } from 'rollup-plugin-terser';
import replace from '@rollup/plugin-replace';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    terser({
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log', 'console.info']
      }
    })
  ]
};
```_

Fehlerbehebung

### Häufige Fragen und Lösungen

Circular Dependances
```javascript
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  onwarn: (warning, warn) => {
    if (warning.code === 'CIRCULAR_DEPENDENCY') {
      console.warn('Circular dependency:', warning.message);
      return;
    }
    warn(warning);
  }
};
```_

Externe Abhängigkeiten Nicht gefunden
```javascript
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      browser: true,
      preferBuiltins: false
    })
  ]
};
```_

Häufig gestellte Fragen
```javascript
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    commonjs({
      include: 'node_modules/**',
      transformMixedEsModules: true
    })
  ]
};

Speicherprobleme ```bash

Increase Node.js memory limit

node --max-old-space-size=4096 node_modules/.bin/rollup -c ```_

Debug Configuration

javascript export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife' }, onwarn: (warning, warn) => { console.log('Warning:', warning); warn(warning); } };_

oder Best Practices

Configuration Organization

```javascript // rollup.config.js import { createConfig } from './config/rollup.common.js';

const configs = [ createConfig('es'), createConfig('cjs'), createConfig('umd') ];

export default configs;

// config/rollup.common.js import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs';

export function createConfig(format) { return { input: 'src/index.js', output: { file: dist/bundle.${format}.js, format }, plugins: [ resolve(), commonjs() ] }; } ```_

Performance Best Practices

• ** Verwenden Sie ES-Module* für bessere Baumschütteln Mark externe Abhängigkeiten zur Reduzierung der Bündelgröße
• **Enable Code Spliting* für große Anwendungen
• Use terser zur Erzeugungsminifizierung
• ** Analysebündel** zur Identifizierung von Optimierungsmöglichkeiten

Entwicklung Best Practices

• Use Watch Mode für Entwicklung
• ** Quellkarten aktivieren* für Debugging
• ** Live-Reload einrichten* für bessere DX
• **Konfigurieren Sie Linting* mit ESLint
• Use TypeScript für bessere Typsicherheit

Bibliothek Entwicklung Best Practices

• **Provide multiple formats* (ES, CJS, UMD)
• Generate TypeScript Erklärungen für TypeScript-Benutzer
• **Mark peer Abhängigkeiten* als extern
• ** Verwenden Sie semantische Versionierung* für Releases
• Test baut vor dem Verlag

--

Zusammenfassung

Rollup ist ein leistungsfähiges Modulbündel, das sich bei der Erstellung optimierter Pakete für Bibliotheken und Anwendungen auszeichnet. Zu den wichtigsten Merkmalen gehören:

• ES Modul First: Native Unterstützung für ES-Module mit exzellentem Baumschütteln
• **Multiple Output Formate*: Unterstützung für ES, CJS, UMD, IIFE, AMD und SystemJS
• **Plugin Ecosystem*: Reiches Ökosystem von Plugins für verschiedene Transformationen
• Code Splitting: Advanced Code Splitting-Funktionen
• Tree Shaking: Automatischer toter Code
• **TypeScript Support*: Erstklassige TypeScript-Integration
• **Library Friendly*: Hervorragend für den Aufbau und die Verteilung von Bibliotheken

Durch den Einsatz von Rollups Stärken und nach besten Praktiken können Sie hochoptimierte Pakete erstellen, die sowohl für die Bibliotheksentwicklung als auch für das Anwendungsgebäude perfekt sind.

_