Rollup.js Crash Course to Compile & Bundle Frontend Javascript Project With SCSS in VS Code

uh hello guys welcome to this another video so in this video we will talk about a new compiler new uh bundler for

JavaScript which is rollup rollup JS is similar to webpack S pack all these

module bundlers and which actually compiles your high level JavaScript code

and also you can compile your SAS files directly into the code which is understandable by the browser so you can

see this is actually our directory structure we have actually the source folder where we actually return return our SAS file we have the high level

JavaScript code we are importing uh nodejs modules you can see this is actually a nodejs module that we

imported a third party module and now if I want to compile this project we have this rollup doc config.js file which is

actually required for actually integrating rollup inside your application so I've written this now we

have three commands First Command let me show you to actually build our project

so we can simply run this command npm run build so what this command will do

guys it will actually compile everything into a single public folder so that you can deploy that folder it will Minify

that code if I execute this command it will take this high level SAS and JavaScript code and it will actually

convert this code to Common GS so that the code is understandable by the browser you see it has created minified

bundle JS code which is of JavaScript and the bundle . CSS code it has compiled the SAS code which was written

inside the style. SAS file so it has compiled this and if I now open this you

can easily open this by executing npm Run start so it will actually start your

application on Local Host 5,000 port number so it is actually using the

minii code which is generated by roac rollup this is actually the application

we are currently displaying the current time which is 1219 which is coming

through this third party module that we installed of nodejs which is date- FNS

you can use any nodejs module just I wanted to show you the functionality how you can compile your

application so we will try to build this application from scratch I will show you how to integrate this so now let's get

started so now I will actually make a new folder let me

and also it comes with its own development server as well so npm run Dev if you execute this command it will

start a development server and it will directly open this application in the browser hot reloading

functionality will also be present so now the application has been started

you can see that so now it is listening this application so what this actually does it you can even change the code as

well while developing like let's suppose if you are changing the SAS let me

change the background color this primary

color if you make this change if you refresh now automatically your application will change you will see

that so now as you make changes inside SAS files if you add some more

JavaScript code if I remove this alert statement let's suppose if I put another

alert statement K if I make this change automatically if you refresh you will

see the code is automatically compiled so this is actually happening when we

execute npm run Dev so we are actually this is really useful whenever you are

uh working on your application so once you are happy you can deploy this using just run this command npm run buil

and it will now compile everything into a minified code so let's get started guys on how to integrate

rollup I will make a new directory roller project I will open it inside uh

vs code so we start it from direct scratch so the very first thing we need

to do you need to initialize the package.json file so inside this package.json file we

need to install the rollup if you don't know about rollup guys it's a module compiler bundler for JavaScript if you

just write rollup the very first link which comes roll up. JS it's a famous

JavaScript module bundler similar to webpack V all these compilers and

bundlers which are there for JavaScript you can just do it for any framework if you're developing for react view so once

you actually do this for the very first time you can integrate with any front end tech technology so after that you

just need to inti uh install inside Dev dependency because dasd simply means that it's a dep

dependency it is not required for production it is only required when we are developing the project

rollup rollup is the base Library we need to install it and then it has

various plugins out there so one by one I will tell you about them so first of all just install the

rollup library and now if you see in the package.json file you will see the rollup is installed in the depth

dependencies now we need to create a source folder where we will actually write the code and inside this we will

Define a file which is template. htmls where we will actually write our HTML

code which is the UI code and

here we can change the title roll up

examples so it can have any HTML similarly we'll Define a folder for

holding the style code so style. SAS we will be creating this file and similarly

here we will be defining the file for which is main.js which will contain the

JavaScript code which will get compiled by rollup so the structure of the

application in the HTML we will simply be displaying the current time so right in the

HTML I will just show you a very basic example so just give it a heading rollup

starter app and then we will in the paragraph We will simply say the current time is and

then we will have a span tag you'll give it an ID of time

now dot dot dot so this is only the HTML which is required so now coming back to

the SAS file we will simply write some basic styles sheet code we will declare

a variable for primary

color you will initialize it to Black and the text color will be

white and then in the body we'll simply say background color is equal to primary color and the paragraph color we will

align it in the center position and the color of the text will be white

so I will simply say text color phone size I will change it to 45 pixel that's

so that's all the basic style uh we can write Advanced SAS as well I will just

show you how to compile this so in the main JS file we will import a third party module that I already showed you

npmi date FNS so if you search for this module which basically gives you the current

time so if you search for this module date

FNS I think the name of the package is let me

check yeah date FNS so simply install it this is not a depth dependency it is

required for this application so npmi date- FNS so after you do this in the

main JS file we will try to actually write the code so we can simply import this import

format from date FNS SL

format so now to get the current time we will basically Target the span tag which

we have given an ID by cury selector which is time now and just be

manipulating the inner HTML of it so export default function

update so what I can do I can uh simply write this in a different file so you'll

simply create a file right here current time JS so I will simply shift this code

in this file so that we can import this file in the main file so you'll Define

this function right here so what the job of this function is to

actually manipulate the inner html text content we will simply use the format

function you will basically get the current time by using this

