Rollup bundle and watch

Bundle JS files with support for ES2015/16, minification and sourcemaps using Rollup.

Functionality

This setup works out-of-the-box. It also includes a watcher which re-bundles the JS files whenever a JS file changes.

Usage

Write modern JS

You can write modern JS with support for ES modules using import statements and most ES2015/16 features without worrying about transpiling to ES5 for older browsers.

Rollup is used to write modular JS and tree-shake unused functions. This setup is pre-configured to compile all your JS in the src/ directory using the following plugins:

  • Node Resolve Plugin to use external ES modules.
  • CommonJS Plugin to use external CommonJS modules.
  • Buble for fast and lightweight transpiling of your code to ES5. If you need more feature support, consider the heavier Babel Plugin.
  • Uglify to minify your JS for production.
  • ESLint to validate syntax and code style.
  • Rollup Watch for fast incremental rebuilds during development.

src/index.js is the main entry point for the JS compile script. So be sure to start there.

Add & configure plugins

You can configure the plugins mentioned above or add your own plugins in rollup.config.js.

Compile JS

To compile your JS for production (incl. minification), run:

npm run build:js

Or simply npm run build as this will also run build:js.

The compiled JS plus its sourcemap is written to the dist/ directory.

Note: console and debugger are only allowed in development.

Development

To compile your JS (excl. minification) whenever you make a change to a JS file:

npm run watch:js

Or simply npm run watch as this will also run watch:js.

These scripts are configured in package.json.

More resources