Rollup bundler for angular2 projects

Published on January 3, 2017

We have a few tools available to bundle our source code. Browserify and Webpack among them, I’m sure you must have heard about it if you are a front-end developer. Rollup is a fairly new tool available to bundle the source code.

Since, the Angular2 release I have tried so many tools like gulp, Grunt, Browserify, Angular CLI(which uses web pack). Browserify was one of my choices, in fact, I wrote a blog post on it here

In this post, I will share my findings and explain step by step process to start a project on it.

Rollup Advantages

Before dive into the actual code, I want to discuss few advantages of using Rollup. Some of these points are taken from //rollupjs.org/

Rollup is created keeping ES2015 in mind.
Rollup generates code which is very easy to read compare to other tools.
Rollup support formats like AMD, UMD, CommonJs, ES2015, and globals.
Rollup comes with a feature called Tree-shaking that means small code footprint.
Very easy to configure in fact you will remember it pretty soon.
Rollup comes with several plugins. If you want you can also use browserify plugins by using browserify-transform plugin.
We also have Angular 2 plugin which inlines HTML and CSS code.

Project Setup

Let’s initiate our project with npm. type npm init on your terminal and answer all the questions.

you will get a file package.json like this.

{
  "name": "angular2-rollup-starter",
  "version": "1.0.0",
  "description": "angular 2 starterpack using rollup bundler",
  "main": "index.js",
  "scripts": {
    "test": "mocha"
  },
  "keywords": ["rollup", "angular2"],
  "author": "Dimpu Aravind Buddha",
  "license": "MIT"
}

Now let’s install all angular dependencies by using the following command.

npm i --save @angular/common @angular/core @angular/http @angular/platform-browser @angular/platform-browser-dynamic rxjs rxjs-es zone.js

Now install rollup and few rollup plugins as dev dependencies

npm i --save-dev rollup rollup-plugin-alias rollup-plugin-angular rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-typescript rollup-watch live-server

This command will pull roll-up and roll-up plugins.

Now, in your project create rollup.config.js

import angular from "rollup-plugin-angular";
import typescript from "rollup-plugin-typescript";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import alias from "rollup-plugin-alias";

export default {
  entry: "src/main.ts",
  dest: "build/main.min.js",
  format: "iife",
  sourceMap: "inline",
  plugins: [
    angular(),
    typescript(),
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    alias({
      rxjs: __dirname + "/node_modules/rxjs-es"
    }),
    commonjs()
  ]
};

Here, we have to specify the entry, dest properties to specify the input and output. With rollup we can get different formats as output. Here we are using iffe. The sourceMap property is used for generating inline source map for the input.

We are using following rollup plugins.

rollup-plugin-angular plugin allow you to inline angular component’s styles and HTML.
rollup-plugin-alias is one way to deal with the problem of referencing ES5 code in your TS or ES6 code.
rollup-plugin-typescript plugin allows to transpile the Typescript code.
rollup-plugin-node-resolve allows locating modules in node_modules.
rollup-plugin-commonjs allows resolving commonjs modules in node_modules typically you would use this along with node-resolve module.

main.ts

Now, let’s create our main.ts file for to provide entry.

import "reflect-metadata";
import "zone.js";

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { enableProdMode } from "@angular/core";
import { AppModule } from "./app.module";

//enableProdMode(); //Uncomment for production
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app",
  template: "<h1>Rollup Component</h1>"
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

That’s it we are done.

Now, to generate the bundle go to your command line. and enter ./node_modules/rollup/bin/rollup -c here -c will tell rollup to use default rollup.config.js.

Before you run this command make sure you have build folder in your project.

Watch & Live reload

In order to do two npm tasks in parallel we have an amazing node module called npm-run-all.

Let’s install it first.

npm i npm-run-all

Now, open your package.json and edit scripts section.

"scripts": {
    "watch": "rollup --watch -c",
    "build": "rollup -c",
    "serve": "live-server  build  --entry-file=index.html --port=4200",
    "start": "npm-run-all --parallel  watch serve"
  },

In the start script we are using npm-rull-all node modules it takes --parallel flag and npm commands that has to be run in parallel.

That’s is it we are pretty much end of this tutorial.

Let’s see the compleat package.json file.

package.json

{
  "name": "angular2-rollup-starter",
  "version": "1.0.0",
  "description": "angular 2 starterpack using rollup bundler",
  "main": "index.js",
  "scripts": {
    "watch": "rollup --watch -c",
    "build": "rollup -c",
    "serve": "live-server  build  --entry-file=index.html --port=4200",
    "start": "npm-run-all --parallel  watch serve"
  },
  "keywords": ["rollup", "angular2"],
  "author": "Dimpu Aravind Buddha",
  "license": "MIT",
  "devDependencies": {
    "live-server": "^1.1.0",
    "npm-run-all": "^4.0.0",
    "rollup": "^0.40.0",
    "rollup-plugin-alias": "^1.2.0",
    "rollup-plugin-angular": "^0.4.3",
    "rollup-plugin-commonjs": "^7.0.0",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-typescript": "^0.8.1",
    "rollup-watch": "^3.1.0"
  },
  "dependencies": {
    "@angular/common": "^2.4.1",
    "@angular/compiler": "^2.4.1",
    "@angular/core": "^2.4.1",
    "@angular/http": "^2.4.1",
    "@angular/platform-browser": "^2.4.1",
    "@angular/platform-browser-dynamic": "^2.4.1",
    "debug": "^2.6.0",
    "rxjs": "^5.0.2",
    "rxjs-es": "^5.0.0-beta.12",
    "zone.js": "^0.7.4"
  }
}

Now, to start building our application run npm start on your command line. You see files build on the fly and live-server auto reloads your browser.

Hope you enjoyed it.