Post
Ask Question

Angular 2 Bundle Using Rollup

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.

  1. npm install rollup --save-dev  

Step 2

Install the Rollup dependencies, using the command given below.

  1.    npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev  

Step 3

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

Copy line of code to the file. 

  1. import rollup from 'rollup'  
  2. import nodeResolve from 'rollup-plugin-node-resolve'  
  3. import commonjs from 'rollup-plugin-commonjs';  
  4. import uglify from 'rollup-plugin-uglify'  
  5. export default {  
  6.     entry: 'src/main.js',  
  7.     dest: 'src/build.js', // output a single application bundle    
  8.     sourceMap: false,  
  9.     format: 'iife',  
  10.     onwarn: function(warning) {  
  11.         // Skip certain warnings    
  12.         // should intercept ... but doesn't in some rollup versions    
  13.         if (warning.code === 'THIS_IS_UNDEFINED') {  
  14.             return;  
  15.         }  
  16.         // intercepts in some rollup versions    
  17.         if (warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) {  
  18.             return;  
  19.         }  
  20.         // console.warn everything else    
  21.         console.warn(warning.message);  
  22.     },  
  23.     plugins: [  
  24.         nodeResolve({  
  25.             jsnext: true,  
  26.             module: true  
  27.         }),  
  28.         commonjs({  
  29.             include: 'node_modules/rxjs/**',  
  30.         }),  
  31.         uglify()  
  32.     ]  
  33. }    

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

Entry

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.

Dest

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

Sourcemap

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

Format

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".

  1. {  
  2.     "compilerOptions": {  
  3.         "target": "ES5",  
  4.         "module": "es2015",  
  5.         "moduleResolution": "node",  
  6.         "sourceMap": true,  
  7.         "emitDecoratorMetadata": true,  
  8.         "experimentalDecorators": true,  
  9.         "lib": ["es2015", "dom"],  
  10.         "noImplicitAny": true,  
  11.         "suppressImplicitAnyIndexErrors": true  
  12.     }  
  13. }   

Step 5

Execute the Rollup process with the command.

Windows users should surround Rollup command in double quotes.

Open terminal from the root directory of the folder and paste or write the command. 

  1. "node_modules/.bin/rollup" -c rollup-config.js   

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 </body>

tag 

  1. <script type="text/javascript" src="[destinaton_path_set_on_rollup-conifg.js]/bundle.js" />  

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. 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

  1. "build": "tsc -p src/tsconfig.json",   
  2. "rollup": "rollup -c rollup-config.js",   
  3. "build_prod": "npm run build && npm run rollup"   

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.


Similar Articles