Home
/
Blog
/
Introduction to the Rollup.js JavaScript Bundler

Introduction to the Rollup.js JavaScript Bundler

Are you someone who loves JavaScript? If you do, you should also know that there are plenty of frameworks and libraries to learn and explore.

That’s why, today, we are going to take a look at the Rollup.js JavaScript bundler.

As from the name itself, you can know that it is a JavaScript bundler. It is an alternative to Browserify and webpack.

So, let’s get started.

What is Rollup.js?

Rollup.js(also Rollup) takes module bundling to the next level. It offers developers the ability to author their library or app using the ES2015 module. Once done, Rollup lets the developers bundle them up efficiently in a single file using Node.js and browsers.

In other words, you can think of Rollup.js as a way to bundle up small pieces of code into more complex or larger solutions such as applications or libraries. The reduction in file size means fewer HTTP requests and overall a better loading time.

There are many benefits of using Rollup. These include the following:

With the help of self-contained source files, development becomes easier
Tree-shaking removes unused functions
Output can be generated in multiple files.
During the bundling process, the source can be syntax-checked, prettified, and lined.
Logging is removed during the production
The production bundle is also minified.

What Makes Rollup.js Work?

There are already many JavaScript bundlers out there. So, why would you need one more?

Let’s discuss.

Rollup enables developers to keep their files small. It does it with a nifty technique when compared to other JavaScript bundles out there. The result is a faster yet smaller bundle that is easy to share and work with.

At the core, Rollup utilizes ES2015 modules. These modules are much more efficient compared to CommonJS modules that Browserify and webpack use.

ES2015 static analysis plays a crucial role as well. It resolves all the imported modules before the code is executed, removing the unused exports, saving time, and script size.

The efficiency comes with the use of the technique known as tree-shaking. It is a technique that removes unused code from modules when creating the final bundle. But, why it is so important?

JavaScript ecosystem is more complex than you think. It is common for JavaScript developers to use different plugins and frameworks. However, they rarely use all the functionalities that are offered by those libraries or frameworks.

Tree-shaking makes it possible only to include the methods and functions that are utilized by the application. For example, if you are using jQuery, you are surely not using everything it offers.

However, there is one big drawback to tree-shaking. It only works with ES modules and hence can restrict its impact when working with CommonJS modules. The team at Rollup aiming to solve the problem by including CommonJS modules in the future.

To get a better understanding, let’s take an example of how it works.

Let’s create two functions on a testingrollup.js.

Inside that file, we create two functions and name them as below:

export function HelloWorld() {
return "Hello World!";
}

export function ByeWorld() {
return "Bye World!";
}

Once done, we can now import the above functions in our app, app.js. Here we can call these functions through the console.

import * as testingrollup from './testingrollup.js';
console.log(testingrollup.HelloWorld());
//this will output “HelloWorld”

If you look closely, the output is using tree-shaking as it excluded the ByeWorld() function as it is not required.

Before we move forward, you also need to know that rollup is not an ES2015 to ES5 converter.

Understanding Tree-Shaking: Core Concept

At the heart of Rollup.js, there is tree-shaking. Tree-shaking works by statically analyzing the code that you are importing — and then excluding the code that is not required by your project.

The approach is unique and helps you build on top of modules and tools without adding extra dependencies. The result? You get a bloat-free project.

To get a better idea, let’s see how CommonJS and ES Modules work when importing.

In the case of CommonJS, you need to import the entire library or tool. The following code shows how it is done.

//  using CommonJS to import entire utils object
const utils = require( './utils' );
const query = 'Rollup';
// And, then using AJAX to call up the query
utils.ajax(`https://api.xyz.com?search=${query}`).then(handleResponse);

The same can be done using the ES modules. But here you do not need to import the whole utils object.

// Using Ajax
import { ajax } from './utils';
const query = 'Rollup';
// Ajax function call
ajax(`https://api.xyz.com?search=${query}`).then(handleResponse);

How to get started quickly with Rollup.js?

To get started with Rollup, you need to have a minimum of Node.js v 8.0.0

To install it, you need to run the following command.

npm install rollup --global

Once installed, you should be able to run rollup globally in any project directory with JavaScript files. The project can be Python, Ruby, PHP, or any other project that includes JavaScript.

In case, if multiple developers are working on the project, then it is better to download Rollup locally so that everyone has the same version.

To do so, you need to run the following command(only if you have an existing package.json file)

npm install rollup --save-dev

If you are not sure what to do next, it is always better to check out the Rollup.js help. To do so, you need to run the following command.

npx rollup --help

Rollup.js Plugins

Rollup also comes with a good collection of plugins. These plugins help you to do a better job at the output process and bundling. For example, you can use the plugins to compile TypeScript, inject code, lint files, and so on.

To use a plugin, you first need to install it. Once done, you need to reference it in the rollup.js configuration file.

What’s next?

Rollup.js is an excellent bundler that can help you manage your projects better. Apart from the command-line options, you can also try out the Rollup.js JavaScript AI that offers access to more features including asynchronous functionality for bundle handling.

As a developer, you can also check out the process of creating Rollup.js plugins. Creating one is not that hard. A plugin needs to export a function that offers a plugin-specific options set. This set needs to be defined in the configuration files.

Rollup.js is in no way easy to use. It can take some time to get started. This introductory tutorial gives you a starting point so that you can start using Rollup.js in your project. If configured right, Rollup.js can help you manage your projects in a better way.