mithril-starter-rollup

Mithril Starter Project with Rollup, Babel, LiveReload, Jest and ESLint

mithril-starter-rollup

Project setup with: * Mithril 1.x * Rollup for optimized module bundles * Babel for transpiling es2015 to es5 * LiveReload to view code changes directly in the browser * Jest to run BDD tests and create component snapshots * ESLint to find syntax errors and get a standardized coding style

A couple of styles are included using Tachyon, but these can simply be replaced with your own CSS solution.

Setup

Install dependencies

npm install

Build and watch

Script commands defined in package.json:

  • build: creates a minified bundle in build/js/
  • watch: starts a local webserver; creates a bundle in build/js/ that is being updated with each code change; calls LiveReload to refresh the browser after code changes are built

Call npm run watch and open a web page at localhost:8080. The port number is set by environment variable PORT in package.json.

When making changes, the terminal will show lint errors, if any.

Testing

See mithril-jest for a short overview of Jest.

  • npm run test: starts a test run (only useful to know if tests are passing)
  • npm run test:watch: starts an interactive session with the option to evaluate and update existing snapshots

To run tests alongside the watch command, use a separate terminal window.

Configuration files

scripts contains a couple of Rollup configuration files. The scripts use rollup.base.js as base configuration.

FYI, the base configuration: * Exports createConfig({ includeDepencies }) * Reads package.json to read package dependencies. If includeDepencies is true, it will include those dependencies in the build file * Creates global package names; and sets global m for package “mithril”.

Bundler configuration

  • rollup.es.js: Builds an ES2015 module with syntax features that node supports; see: jsnext:main
  • rollup.umd.js: Builds a UMD bundle
  • rollup.watch.js: Builds a UMD bundle that is updated with each file change

Environment variables:

  • DEPS (Number 0 or 1): include dependencies
  • WATCH_DIR (String): sets the watch directory when running the watch script
  • PORT (Number): sets the http server port when running the watch script

Other configuration files: * .babelrc: Babel configuration * .eslintrc: ESLint configuration

Known issues

Upstream issue with wrong import when using watch

rollup-plugin-node-resolve/issues/66

When a wrong import is written, for instance:

import page from '../page';

instead of:

import page from './page';

rollup-plugin-node-resolve bails and stalls the watch.

Solution: use npm run build until you no longer see import errors. Then continue using npm run watch.

License

MIT

Related Repositories

mithril-starter-rollup

mithril-starter-rollup

Mithril Starter Project with Rollup, Babel, LiveReload, Jest and ESLint ...