Which is Better Rollup Plugins for Asset Management?
rollup-plugin-copy vs rollup-plugin-copy-assets
1 Year
rollup-plugin-copyrollup-plugin-copy-assets
What's Rollup Plugins for Asset Management?

Both rollup-plugin-copy and rollup-plugin-copy-assets are plugins for Rollup, a module bundler for JavaScript. They serve the purpose of copying files and assets during the build process, but they have different focuses and functionalities. rollup-plugin-copy is a more general-purpose plugin that allows you to copy files from one location to another, while rollup-plugin-copy-assets is specifically designed to handle asset copying with a focus on maintaining the directory structure and managing asset paths effectively. Understanding the differences between these plugins can help developers choose the right tool for their asset management needs in a Rollup-based project.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
rollup-plugin-copy434,29626916.6 kB29a year agoMIT
rollup-plugin-copy-assets17,85823158 kB18-MIT
Feature Comparison: rollup-plugin-copy vs rollup-plugin-copy-assets

File Copying

  • rollup-plugin-copy: rollup-plugin-copy allows you to specify source and destination paths for files and directories to be copied during the build process. It supports glob patterns for matching multiple files, making it flexible for various copying needs.
  • rollup-plugin-copy-assets: rollup-plugin-copy-assets focuses on copying assets while preserving their directory structure. It allows you to specify assets to copy and ensures that the output mirrors the original structure, which is essential for projects with complex asset hierarchies.

Configuration Flexibility

  • rollup-plugin-copy: This plugin offers a simple configuration format, allowing developers to define source and destination paths easily. It is straightforward to set up and requires minimal configuration, making it user-friendly for quick tasks.
  • rollup-plugin-copy-assets: rollup-plugin-copy-assets provides more advanced configuration options, allowing you to customize how assets are copied, including options for filtering and transforming asset paths. This flexibility is beneficial for larger projects with specific asset management requirements.

Use Cases

  • rollup-plugin-copy: Ideal for projects that need to copy static files, such as images or JSON files, without additional processing. It is suitable for simpler applications where file copying is the primary concern.
  • rollup-plugin-copy-assets: Best suited for projects that involve a significant number of assets, such as web applications or games, where maintaining the directory structure and managing asset paths is crucial for proper functionality.

Performance

  • rollup-plugin-copy: This plugin is lightweight and performs well for basic copying tasks. It does not add significant overhead to the build process, making it efficient for small to medium-sized projects.
  • rollup-plugin-copy-assets: While rollup-plugin-copy-assets is also efficient, its additional features for managing asset paths and directory structures may introduce slight overhead. However, this trade-off is often worth it for projects that require robust asset management.

Community and Support

  • rollup-plugin-copy: Being a widely used plugin, rollup-plugin-copy has a larger community and more resources available for troubleshooting and support. This can be beneficial for developers seeking help or examples.
  • rollup-plugin-copy-assets: rollup-plugin-copy-assets, while less popular, still has a dedicated user base. However, the availability of community support and resources may be more limited compared to rollup-plugin-copy.
How to Choose: rollup-plugin-copy vs rollup-plugin-copy-assets
  • rollup-plugin-copy: Choose rollup-plugin-copy if you need a straightforward solution for copying files without additional features. It is suitable for simple use cases where you want to copy specific files or directories to your output folder without worrying about asset management or directory structure.
  • rollup-plugin-copy-assets: Choose rollup-plugin-copy-assets if your project requires more advanced asset management, such as preserving directory structures and handling asset paths. This plugin is ideal for projects with a large number of assets that need to be organized and managed effectively during the build process.
README for rollup-plugin-copy

rollup-plugin-copy

Build Status Codecov

Copy files and folders, with glob support.

Installation

# yarn
yarn add rollup-plugin-copy -D

# npm
npm install rollup-plugin-copy -D

Usage

// rollup.config.js
import copy from 'rollup-plugin-copy'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/app.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/index.html', dest: 'dist/public' },
        { src: ['assets/fonts/arial.woff', 'assets/fonts/arial.woff2'], dest: 'dist/public/fonts' },
        { src: 'assets/images/**/*', dest: 'dist/public/images' }
      ]
    })
  ]
}

Configuration

There are some useful options:

targets

Type: Array | Default: []

Array of targets to copy. A target is an object with properties:

  • src (string Array): Path or glob of what to copy
  • dest (string Array): One or more destinations where to copy
  • rename (string Function): Change destination file or folder name
  • transform (Function): Modify file contents

Each object should have src and dest properties, rename and transform are optional. globby is used inside, check it for glob pattern examples.

File
copy({
  targets: [{ src: 'src/index.html', dest: 'dist/public' }]
})
Folder
copy({
  targets: [{ src: 'assets/images', dest: 'dist/public' }]
})
Glob
copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }]
})
Glob: multiple items
copy({
  targets: [{ src: ['src/index.html', 'src/styles.css', 'assets/images'], dest: 'dist/public' }]
})
Glob: negated patterns
copy({
  targets: [{ src: ['assets/images/**/*', '!**/*.gif'], dest: 'dist/public/images' }]
})
Multiple targets
copy({
  targets: [
    { src: 'src/index.html', dest: 'dist/public' },
    { src: 'assets/images/**/*', dest: 'dist/public/images' }
  ]
})
Multiple destinations
copy({
  targets: [{ src: 'src/index.html', dest: ['dist/public', 'build/public'] }]
})
Rename with a string
copy({
  targets: [{ src: 'src/app.html', dest: 'dist/public', rename: 'index.html' }]
})
Rename with a function
copy({
  targets: [{
    src: 'assets/docs/*',
    dest: 'dist/public/docs',
    rename: (name, extension, fullPath) => `${name}-v1.${extension}`
  }]
})
Transform file contents
copy({
  targets: [{
    src: 'src/index.html',
    dest: 'dist/public',
    transform: (contents, filename) => contents.toString().replace('__SCRIPT__', 'app.js')
  }]
})

verbose

Type: boolean | Default: false

Output copied items to console.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  verbose: true
})

hook

Type: string | Default: buildEnd

Rollup hook the plugin should use. By default, plugin runs when rollup has finished bundling, before bundle is written to disk.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  hook: 'writeBundle'
})

copyOnce

Type: boolean | Default: false

Copy items once. Useful in watch mode.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  copyOnce: true
})

copySync

Type: boolean | Default: false

Copy items synchronous.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  copySync: true
})

flatten

Type: boolean | Default: true

Remove the directory structure of copied files.

copy({
  targets: [{ src: 'assets/**/*', dest: 'dist/public' }],
  flatten: false
})

All other options are passed to packages, used inside:

Original Author

Cédric Meuter

License

MIT