rollup.js rollup.js, typescript all about it

Javascript has an ever evolving ecosystem. Recently I investigated using rollup.js with TypeScript, what follows is a brief introduction.

npm install & package.json

If you’re wanting to use rollup.js and TypeScript, first you need to install them globally with npm.

npm install -g rollup typescript

And as with all Javascript projects these days this project starts with a package.json file.

<bigListOfDependencies>

{
    "name": "me-project-innit",
    "version": "1.0.0",
    "devDependencies": {
        "rollup-plugin-typescript": "^0.6.0"
    }
}

</bigListOfDependencies>

The only project dependency we need is a TypeScript plugin for rollup.

npm install to get them downloaded.

config

In the root directory of the project we’ll need to create a config file for rollup.js, aptly named rollup.config.js.

import typescript from 'rollup-plugin-typescript';

export default {
    entry: 'src/js/main.ts',
    format: 'iife',
    dest: 'bundle.js',
    plugins: [
        typescript()
    ]
};

Some important lines:

1 import ... Yes we’re using ES6 modules right off the bat.

4: entry: 'src/js/main.ts' note the file extension of .ts this signifies TypeScript.

5: format: 'iife' creates a self-executing function that you can include in a <script> tag – handy.

8: typescript() this is our imported TypeScript plugin that will be run against our code on build.

That’s it for config, all easy to understand, not gulp task this or grunt task that.

build

Currently rollup.js doesn’t provide a way to watch folders for changes, as grunt or gulp can (though they have plans to add a –watch flag in the future) so for reasons of simplicity I’ll provide you with the most basic build command.

rollup -c       # from the directory containing rollup.config.js

That’s it. Those 4 <code> blocks are all you need to get going. It seems so simple that it shouldn’t work, especially when we’re used to the likes of gulp, babel and browserify. Take a look at the rollup.js site and compare it with the three tools I mentioned above, rollup.js is a breath of fresh air.

We haven’t used TypeScript or rollup.js yet but we’re keeping a keen eye on it’s progress. If you’ve had any experience with them we’d be eager to hear about it!

extra points

TypeScript is powerful, but to get the most out of it I suggest using the following two tools:

  • tslint – A TypeScript Linter
  • typedoc – A TypeScript documentation generator

If you enjoyed the read, drop us a comment below or share the article, follow us on Twitter or subscribe to our #MetaBeers newsletter. Before you go, grab a PDF of the article, and let us know if it’s time we worked together.

blog comments powered by Disqus