Angular 2 Bundle Using Rollup

#Angular2 Bundle Using Rollup by @MAqibShehzad cc @CsharpCorner  #Angular #AngularJS

  • Rollup is a JavaScript module bundler, which compiles large pieces of code and converts it to a bundle, which can load on Application load cycle.
  • There is a concept in Rollup called Tree-Shaking, which has the main purpose of eliminating unused code from the files and as the name suggests, it can remove unused code like we shake the tree and the leaves or branches shed.
  • js) in the project root directory to tell Rollup, how to process the Application.
  • Instead, load the bundle file, using a single script tag after the

    Step 7

    Add the scripts given below to your package.json files for your convenience to build and Rollup by running a single script, namely build_prod.

  • Type npm script name like npm build_prod

    All the steps needed to Rollup your Angular 2 Application are given.

In this article, we will see how can we create a bundle of Angular 2 Application, using Rollup.

@CsharpCorner: #Angular2 Bundle Using Rollup by @MAqibShehzad cc @CsharpCorner #Angular #AngularJS

Rollup is a JavaScript module bundler, which compiles large pieces of code and converts it to a bundle, which can load on Application load cycle.

Rollup is based on ES2015 modules, which are more efficient thaN CommonJS, which is also used by Webpack and Browserify.

There is a concept in Rollup called Tree-Shaking, which has the main purpose of eliminating unused code from the files and as the name suggests, it can remove unused code like we shake the tree and the leaves or branches shed. After removing the unused code from the files, we have included only the final code to be moved to the production.

The best benefit of Tree Shaking is when we have third party plugins and tools used in our Application, which have plenty of functions which we selectively used and also integrates with production to increase the code and the performance overload.

This is all about the basic introduction of Rollup and Tree Shaking. Now, let’s proceed by following step by step integration of Rollup and make a bundle from it.

Before proceeding further, you have to setup the environment for Angular 2. If you already have setup, proceed with this article by using step wise implementation and if you still haven’t set up an environment to point to for this article, set the development environment for Angular 2 by clicking here.

Step 1

Install Rollup plugin by using the command given below.

Step 2

Install the Rollup dependencies, using the command given below.

Step 3

Next, create a configuration file (rollup-config.js) in the project root directory to tell Rollup, how to process the Application.

Now, we will discuss brief about configuration options, so that we understand and do basic configuration for our project.

The entry property enables to define the main entry point of the project file with the path. By using this file, Rollup process has been initialized. In some cases, it is the main.js file of the project, which is the main file.

This is the path, where all of the files are saved after Rollup finalized.

This option adds source map inside the generated files, which makes things simple.

Immediately invoked function impression is the format supported for the Web in addition to supporting other formats as well.

Step 4

Open tsconfig.json file and in the module section of compilerOptions, replace “CommonJs” with “es2015”.

Execute the Rollup process with the command.

Windows users should surround Rollup command in double quotes.

It will create the file build.js, where you point the destination.

Step 6

Next thing is to add the script tag on the entry or the main file.

Loading the generated Application bundle does not require a module loader like SystemJS. Remove the scripts that concern SystemJS. Instead, load the bundle file, using a single script tag after the

tag 

Add the scripts given below to your package.json files for your convenience to build and Rollup by running a single script, namely build_prod. To run the individual scripts, open command Window and type after pointing to the root of the project folder. Type npm script name like npm build_prod

All the steps needed to Rollup your Angular 2 Application are given. I hope you found it beneficial. If you have any questions or concerns, use the comments box and I will try my best to solve your query.

Angular 2 Bundle Using Rollup

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.