Rollup.js is a great way to add structure to a large client-side code base.
I have recently introduced Rollup.js into my development workflow. The simple command line interface means it can be used without the overhead of taskrunners like(gulp). It is easy to integrate with existing tools for testing. I use the Karma test runner to execute my test framework of choice, which is currently Jasmine.
This post walks through my setup of Jasmine, Karma and rollup. Want to jump straight to the code? Visit this repository to see the code.
I will assume that you already have node and npm installed, need help see Installing Node.js and npm.
Setting up a node project
We first need to create a
package.json file to identify our project as a node project.
This can be done by hand or by executing
npm init, which walks through setup.
The only setup we need is to give the project a name, let’s call it calculator.
Next is to fetch the development dependencies we will use. Fetch all the dependencies by executing the following.
At this point make sure that you have added
node_modules to your
It is not a good idea to commit all these node files to version control-something that I have done on too many occasions.
Setting up Karma.js
The Karma test runner also comes with a handy project initializer which will create a
Run the karma initializer with the following options.
- We do not need Require.js as we will be replacing this with Rollup.js
- You can select any browser from the list, just make sure that you have installed the correct browser runner.
- Don’t worry about the missing test file, we will add it shortly.
Creating our first test
Let’s create a single test to check out Karma setup. We will create a main test file and add an example test.
To bundle this file use Rollup with its default settings and store the output. At this point the output will be unchanged, this is because we are yet to import any modules
Now our bundle is available we can run the test.
This will show one passing test.
test/bundle.js is just a derived file it does not belong in version control.
Add a line for it in the
Simple test execution
Typing all those commands to execute the tests would be painful.
We can make life much easier by declaring them as npm scripts.
First one change is needed in
karma.conf.js, we will set singleRun configuration to be true.
A lot of functionality can end up in npm scripts and it is easy to write magical single line scripts that no-one understands.
My advice is to write small contained scripts for bundling and running the tests. Then have a third script that coordinates the small component scripts.
Add these scripts into
To run the project tests we can just execute the npm test script.
This single simple test command follows npm conventions and is easy to remember. Having a trivial test command is important if test driving the development of a project.
Testing some real code
At the moment we have Rollup.js setup but it is redundant as we have no modules. It is time to test some real code for a calculator. The first feature a calculator should have is the ability to add two numbers. Let’s adjust the test file so that it imports the calculator and add a meaningful test.
The tests should now be failing, there is no code after all. There are several features a good calculator might need. To keep features separate the calculator module will import modules to gain its utility.
With the tests passing again our impressive calculator is taking shape.
Building a distribution
The final thing, now we have working calculator components, is to bundle the source into a single file. This is so it can be consumed in all the browsers that are not yet supporting ES6 modules.
Using Rollup.js again we bundle the distribution and save it in
We pass the format and name options so that our final bundle is available in the global namespace and can be used by other js code.
Again to keep our version control neat we add index.js to
This has so far been a convenient way for me to add some structure to my projects. It has been much simpler to setup than Browserify with Gulp or Grunt. Check out the code for the calculator project the result of this walk through. Tell me what you think about this approach, if you would use it or if anything is missing.