PabloRosales JavaScript Developer

Getting Started With Rollup


Getting started with Rollup without any configuration is easy, we just need assume some things:

  • We have one main entry file
  • Our code will be bundled into a single file

Now lets create a minimal project to demonstrate how to setup and use Rollup in the simplest form.

Hello Rollup (Web)

Lets start by running the init command of npm to create our project package.json, follow along and answer, since this will be used for web our entry point does not matter much, so leave it empty.

After you finish with npm init run this command to install Rollup as a development dependency:

Great, now that we have Rollup, lets create a directory called src and inside create a file called index.js. Since we are going to create a bundle file for the web, lets add some web specific code to our main file:

Now that we have our code in the entry file, lets add a script entry to our package.json file. The scripts section should look like this:

As you can see we pointed rollup 3 things: first our main file, then the output file we want and finally the format we want the final bundled file to be, in this case we choose IIFE, a self-executing that works great on a script tag. We now need to run our npm command:

This will run rollup and when it finishes you can check the dist directory, there you'll find a file called index.js with this content:

Now we can use our dist/index.js file inside an HTML file and open that in a browser. Lets create a dist/index.html with our output code in a script tag:

So, this is a simple Hello World example, you can open the dist/index.html in the browser and check the result.

This was just to get our hands dirty, now lets complicate it a bit with ES6 code and imports.

Check out the sample code for this part at Rollup Samples.

ES6 features and importing modules

So, the idea of using Rollup is to help us use latest tech in places where it is not yet fully supported, beside the optimizations, etc.

Lets create now another file called src/hello.js with two functions, one called sayHello and the other setTitle.

Now lets change our src/index.js file to look like this using our hello module:

Run again our build command:

If you check now dist/index.js, you'll see that Rollup created a bundle in a single file without our ES6 import code, our constants and arrow functions, ensuring that our code runs in browsers that don't support that:

— "Look Mom, no configs!"

Rollup is doing here all the hard work for us. Lets complicate this a bit more...

Check out the sample code for this part at Rollup Samples.

Three Shacking

Rollup will statically analyze our imported code, and make sure it only includes the code we will actually use, this will reduce our final bundle file size.

Lets remove our use of sayHello in our src/index.js file:

Build again and check out the dist/index.js output:

Rollup noticed that we don't use the removed sayHello function and did not include it. Great!

Check out the sample code for this part at Rollup Samples.

Hello Rollup (Node/Modules)

If our code will be used as a Node Module, we can make a simple change on our build command so that Rollup knows how to output our bundle. Lets change the scripts section on the package.json file like this:

Now if we run the build command, we'll see this output:

There is not much difference but this one will work on Node. Of course a real Node Module would export something useful for other people to use, but hey this is a Hello World!

Check out the sample code for this part at Rollup Samples.

Node and Web with UMD

If your module will be used on Node and the Web, you can use UMD as an option for Rollup, the output for the last example with UMD looks like this:

As you can see now the output code will check the system the code is running and import correctly.

Now, UMD usually works best when we add a name for our export, so lets change the build command to this:

Check out the sample code for this part at Rollup Samples.

If you run the build command you won't see anything change in this case since we are not exporting anything in our main file. Lets change the code to export a default function:

If you run again the build command you will see this output:

Now Rollup added the needed code to make our code work with UMD and exported to Hello. Of course, this code is not really of much use, but you get the idea.

Check out the sample code for this part at Rollup Samples.

ESM

You can also make ESM modules by using "esm" as your format. ESM is the future for modules in JavaScript, currently supported in all major browsers as seen in my June 18 Newsletter.

Made with by PR