Tools: Rollup Config

Rollup configuration to help you get started building modern web applications. You write modern javascript using the latest browser-features, rollup will optimize your code for production and ensure it runs on all supported browsers.

Features

• Set HTML or JS as input and/or output
• Optimized for browsers which support modules
• Loads polyfills using feature detection
• Generates a service worker
• Minifies JS
• Minifies lit-html templates

Setup

1. Install dependencies

   npm i -D rollup @d4kmor/building-rollup rollup @web/dev-server rimraf
   

2. Create a rollup.config.js file:

   import { createSpaConfig } from '@d4kmor/building-rollup';
   // use `import { createBasicConfig }` to do regular JS to JS bundling
   // use `import { createMpaConfig }` to bundle multiple html files
   
   export default createSpaConfig({
     input: 'index.html',
     output: {
       dir: 'dist',
     },
   
     // use all options from https://rollupjs.org/guide/en/#configuration-files
   });
   

3. Add the following NPM scripts to your package.json:

   {
     "scripts": {
       "build": "rimraf dist && rollup -c rollup.config.js",
       "start:build": "npm run build && web-dev-server --root-dir dist --app-index index.html --open"
     }
   }
   

Customizations

Our config sets you up with good defaults for most projects. Additionally you can add more plugins and adjust predefined plugins or even remove them if needed.

We use the plugins-manager for it.

Customizing the babel config

You can define custom babel plugins to be loaded by adding a .babelrc or babel.config.js to your project. See babeljs config for more information.

For example to add support for class properties:

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Customizing default plugins

Our config creators install a number of rollup plugins by default:

Basic, SPA and MPA plugins:

• node-resolve
• terser

SPA and MPA plugins:

• babel
• html
• import-meta-assets
• polyfills-loader
• workbox

You can customize options for these plugins by using adjustPluginOptions.

import { createSpaConfig } from '@d4kmor/building-rollup';

export default createSpaConfig({
  setupPlugins: [adjustPluginOptions('node-resolve', { dedupe: ['lit-html'] })],
});