format hour minute and second like this this will get the current time and then

we'll simply just use the set set timeout function to actually call this

function after 1 second every time so it will also show you the current

time with one second again and again we'll call this function so we have now defined this we are exporting this

update function now we can include this in our main file by the import statement

so right here in the main JS file what we can do we can simply import the

update function from the current time module that we declared we also need to

import the stylesheet as well so just import the stylesheet which is style.

SAS and we can just add an alert statement which is this app is starting

and then we can simply bind call this function update that's

all so we are simply calling this function which we defined which to actually get the current date and time so this is actually the structure of the

application now we need to get started with rollup so if you want to create uh

B your application or compile it the very first step is to actually Define this file roll app config

JS similar to webpack you need to Define this config file you can see the icon is changed by vs

code this is rollup icon so inside this file uh we do need

to install some modules guys some plugins which is supported by rollup so

what I will do is that I will show you one by one the utility of each plugin

the very first plugin guys we need to install it as Dev dependency at the rate

rollup SL plugin commonjs so the sole purpose of this plugin is to

actually understand your code high level code and convert that into common GS which is understandable by the browser

so this is a mandatory plugin that you need to actually install and then the second plugin is

rollup plug-in HTML so if you want to generate HTML files as well

automatically this is this plugin is required roller plugin HTML so if

through this plugin we will be providing this template HTML that we defined in the source folder and then rollup will

use it and automatically generate this minifi code so after this plugin we need

the third plugin to actually resolve all the third party nodejs modules that we are using inside our application so this

required plug-in Das node resolve this is a module at theate rollup plugin Das

node Das resolve so the sole purpose of using this to actually resolve all the third party model modules that you are

using of nodejs inside your application so install this install

these three plugins and apart from that we also need

one more

plugin so we also need the plugin for compiling SAS as well so for compiling

SAS into CSS we have a plug-in called as rollup plugin post

CSS roller plug-in post CSS we need to install this and we also need to install

SAS as a dep dependency also so SS SAS is also required and then lastly guys if

you want to Minify the output code this dependency is required

rollup Dash plugin t r s r this is actually the

plug-in if you want to Minify the output code in most cases we do need to Minify the code for performance reasons so just

install this these three dependencies and now if you see there is a pro

problem here which is roll up plugin

Tor let me check roll up

plug-in t r

okay we do need to add add theate symbol sorry this was a

problem just add a add theate symbol at the very top uh let me see guys I think the

version number is creating a problem so what I will do uh I will simply add this version number which is

7.0.2 so just add this version number in the package Ro

Json simply do

this so it is saying that rollup found is 4.2

21.2 I think it is uh creating Pro but one solution it is that you can just say

dash dash Force so it will ignore the compatibility issues so just add add Dash Das Force so sometimes in newer

versions it actually create problems okay we do need we don't need

to write at theate symbol

just add this dash dash

Force oh sorry we basically post CSS we added this n which is not there

so you can see that uh now it is successfully installed so just add this- Dash Das Force to actually ignore the

compatibility issues so now we just need to initialize our rollup doc config JS

file so the very first thing we will do we will import all the

modules so we will be importing it roll up commonjs this one node resolve the

resolve function similarly you'll be importing the common JS method from this plugin plugin Das commonjs and for

minifying the code we will be importing turer which will be coming from rollup plugin turer and then we'll be importing

post CSS which will be coming from plug-in post CSS which is required for compiling SAS and now for actually

generating HTML we will be importing it from that this rollup plugin SL HTML and

then we also need to import the buil-in plug-in which is in nodejs path

and here you'll be checking if you are doing it for production so process. EnV

variable roll upore watch So based upon whether you are in

production mode or not it will assign this variable then we have to write here

export default this returns an object which have various properties which you

can control so here you need to provide the input file which file you need to compile so my file is present inside

source- MJS so this is actually the main Javascript file that we need to compile

which is a starting point of the application so here we are providing the path and then it takes the output

similarly this is an actually an object it contains the file property which is

actually this file will be created for the JavaScript which is public / bundle.js and then the format of this

file is I if immediately invoke function

execution this is the mode of this and Source map if you do need to actually

generate Source map which is a essential file you will always you will put true

here and then we have this uh plugins options you can provide as many plugins

as you want in this array this is not an object this is an array so this is

actually a array so we will run by provide all these plugins that we

installed of rollup first of all we will import the resolve plugin to actually

import all the nodejs modules then the commonjs which is used to compile your high level JavaScript code to minified

browser understandable code the third thing for compiling the SAS file we will import post CSS we will call it and it

actually takes some options first option is extract and it need to be set to true

and we do need to minimize or the S CSS code so we'll simply set this option

which is minimize to also true and then the source map for the CSS

also we do need to generate the source map so simply Source map is equal to true and then we have the HTML file so

if you do need to generate the HTML file as well you will provide an object right here so first is actually takes the file

name so which file you need to generate we need to generate in the public folder index HTML you can even change this name

you can choose any name and now here in this template option you will provide an

object or function which will take the files and the public

path as two argument passed so this will be a call back

function so right inside this function guys the Third property do it also takes

