@guanghechen/rollup-plugin-copy

Rollup plugins to copy files and folds (glob supported)

Usage no npm install needed!

<script type="module">
  import guanghechenRollupPluginCopy from 'https://cdn.skypack.dev/@guanghechen/rollup-plugin-copy';
</script>

README

@guanghechen/rollup-plugin-copy


This project is modified from https://github.com/vladshcherbin/rollup-plugin-copy. (Migrated from https://www.npmjs.com/package/@barusu/rollup-plugin-copy).

A few months ago I submitted a pr that supports watch mode, but no response was received, so I decided to release it separately.

Install

  • npm

    npm install --save-dev @guanghechen/rollup-plugin-copy

  • yarn

    yarn add --dev @guanghechen/rollup-plugin-copy

Usage

// rollup.config.js
import copy from '@guanghechen/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|string[]): Path or glob of what to copy

  • dest (string|string[]): One or more destinations where to copy

  • rename (string | Function): Change destination file or folder name

    function rename(
  name: string,
  ext: string,
  srcPath: string,
): string

  • transform (Function): Modify file contents

    function transform(
  content: string | ArrayBuffer,
  srcPath: string,
  dstPath: string,
): Promise<string | ArrayBuffer>

  • copyOnce (boolean|undefined): Override the outer option.

  • flatten (boolean|undefined): Override the outer option.

  • verbose (boolean|undefined): Override the outer option.

  • globbyOptions (GlobbyOptions): Override the outer option.

  • fsExtraOptions (options of fs-extra): Override the outer option.

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) => `${name}-v1.${extension}`
  }]
})

Transform file contents

copy({
  targets: [{
    src: 'src/index.html',
    dest: 'dist/public',
    transform: (contents, srcPath, destPath) => (
      contents.toString()
        .replace('__SCRIPT__', 'app.js')
        .replace('__SOURCE_FILE_PATH__', srcPath)
        .replace('__TARGET_FILE_NAME__', path.basename(srcPath))
    )
  }]
})

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'
})

watchHook

Type: string | Default: buildStart

Rollup hook the this.addWatchFile should call. By default, addWatchFile called on each rollup.rollup build. Only be used in hooks during the build phase, i.e. in buildStart, load, resolveId, and transform.

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

copyOnce

Type: boolean | Default: false

Copy items once. Useful in watch mode.

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

flatten

Type: boolean | Default: true

Remove the directory structure of copied files.

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

globbyOptions

See globby

copy({
  targets: [{ src: 'src/assets/**/*.js', dest: 'dist' }],
  globbyOptions: {
    ignore: ['**/asset-1.js'],
  },
})

fsExtraOptions

See fs-extra copy function

copy({
  targets: [{ src: 'src/assets/**/*.js', dest: 'dist' }],
  fsExtraOptions: {
    copy: {} // Options of 'fs-extra'.copy
    outputFile: { // Options of 'fs-extra'.outputFile
      encoding: 'utf-8'
    }
  }
})

Thanks Original Authors

Related