DOCSEARCHbyAlgolia
Submit Docs

@rollup/plugins

repository·master·Indexed 25 days ago

https://github.com/rollup/plugins

A monorepo containing official Rollup plugins that are critical, maintained by the Rollup organization, or recommended for use. Includes plugins such as @rollup/plugin-alias for mapping import paths, @rollup/plugin-auto-install for automatic dependency management, @rollup/plugin-babel for Babel transpilation, and @rollup/plugin-beep.

Tokens
39K
Snippets
123
Records
296
Agent score
86%

What's inside @rollup/plugins

  1. Overview of Rollup Plugins

    master
    This repository is the central collection of official Rollup plugins. It contains plugins that are considered critical for everyday Rollup usage, those maintained by the Rollup organization, and those officially recommended to users.

  2. Use @rollup/plugin-multi-entry to combine multiple entry points

    master

    The @rollup/plugin-multi-entry plugin allows you to use multiple entry points for a single bundle and combines their named exports into the final bundle.

    Note: default exports cannot be combined or exported by this plugin; only named exports are supported.

    Requirements:

    • Node.js LTS (v14.0.0+)
    • Rollup v1.20.0+
    import multi from '@rollup/plugin-multi-entry';

export default {
  input: ['batman.js', 'robin.js', 'joker.js'],
  output: {
    dir: 'output'
  },
  plugins: [multi()]
};

  5. Handle symlinks with @rollup/plugin-commonjs

    master

    In monorepos or when using npm link, Rollup (via @rollup/plugin-node-resolve) resolves modules to their real paths by default.

    When configuring include or exclude paths, you must use the real paths rather than the symlinked paths. To avoid path issues, you can use a regular expression for the include option that matches the module name regardless of the base path.

    commonjs({
  include: /node_modules/
});

  6. Reference external CSS/JS files in @rollup/plugin-html

    master

    You can use the templateExternalFiles recipe from @rollup/plugin-html/recipes/external-files to inject external CSS and JS files into your generated HTML. This allows you to control the loading sequence of these files relative to the main bundle using the pos option.

    Each configuration object in the array passed to templateExternalFiles requires:

    • type: Either 'js' or 'css'.
    • file: The path to the external file.
    • pos (optional): Use 'before' to place the file before the main bundle, or omit it to place it after the main bundle.
    import html from '@rollup/plugin-html';
import templateExternalFiles from '@rollup/plugin-html/recipes/external-files';

export default [
  {
    input: ['demo/demo.ts'],
    output: [{ file: 'dist/demo.js' }],
    plugins: [
      html({
        title: 'sdk demo page',
        publicPath: './',
        fileName: 'demo.html',
        template: templateExternalFiles([
          { type: 'js', file: 'example1.js', pos: 'before' },
          { type: 'js', file: 'example2.js' }, // Placed after main bundle
          { type: 'css', file: 'example1.css', pos: 'before' }
        ])
      })
    ]
  }
];

  8. Resolve built-ins using stubs

    master

    By default, the plugin prefers Node.js built-ins (like fs) and marks them as external. To use polyfills instead, set preferBuiltins to false and use a polyfill plugin.

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

export default {
  input: ..., 
  plugins: [
    nodePolyfills(),
    nodeResolve({ preferBuiltins: false })
  ],
  external: builtins,
  output: ...
}

  11. Use @rollup/plugin-dsv in Rollup

    master

    Import the plugin in your rollup.config.js and add it to the plugins array. This allows you to import .csv and .tsv files directly into your JavaScript modules as arrays of objects.

    import dsv from '@rollup/plugin-dsv';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [dsv()]
};