is let me just provide it so this is actually the

object files public

path so here we need to provide our template where the template is located

so our template is located in the we'll use the part. resolve function

so it is present in the source directory SL template. HTML so put a comma or

semicon and then we will basically read uh the content of this template whatever

is the HTML present for this we do need to require the file system module and directly we'll be using this function of

file system which is read file sync and here you'll be passing the template path and you will be reading it in utf8 in

coding type and then we need to basically embed the JavaScript and the SAS code inside this

which is this main JS and the style. SAS so for doing this dynamically what I

will do in this rollup config file we do need to here say files.

JS or operator nothing so it is now checking these files variable that we

got in this function if any Javascript file is present then set it to that if

there is no present then we set it to empty array so now we'll be using the

map function to Loop through each file Javascript file which is

present this will be actually will be a arrow

function so right here you'll simply return this public path SL file name we

are actually using the backtick symbol to actually put Dynamic variables right here this will be having the public path

of the script followed by the file name and this script tag will be dynamically

injected in the HTML so in the similar manner we do need to add

a new line Corrector by using the join function like this so in the similar

manner we need to do this for the Styles sheet as well the SAS file so files. CSS

like this you will simply be embedding this

stylesheets in the similar

way so we do need have the scripts and the Styles variable right here so after

this again we'll be using the join function to put it in the new line corrector so after we do this uh we just

need to return this uh template content

we need to replace it by percent sign

scripts and then percentage you can give any variable of your choice so this is actually the content we will

embed and uh again we'll be using uh another replace this time I can do it on

the next line like this so we have declared two variables right here first is scripts

percentage sign scripts and percentage sign Styles now we need to go to your template HTML and embed these variables

dynamically so just after the title what you will do you will after this

uh title tag you can simply embed uh dollar uh percentage style styles and

after the body just embed percentage script

that's all so just make this change and lastly guys if you want to Minify your code we

do need to add this plugin which is uh put a

comma this is actually will be checking if the application in the production then only use this plugin which is turer

which will actually Minify your code inside your production so now this is

completed guys and now we need to add actually build your project before building it go to your package.json and

in the script section we need to Define each script so we will be having the development script build script so for

each script there is a specific command and rollup that you need to invoke so the very first command it will be for

the build which is roll up- C so- C stands for compile so it will compile

your overall project and create a public folder so first of all let me just uh

build our project npm run

build so just see on the left hand

side so it is saying that to load an es module set type is equal to module in

the package.json or use the MJS extension let me see

so what it is saying that guys inside your package.json

file you need to put a type parameter just set it to

module because we are using a es module because using the import statement

that's

why so it is saying that cannot find package at the rate rollup plugin post

CSS oh I think we have made a mistake at the rate is not present inside this you

can see we don't we need to remove it at

theate uh what I will do guys I have given the link in the description you

can check my GitHub Depot uh I think it is creating the version number is creating some kind of problem so what I

will do I will simply copy all these dependencies with the with their own respective versions and I will simply

paste it I think it is creating some problem related to the latest version I

will paste it and you can find my GitHub repo in the description of this video so what I will do I will simply invoke

install these specific versions so to actually avoid any

error so make sure you check out my GitHub repo and if you face similar problems you can clone the GitHub repo

to actually install these versions which are currently working because the latest version of rollup is is not supporting

the plugins now it is installed and you can run your npm R build

command so it is saying that package

subpath uh I think I made some kind of so here I

will paste roll up config JS

file let me paste

it so now you can see it is compiling it it for just a typo mistake in rollup config JS file so you can check out my

GitHub repo which contains all all the correct versions and the code for this application so you can

see it has created on the left hand side the public folder and now it contains

all this index word HTML which actually contains the link tag which actually are

embedded dynamically by rollup this is bundle JS and uh it is also minified you can

see the CSS code SAS code has been compiled and it has been converted to minified CSS and also the minified

JavaScript code as well so in the package.json file just add a second script for actually building it a at a

development server so we will have a development

script which will support hot reloading so you need to define a second script

here which will be watching the application if you make any sort of changes rb-

c-w so DW stands for watch and when we actually deel basically execute this

development script we need to npm run all so this will actually run both these scripts

simultaneously parall start watch put a

comma and this one will be for starting the application which will be serving this from the public folder so these are

the four scripts so if you see now if I execute npm run Dev so it will actually

start this application locally and now if you open Local Host

3000 sorry Local Host 5,000 this is actually the application

current time is this you can make any sort of changes let's suppose if I change the background color from SAS it

will get automatically compiled you can see we have changed the

background color so if you refresh now the background color will be changed and current time if you

see so this is actually this application guys once you are done you can start it

you can build out the application again it will create the bundle JS and then you can run this

application by executing npm Run start so this will now

again if you refresh now you can see that so this was a setup guys from

scratch using rollup how to use this and set up inside vs code and compile your

front end project you can use it now with any reactjs VJs any front-end technology so the GitHub repo is present

in the description you can clone it whenever you are developing any sort of project using rollup module bundler or

compiler thank you very much for watching this video please hit that like button subscribe the channel and I will

be seeing you in the next video