davestewart
3/17/2017 - 10:26 PM

Basic rollup setup to watch and compile jQuery plugin source

Basic rollup setup to watch and compile jQuery plugin source

/**
 * Basic rollup setup for jQuery plugin development:
 *
 * - watch src folder
 * - transpile ES6 to ES5
 * - create development version (source maps)
 * - create production version (minified)
 */

// dependencies
const _ = require('underscore')
const rollup = require('rollup')
const babel = require('rollup-plugin-babel')
const babelrc = require('babelrc-rollup').default
const fs = require('fs')
const minify = require('uglify-js').minify
const pkg = require('./package.json')

// settings
const project = 'ascii'

// build
function build () {
  const time = Date.now()
  rollup
    .rollup({
      entry: 'src/index.js',
      external: Object.keys(pkg.dependencies),
      plugins: [
        babel(babelrc())
      ]
    })
    .then(bundle => {
      // debug
      process.stdout.write("Building...");

      // bundle
      const result = bundle.generate({
        moduleName: project,
        format: 'umd',
        sourceMap: true,
        globals: {
          jquery: 'jQuery'
        },
      });

      // file
      fs.writeFileSync(`dist/${project}.js`, result.code + `\n//# sourceMappingURL=${project}.js.map`);

      // map
      fs.writeFileSync(`dist/${project}.js.map`, result.map.toString());

      // minify
      fs.writeFileSync(`dist/${project}.min.js`, minify(`dist/${project}.js`).code)

      // debug
      process.stdout.write(` completed in ${Date.now() - time}ms\n');
    })
    .catch(console.log)
}

fs.watch('src', _.debounce(build, 0))