Rollup Configuration – Uses Buble, SASS and Serve. Use with Mithril.js

readme.md

Mithril.js + Rollup

This aims to help mithril.js developers setup a bundling with Rollup.

Rollup.js Configuration

This is a minimum configuration file for Rollup.js. It enables you to build your application using Rollup opposed to using Webpack. It is a bare basic setup that handles both the scripts and styles of your application. This configuration also ships with LiveReload and Serve which gives you a localhost development environment.

Install Dependencies

We're using a number of rollup specific plugins in the configuration. Each plugin plays its role accordingly. For simplicity sake you need to add these development dependencies to your build using yarn or npm whatever your poison.

In your root run the following command to install all the development dependencies required:

yarn add rollup-plugin-node-resolve rollup-plugin-serve rollup-plugin-livereload rollup-plugin-commonjs rollup-plugin-uglify rollup-plugin-buble rollup-plugin-postcss rollup-plugin-filesize rollup-plugin-progress autoprefixer node-sass --dev

Directories

This Rollup.js configuration builds from a /src directory and into dist directory. Only the external asset files are going to change in our Single Page Application so we don't need to modify the index.html file everytime rollup builds as it is only handling the external assets. Basically your SPA directory should look like something this:

App/
|
├── dist/
│   └── index.html
|
├── src/
│   ├── styles/
|   ├── components/
|   ├── pages/
│   └── bundle.js
|
└── rollup.config.js

Your index.html file sits within the dist directory, so if you require something like a Google Fonts, you're going to have to add that into this file.

Scripts

Rollup.js is exceptionally good at compiling your scripts and will give you smaller end production files than webpack. Things work a little different with Rollup.js and we need to understand exactly what we are doing in the configuration file.

Buble instead of Babel

You're going to notice that we are using a rollup plugin called Bublé. We're using Bublé instead of Babel because it's faster and for most use cases Bublé will suffice with minimal configuration required.

Resolve and CommonJS

We are using two additional plugins named resolve() and commonjs() within the configuration file. Resolve() tells Rollup how to find modules in node_modules and commonjs() converts these to ES modules. Without getting into to much detail these plugins just help assist us in resolving dependencies.

Styles

In the configuration file you will notice that we are compiling sass within the postcss plugin and also have autoprefixer to ensure we're supporting older browsers. In your src directory all you will need to do is import all your required stylesheets within bundle.js file or you can alternatively create a index.js file within the styles directory which imports all your required stylesheets and then import this file into the bundle.js file.

Rollup.js can only watch for changes if the stylesheet/s are explicitly imported to bundle.js file.

To give you an idea of how this works, let's say you have several subdirectories within the /styles directory that contain stylesheets, eg:

src/styles/
|
├── components/
|   ├── modal.scss
│   └── tooltip.scss
|
├── layout/
|   ├── header.scss
│   └── footer.scss
|
└── index.js

This would be typical in most applications, in order to ensure Rollup.js is watching all these files and building upon each changes within your index.js file you would do this, eg:

styles/index.js

import 'components/modal';
import 'components/tooltip';
import 'layout/header';
import 'layout/footer';

Now all you need to do is import the src/styles/index.js file into your src/bundle.js file, eg:

bundle.js

import 'styles/index';

Consider using BSS

While it's common for developers to write styles seperate from their JavaScript most mithril developers will generally use BSS to apply styling. BSS (Better Style Sheets) is a project created by Mithril collaborator porsager and allows you to write styles right inside your mithril views. I urge you all to try BSS and keep your styling contained within your applications.

Project: BSS

Command line

Lastly, you need to add some scripts to your package.json file which run rollup. In development you can run yarn watch and when you want to build for production your can run yarn build and everything will be done within the dist directory.

Command	Operation
yarn watch	Runs development from dist
yarn build	Builds into dist for production

Mithril

Mithril.js is the last piece to this puzzle. In your Bundle file is where you can setup your routes. First install mithril yarn add mithril as a dependency and then within bundle.js setup your routes, eg:

import Index from 'pages/index';

const root = document.getElementById('app');

m.route(root, '/', {
  '/': {
    render() {
      return m(Index);
    },
  }
});

index.html

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Mithril Rollup.js</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link href="bundle.css" rel="stylesheet" />
</head>
<body>
   <div id="app"></div>
   <script src="bundle.js"></script>
</body>
</html>

package.json

 "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w"
  }

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
import buble from 'rollup-plugin-buble';
import postcss from 'rollup-plugin-postcss';
import fileSize from 'rollup-plugin-filesize';
import progress from 'rollup-plugin-progress';
import includePaths from 'rollup-plugin-includepaths';
import autoprefixer from 'autoprefixer';

let cache
const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/bundle.js',
  cache,
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true // Use sourcemaps.
  },
  plugins: [
    progress({
      clearLine: true // default: true
    }),
    postcss({
      extract: true,
      minimize: production && true,
      use: ['sass'],
      plugins: [
        autoprefixer({
          browsers: [
            'Android >= 4.4',
            'BlackBerry >= 11',
            'Chrome >= 4',
            'Firefox >= 4',
            'Explorer >= 10',
            'iOS >= 4.1',
            'Opera >= 15',
            'Safari >= 4',
            'OperaMini >= 6',
            'ChromeAndroid >= 10',
            'FirefoxAndroid >= 4',
            'ExplorerMobile >= 10'
          ]
        })
      ]
    }),
   includePaths({
     paths: ['./src'], // Include Paths 
     extensions: [
       '.js',
       '.scss'
     ]
    }),
    resolve(), // tells Rollup how to find node_modules
    commonjs(), // converts to ES modules
    buble(), // Alernate to Babel
    production && fileSize(), // Only run on production to increase bundle time
    production && uglify(), // minify, but only in production
    !production && serve('dist'),   // index.html should be in dist
    !production && livereload()
  ]
};