DEV Community

Jay
Jay

Posted on • Updated on

How to create your first rollup plugin

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application

Getting Started

  • Create copyFile function
    • name is the name of your plugin
    • targets array of src and dest
    • hook it is buildEnd (execute after bundling) or buildStart (execute before bundling)
const copyFile = (options = {}) => {
  const { targets = [], hook = 'buildEnd' } = options
  return {
    name: 'copy-file',
    [hook]: async() => {

    }
  }
} 
  • Copy file implementations
    • Lets add dependencies and add some codes
    • Since targets is array let's loop thru each target
    • when target.dest is not exist create the directory
    • then copy and override the file if exist
    • now we can exports our copyFile plugin
  const { basename, join } = require('path')
  const fs = require('fs/promises')

    ...
    [hook]: () => {
      targets.forEach(async target => {
        await fs.mkdir(target.dest, { recursive: true })

        const destPath = join(target.dest, basename(target.src))
        await fs.copyFile(target.src, destPath)
      })
    }
    ...

   module.exports = copyFile
  • Create rollup.config.js and use our copyFile plugin
const copyFile = require('./plugin')

export default {
  input: './src/index.js',
  plugins: [
    copyFile({
      targets: [
        { src: './index.html', dest: 'dist' }
      ]
    })
  ],
  output: {
    file: './dist/index.js',
    format: 'es'
  }
}

Top comments (0)