Rollup.js Crash Course to Compile & Bundle Frontend Javascript Project With SCSS in VS Code
Jan 9, 2025
Get the full source code used in video here:
https://github.com/gauti123456/rollpack-starter
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this another video so in this video we will talk about a new compiler new uh bundler for
0:08
JavaScript which is rollup rollup JS is similar to webpack S pack all these
0:14
module bundlers and which actually compiles your high level JavaScript code
0:19
and also you can compile your SAS files directly into the code which is understandable by the browser so you can
0:25
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
0:33
JavaScript code we are importing uh nodejs modules you can see this is actually a nodejs module that we
0:40
imported a third party module and now if I want to compile this project we have this rollup doc config.js file which is
0:48
actually required for actually integrating rollup inside your application so I've written this now we
0:55
have three commands First Command let me show you to actually build our project
1:01
so we can simply run this command npm run build so what this command will do
1:07
guys it will actually compile everything into a single public folder so that you can deploy that folder it will Minify
1:14
that code if I execute this command it will take this high level SAS and JavaScript code and it will actually
1:20
convert this code to Common GS so that the code is understandable by the browser you see it has created minified
1:27
bundle JS code which is of JavaScript and the bundle . CSS code it has compiled the SAS code which was written
1:34
inside the style. SAS file so it has compiled this and if I now open this you
1:40
can easily open this by executing npm Run start so it will actually start your
1:47
application on Local Host 5,000 port number so it is actually using the
1:54
minii code which is generated by roac rollup this is actually the application
2:00
we are currently displaying the current time which is 1219 which is coming
2:05
through this third party module that we installed of nodejs which is date- FNS
2:11
you can use any nodejs module just I wanted to show you the functionality how you can compile your
2:17
application so we will try to build this application from scratch I will show you how to integrate this so now let's get
2:25
started so now I will actually make a new folder let me
2:30
and also it comes with its own development server as well so npm run Dev if you execute this command it will
2:36
start a development server and it will directly open this application in the browser hot reloading
2:43
functionality will also be present so now the application has been started
2:51
you can see that so now it is listening this application so what this actually does it you can even change the code as
2:58
well while developing like let's suppose if you are changing the SAS let me
3:04
change the background color this primary
3:12
color if you make this change if you refresh now automatically your application will change you will see
3:19
that so now as you make changes inside SAS files if you add some more
3:25
JavaScript code if I remove this alert statement let's suppose if I put another
3:30
alert statement K if I make this change automatically if you refresh you will
3:37
see the code is automatically compiled so this is actually happening when we
3:43
execute npm run Dev so we are actually this is really useful whenever you are
3:49
uh working on your application so once you are happy you can deploy this using just run this command npm run buil
3:57
and it will now compile everything into a minified code so let's get started guys on how to integrate
4:05
rollup I will make a new directory roller project I will open it inside uh
4:12
vs code so we start it from direct scratch so the very first thing we need
4:18
to do you need to initialize the package.json file so inside this package.json file we
4:24
need to install the rollup if you don't know about rollup guys it's a module compiler bundler for JavaScript if you
4:31
just write rollup the very first link which comes roll up. JS it's a famous
4:37
JavaScript module bundler similar to webpack V all these compilers and
4:42
bundlers which are there for JavaScript you can just do it for any framework if you're developing for react view so once
4:49
you actually do this for the very first time you can integrate with any front end tech technology so after that you
4:55
just need to inti uh install inside Dev dependency because dasd simply means that it's a dep
5:02
dependency it is not required for production it is only required when we are developing the project
5:08
rollup rollup is the base Library we need to install it and then it has
5:14
various plugins out there so one by one I will tell you about them so first of all just install the
5:21
rollup library and now if you see in the package.json file you will see the rollup is installed in the depth
5:28
dependencies now we need to create a source folder where we will actually write the code and inside this we will
5:34
Define a file which is template. htmls where we will actually write our HTML
5:39
code which is the UI code and
5:46
here we can change the title roll up
5:55
examples so it can have any HTML similarly we'll Define a folder for
6:00
holding the style code so style. SAS we will be creating this file and similarly
6:08
here we will be defining the file for which is main.js which will contain the
6:14
JavaScript code which will get compiled by rollup so the structure of the
6:22
application in the HTML we will simply be displaying the current time so right in the
6:27
HTML I will just show you a very basic example so just give it a heading rollup
6:33
starter app and then we will in the paragraph We will simply say the current time is and
6:42
then we will have a span tag you'll give it an ID of time
6:50
now dot dot dot so this is only the HTML which is required so now coming back to
6:56
the SAS file we will simply write some basic styles sheet code we will declare
7:01
a variable for primary
7:07
color you will initialize it to Black and the text color will be
7:17
white and then in the body we'll simply say background color is equal to primary color and the paragraph color we will
7:26
align it in the center position and the color of the text will be white
7:32
so I will simply say text color phone size I will change it to 45 pixel that's
7:37
so that's all the basic style uh we can write Advanced SAS as well I will just
7:43
show you how to compile this so in the main JS file we will import a third party module that I already showed you
7:51
npmi date FNS so if you search for this module which basically gives you the current
7:58
time so if you search for this module date
8:12
FNS I think the name of the package is let me
8:17
check yeah date FNS so simply install it this is not a depth dependency it is
8:22
required for this application so npmi date- FNS so after you do this in the
8:28
main JS file we will try to actually write the code so we can simply import this import
8:36
format from date FNS SL
8:42
format so now to get the current time we will basically Target the span tag which
8:48
we have given an ID by cury selector which is time now and just be
8:54
manipulating the inner HTML of it so export default function
9:00
update so what I can do I can uh simply write this in a different file so you'll
9:06
simply create a file right here current time JS so I will simply shift this code
9:13
in this file so that we can import this file in the main file so you'll Define
9:19
this function right here so what the job of this function is to
9:24
actually manipulate the inner html text content we will simply use the format
9:30
function you will basically get the current time by using this
9:36
format hour minute and second like this this will get the current time and then
9:42
we'll simply just use the set set timeout function to actually call this
9:47
function after 1 second every time so it will also show you the current
9:53
time with one second again and again we'll call this function so we have now defined this we are exporting this
9:59
update function now we can include this in our main file by the import statement
10:04
so right here in the main JS file what we can do we can simply import the
10:10
update function from the current time module that we declared we also need to
10:16
import the stylesheet as well so just import the stylesheet which is style.
10:22
SAS and we can just add an alert statement which is this app is starting
10:29
and then we can simply bind call this function update that's
10:35
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
10:41
application now we need to get started with rollup so if you want to create uh
10:47
B your application or compile it the very first step is to actually Define this file roll app config
10:55
JS similar to webpack you need to Define this config file you can see the icon is changed by vs
11:02
code this is rollup icon so inside this file uh we do need
11:08
to install some modules guys some plugins which is supported by rollup so
11:13
what I will do is that I will show you one by one the utility of each plugin
11:19
the very first plugin guys we need to install it as Dev dependency at the rate
11:25
rollup SL plugin commonjs so the sole purpose of this plugin is to
11:32
actually understand your code high level code and convert that into common GS which is understandable by the browser
11:38
so this is a mandatory plugin that you need to actually install and then the second plugin is
11:46
rollup plug-in HTML so if you want to generate HTML files as well
11:52
automatically this is this plugin is required roller plugin HTML so if
11:57
through this plugin we will be providing this template HTML that we defined in the source folder and then rollup will
12:03
use it and automatically generate this minifi code so after this plugin we need
12:09
the third plugin to actually resolve all the third party nodejs modules that we are using inside our application so this
12:16
required plug-in Das node resolve this is a module at theate rollup plugin Das
12:23
node Das resolve so the sole purpose of using this to actually resolve all the third party model modules that you are
12:29
using of nodejs inside your application so install this install
12:36
these three plugins and apart from that we also need
12:44
one more
12:49
plugin so we also need the plugin for compiling SAS as well so for compiling
12:55
SAS into CSS we have a plug-in called as rollup plugin post
13:01
CSS roller plug-in post CSS we need to install this and we also need to install
13:06
SAS as a dep dependency also so SS SAS is also required and then lastly guys if
13:13
you want to Minify the output code this dependency is required
13:21
rollup Dash plugin t r s r this is actually the
13:27
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
13:34
install this these three dependencies and now if you see there is a pro
13:41
problem here which is roll up plugin
13:50
Tor let me check roll up
13:56
plug-in t r
14:07
okay we do need to add add theate symbol sorry this was a
14:18
problem just add a add theate symbol at the very top uh let me see guys I think the
14:26
version number is creating a problem so what I will do uh I will simply add this version number which is
14:33
7.0.2 so just add this version number in the package Ro
14:40
Json simply do
14:57
this so it is saying that rollup found is 4.2
15:03
21.2 I think it is uh creating Pro but one solution it is that you can just say
15:09
dash dash Force so it will ignore the compatibility issues so just add add Dash Das Force so sometimes in newer
15:17
versions it actually create problems okay we do need we don't need
15:23
to write at theate symbol
15:29
just add this dash dash
15:40
Force oh sorry we basically post CSS we added this n which is not there
16:00
so you can see that uh now it is successfully installed so just add this- Dash Das Force to actually ignore the
16:06
compatibility issues so now we just need to initialize our rollup doc config JS
16:11
file so the very first thing we will do we will import all the
16:17
modules so we will be importing it roll up commonjs this one node resolve the
16:25
resolve function similarly you'll be importing the common JS method from this plugin plugin Das commonjs and for
16:32
minifying the code we will be importing turer which will be coming from rollup plugin turer and then we'll be importing
16:39
post CSS which will be coming from plug-in post CSS which is required for compiling SAS and now for actually
16:47
generating HTML we will be importing it from that this rollup plugin SL HTML and
16:54
then we also need to import the buil-in plug-in which is in nodejs path
17:00
and here you'll be checking if you are doing it for production so process. EnV
17:07
variable roll upore watch So based upon whether you are in
17:13
production mode or not it will assign this variable then we have to write here
17:18
export default this returns an object which have various properties which you
17:24
can control so here you need to provide the input file which file you need to compile so my file is present inside
17:32
source- MJS so this is actually the main Javascript file that we need to compile
17:37
which is a starting point of the application so here we are providing the path and then it takes the output
17:44
similarly this is an actually an object it contains the file property which is
17:50
actually this file will be created for the JavaScript which is public / bundle.js and then the format of this
17:56
file is I if immediately invoke function
18:02
execution this is the mode of this and Source map if you do need to actually
18:08
generate Source map which is a essential file you will always you will put true
18:14
here and then we have this uh plugins options you can provide as many plugins
18:19
as you want in this array this is not an object this is an array so this is
18:24
actually a array so we will run by provide all these plugins that we
18:30
installed of rollup first of all we will import the resolve plugin to actually
18:35
import all the nodejs modules then the commonjs which is used to compile your high level JavaScript code to minified
18:43
browser understandable code the third thing for compiling the SAS file we will import post CSS we will call it and it
18:51
actually takes some options first option is extract and it need to be set to true
18:56
and we do need to minimize or the S CSS code so we'll simply set this option
19:02
which is minimize to also true and then the source map for the CSS
19:09
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
19:17
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
19:23
name so which file you need to generate we need to generate in the public folder index HTML you can even change this name
19:31
you can choose any name and now here in this template option you will provide an
19:36
object or function which will take the files and the public
19:43
path as two argument passed so this will be a call back
19:52
function so right inside this function guys the Third property do it also takes
20:00
is let me just provide it so this is actually the
20:06
object files public
20:17
path so here we need to provide our template where the template is located
20:22
so our template is located in the we'll use the part. resolve function
20:30
so it is present in the source directory SL template. HTML so put a comma or
20:38
semicon and then we will basically read uh the content of this template whatever
20:44
is the HTML present for this we do need to require the file system module and directly we'll be using this function of
20:50
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
20:58
coding type and then we need to basically embed the JavaScript and the SAS code inside this
21:05
which is this main JS and the style. SAS so for doing this dynamically what I
21:11
will do in this rollup config file we do need to here say files.
21:18
JS or operator nothing so it is now checking these files variable that we
21:25
got in this function if any Javascript file is present then set it to that if
21:30
there is no present then we set it to empty array so now we'll be using the
21:35
map function to Loop through each file Javascript file which is
21:42
present this will be actually will be a arrow
21:48
function so right here you'll simply return this public path SL file name we
21:55
are actually using the backtick symbol to actually put Dynamic variables right here this will be having the public path
22:01
of the script followed by the file name and this script tag will be dynamically
22:07
injected in the HTML so in the similar manner we do need to add
22:13
a new line Corrector by using the join function like this so in the similar
22:20
manner we need to do this for the Styles sheet as well the SAS file so files. CSS
22:27
like this you will simply be embedding this
22:33
stylesheets in the similar
22:40
way so we do need have the scripts and the Styles variable right here so after
22:46
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
22:54
need to return this uh template content
23:01
we need to replace it by percent sign
23:08
scripts and then percentage you can give any variable of your choice so this is actually the content we will
23:17
embed and uh again we'll be using uh another replace this time I can do it on
23:24
the next line like this so we have declared two variables right here first is scripts
23:31
percentage sign scripts and percentage sign Styles now we need to go to your template HTML and embed these variables
23:38
dynamically so just after the title what you will do you will after this
23:46
uh title tag you can simply embed uh dollar uh percentage style styles and
23:53
after the body just embed percentage script
23:58
that's all so just make this change and lastly guys if you want to Minify your code we
24:05
do need to add this plugin which is uh put a
24:12
comma this is actually will be checking if the application in the production then only use this plugin which is turer
24:20
which will actually Minify your code inside your production so now this is
24:26
completed guys and now we need to add actually build your project before building it go to your package.json and
24:32
in the script section we need to Define each script so we will be having the development script build script so for
24:40
each script there is a specific command and rollup that you need to invoke so the very first command it will be for
24:47
the build which is roll up- C so- C stands for compile so it will compile
24:53
your overall project and create a public folder so first of all let me just uh
24:58
build our project npm run
25:04
build so just see on the left hand
25:09
side so it is saying that to load an es module set type is equal to module in
25:15
the package.json or use the MJS extension let me see
25:44
so what it is saying that guys inside your package.json
25:50
file you need to put a type parameter just set it to
25:59
module because we are using a es module because using the import statement
26:05
that's
26:13
why so it is saying that cannot find package at the rate rollup plugin post
26:19
CSS oh I think we have made a mistake at the rate is not present inside this you
26:24
can see we don't we need to remove it at
26:44
theate uh what I will do guys I have given the link in the description you
26:49
can check my GitHub Depot uh I think it is creating the version number is creating some kind of problem so what I
26:56
will do I will simply copy all these dependencies with the with their own respective versions and I will simply
27:04
paste it I think it is creating some problem related to the latest version I
27:09
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
27:15
install these specific versions so to actually avoid any
27:20
error so make sure you check out my GitHub repo and if you face similar problems you can clone the GitHub repo
27:28
to actually install these versions which are currently working because the latest version of rollup is is not supporting
27:35
the plugins now it is installed and you can run your npm R build
27:44
command so it is saying that package
27:54
subpath uh I think I made some kind of so here I
27:59
will paste roll up config JS
28:07
file let me paste
28:19
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
28:26
GitHub repo which contains all all the correct versions and the code for this application so you can
28:34
see it has created on the left hand side the public folder and now it contains
28:39
all this index word HTML which actually contains the link tag which actually are
28:45
embedded dynamically by rollup this is bundle JS and uh it is also minified you can
28:53
see the CSS code SAS code has been compiled and it has been converted to minified CSS and also the minified
29:00
JavaScript code as well so in the package.json file just add a second script for actually building it a at a
29:09
development server so we will have a development
29:14
script which will support hot reloading so you need to define a second script
29:19
here which will be watching the application if you make any sort of changes rb-
29:26
c-w so DW stands for watch and when we actually deel basically execute this
29:33
development script we need to npm run all so this will actually run both these scripts
29:39
simultaneously parall start watch put a
29:45
comma and this one will be for starting the application which will be serving this from the public folder so these are
29:51
the four scripts so if you see now if I execute npm run Dev so it will actually
29:57
start this application locally and now if you open Local Host
30:09
3000 sorry Local Host 5,000 this is actually the application
30:15
current time is this you can make any sort of changes let's suppose if I change the background color from SAS it
30:22
will get automatically compiled you can see we have changed the
30:28
background color so if you refresh now the background color will be changed and current time if you
30:37
see so this is actually this application guys once you are done you can start it
30:44
you can build out the application again it will create the bundle JS and then you can run this
30:51
application by executing npm Run start so this will now
30:58
again if you refresh now you can see that so this was a setup guys from
31:04
scratch using rollup how to use this and set up inside vs code and compile your
31:10
front end project you can use it now with any reactjs VJs any front-end technology so the GitHub repo is present
31:17
in the description you can clone it whenever you are developing any sort of project using rollup module bundler or
31:24
compiler thank you very much for watching this video please hit that like button subscribe the channel and I will
31:29
be seeing you in the next video
#Business & Productivity Software
#Computer Education
