For an upcoming project I do, I needed a simple template for a Javascript bundler as a starting point. So this is my approach.

I needed a Rollup setup for a simple web page. Just plain HTML and Javascript.

Rollup is a Bundler for web projects, similar to Webpack or Parcel, that bundles your assets like Javascript, CSS, etc. for production use. See: https://rollupjs.org/guide/en/

However I also wanted to write newest Javascript code, but still being compatible with different browsers. I also wanted some quality of life features.

So I made a Rollup Template with following features:

  • supports scss
  • auto injects build files into html
  • dev server with live reload included (npm run dev)
  • fixes from normalize and sanitize depending on .browserlist
  • transpiles css/scss for older browsers based on .browserlist
  • minifies: css, javascript, html
  • support for commonjs
  • babel for transpiling modern javascript for older browsers based on .browserlist
  • (optional) typescript support, compiled for older browsers based on .browserlist
  • eslint config, for IDE extensions
  • prettier config, for IDE extensions

Through Babel and PostCSS, this compiles your files for use in browsers defined in the .browserlist file.

Find it here: https://github.com/TimoBechtel/rollup-base-template