Up next in 10
Mastering Parcel.js Compile SASS and ES6+ JavaScript with Ease in Browser A Complete Guide
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will actually talk about
0:04
a module bundler Library which actually
0:08
compiles your JavaScript code and CSS
0:11
code which is SAS code that you write
0:13
into CSS which is called as parcel
0:15
parcel is actually a very good
0:18
alternative to
0:20
webpack if you visit their official
0:23
documentation this is their if you write
0:25
here parcel this is
0:27
actually zero configuration build tool
0:30
for the web applications if you're
0:31
developing any sort of application such
0:33
as uh vanilla JavaScript or you are
0:36
using nodejs Express react view any
0:39
other front end framework this is
0:40
actually a configuration build tool it's
0:42
not a library it's not a framework it's
0:44
just a u actually a library which
0:47
converts your code that you write in
0:51
high level framework such as es6 your
0:54
JavaScript your SAS it actually compiles
0:56
it to a code that the browser can
0:59
understand so I will show you step
1:00
by-step process on how to actually get
1:02
started with parcel in vs code and how
1:04
to set up a simple little project in
1:06
nodejs Express and also I will show you
1:08
in complete vanilla JavaScript project
1:11
so I'm there inside my code structure
1:13
right here if you if I show you from
1:17
scratch this is
1:19
actually the development environment I'm
1:22
working upon so you can see in my source
1:25
directory if you see my source directory
1:27
here I'm just writing my all my code
1:30
this is a JavaScript code and if you
1:32
open this we are actually using third
1:35
party nodejs modules so we are using
1:38
this export statement export default we
1:40
have defined these four functions sum
1:42
subtract multiply divide and inside the
1:45
script.js we are importing these modules
1:48
by using the import statement so as you
1:51
know guys import statement is not is if
1:54
you directly use these import statements
1:57
and try to uh include this inside
2:00
HTML file the browser will not rec
2:02
recognized it so you need to convert
2:05
this code into a Code common JS code so
2:07
that the browser can understand so
2:09
that's where parcel will comes into the
2:11
picture it actually compiles this code
2:14
to the browser code minified code it
2:18
actually also removes the white space as
2:20
well so you can see we are using these
2:22
third party modules which is xos low
2:24
Dash from the nodejs package manager so
2:29
and also we the SAS folder we are
2:31
actually using the SAS and if you see
2:33
this SAS file right here so we will need
2:36
to Minify and compile this SAS into CSS
2:39
so parcel we have actually inside our
2:41
package.json we have defined this two
2:43
Dev scripts first for the development
2:45
and second for the build script so
2:47
whenever you are uh done with your
2:49
project you can actually build out your
2:51
project so let me just show you the
2:53
scripts right here so just if I go to
2:57
my let me delete this
3:00
Dev so once I execute the script guys
3:03
just see in the left hand side a new
3:04
directory will be if if I running this
3:07
on the local server npm runev so this
3:10
will actually open a new Port npm runev
3:13
it will create a Dev folder and it will
3:16
open my project in the browser
3:18
automatically so parcel has this support
3:20
it can open your browser so now you can
3:23
see it is listening on Local Host 1 2 3
3:25
4 port number you can change the port
3:28
number you can customize each and
3:30
everything I will show you in this
3:31
tutorial how to do this this is a simple
3:34
command that we are written parcel
3:35
Source index. HTML and right here we are
3:38
creating a new directory called as Dev
3:40
directory where all the code is present
3:43
and then we are opening this at a port
3:45
number which is 1 2 3 4 you can even
3:47
change this port number as well and we
3:50
are not having to if if you don't need
3:52
the source map files then you can
3:54
provide this option no set map if I show
3:57
you this development folder you will see
3:59
we have the minified CSS code it
4:02
actually compiles the SAS code and it
4:04
has converted this and this is our
4:06
JavaScript code and here we are actually
4:09
having this index. HTML which we are
4:11
opening it so if you want to deploy this
4:14
inside production you can simply run
4:16
this command build command now it will
4:18
create the disc folder which will be
4:20
used for the production you will now see
4:23
it has actually created the disc folder
4:25
once again it has three files right here
4:27
but now these files are minified
4:30
so there is no white space but if you
4:32
see in the development it has white
4:34
space but in the production level code
4:36
it is minified all the code is minified
4:39
is it is appearing on a single line the
4:41
SAS Cod it is compiled to CSS and the
4:44
es6 code is compiled successfully to
4:46
this common JS code which is
4:48
understandable by the browser so now you
4:50
can open
4:53
this you can open this uh HTML
4:57
file directly in the browser
5:00
by simply opening it with live server
5:03
this also does the same thing and the
5:06
nice thing about parcel guys if you run
5:08
the dev script once again if you make
5:10
any sort of changes it will hot Auto
5:12
reload let's suppose if I make some kind
5:15
of change in my SAS file if I want to
5:17
change the background color to this
5:19
color so once I make this change it will
5:21
hot aut Auto reload you can see now the
5:25
actually the application changes I
5:27
basically make the change in the SAS
5:28
file so it automat atically rebuilds the
5:30
application and compiles it to the uh
5:33
production code and it automatically
5:35
reloads so whenever you are developing
5:36
your application parcel makes it really
5:39
easy so whenever you make any sort of
5:41
change it actually if I change the text
5:44
color to Black so now you can see the
5:47
color of the text have been changed to
5:49
Black so if you want to anything which
5:54
you make any change that you make that
5:57
script will once again run so you can
6:00
make change inside
6:02
your JavaScript as well so you can add
6:05
alert statement hi
6:09
hello so now you can see that so now to
6:12
get started guys by configuring parcel I
6:15
will show you from scratch so what I
6:18
will do I will
6:21
simply stop this and I will simply go to
6:24
a new directory I will say parcel
6:26
example project I will CD to
6:33
this opening it inside vs code So
6:36
currently this directory is empty now we
6:39
need to first of all create a
6:40
package.json file so npm in it- y and
6:44
then we need to install globally you can
6:46
even install it globally as well this
6:49
parcel package so now you can access
6:52
your parcel command directly if you
6:55
execute this you can just do parcel and
6:57
then you can just compile any file any
7:02
JavaScript or css
7:05
file
7:08
so but there is also a second option if
7:12
you don't want to install it globally
7:14
what you can do we can install it
7:16
locally by using npm IV Dev parcel so it
7:21
will install it as a Dev dependency by
7:23
this option D- save dasd so this will
7:27
simply install this and now it will will
7:29
actually install it relative to your
7:32
project inside Dev dependency section so
7:34
once it is installed it will install it
7:37
in this section Dev
7:42
dependencies so in the meantime what we
7:44
can do we can create our project so just
7:47
create a source directory here we will
7:50
actually have our index.html file and
7:54
the directory for SAS file and the
7:57
directory for
7:59
JavaScript code so here in the SAS file
8:02
we can simply say that the SAS file we
8:06
can create a file called as style.
8:10
SAS here we'll be writing the SAS code
8:13
and here we will be writing the
8:15
JavaScript code so in the JavaScript let
8:18
me just uh have a alert
8:20
statement hi hello and in the SAS file
8:24
we can simply have a
8:28
variable primary
8:35
color and then we can actually change
8:38
the body background color to this color
8:41
which we defined primary color that's
8:44
all so we have this SAS code and we have
8:45
the JavaScript code so we can now
8:48
include this inside of a file so we can
8:50
simply say that parcel
8:53
example so here you can simply have a
8:55
heading hello
8:57
world and a simple button button click
9:00
name you can give it an ID to this
9:03
button button. s and here we'll be
9:05
referencing our JavaScript code so it is
9:08
present inside the JS folder
9:11
script.js similarly we'll be referencing
9:13
the SAS code which is present
9:17
inside SAS style. scss so simply include
9:22
all the dependencies the JavaScript and
9:24
the SAS file now we can actually write a
9:27
simple script inside package.json in the
9:29
scrip section so if you want to
9:31
configure your parcel just you can first
9:35
of all let me show you how you can
9:37
directly if you have installed parser
9:39
globally you can directly run compile
9:42
your file so the command is really
9:44
simple I will show you both the commands
9:47
for development and build process so for
9:50
development guys it's very easy you
9:51
write parcel and then you provide the
9:54
location where your file is located so
9:56
my file is located inside this index HTM
9:59
which is present in inside the source
10:01
folder so I will simply write here
10:03
parcel Source index.html this is a path
10:07
that I'm giving you and then we need to
10:10
open this at a port number so we can
10:14
configure a port number like this dash
10:16
dash open it will open a new browser
10:18
window at this port number we can Define
10:21
so we need to define a port number let
10:23
suppose 5,000 port number I'm
10:26
choosing and uh that's it
10:31
and also here you can even if you just
10:34
if you just execute this what will
10:36
happen it will compile the project and
10:39
now you can see that it will actually
10:41
open this Local Host
10:47
5,000 so it is now building this and now
10:50
you can see that your project is
10:51
successfully built the SAS file is
10:53
automatically compiled to the CSS now we
10:56
have the heading and a button so if you
10:58
see that it has created this disc folder
11:00
by default so by default the folder name
11:03
is disc and if you don't provide a
11:05
folder name it will actually create this
11:07
folder called as disc and you will also
11:10
see uh these map files so map files are
11:15
somewhat important but if you don't know
11:17
if you don't want these map files you
11:18
can eliminate that option as well by
11:21
providing a a option if you only want
11:24
the CSS and the JavaScript code so let
11:27
me show you a second scenario let me
11:29
just stop this let me delete this
11:33
folder and now I will show you how you
11:36
can pass additional options so let's
11:38
suppose you don't want to the source
11:41
file so we can simply provide an option
11:43
in parcel by Das Dash no dash Source
11:48
Maps so this will make sure that no map
11:51
file is generated and here we can even
11:54
change the let's suppose if you want to
11:58
have a
12:02
Dev
12:04
directory sorry dash dash
12:08
disc directory and here you can provide
12:10
any your own uh directory name folder
12:13
name let's suppose I provide here Dev so
12:16
now this is actually the option D- dis
12:19
directory so where your output will come
12:21
so you'll be coming in the dev directory
12:24
you can change the folder name and here
12:26
you can provide that you don't need the
12:28
source map files this is the actual
12:30
command so if you now execute this so
12:33
once again it will open this and now in
12:36
the dev you can see the directory name
12:37
is successfully changed Dev and if you
12:40
see only the JavaScript code is there
12:43
this is actual JavaScript CSS that's all
12:47
and one more file is there because this
12:49
is a development project it is not the
12:51
minified code that's why this project
12:53
this file is there so you will see now
12:56
it is opening this file automatically in
12:58
the browser
12:59
so the thing about is that if you make
13:01
any sort of changes in the SAS file it
13:03
will auto reload let's suppose if I
13:05
change the background color to blue
13:07
color it will automatically
13:12
reload so let me change the
13:16
back if I change it to blue color you
13:19
can see that now the blue color has been
13:21
changed let's suppose if I apply
13:24
some color let me change to
13:27
White and uh text align to
13:33
Center so now you can see automatically
13:36
changes same goes with the JavaScript as
13:38
well let
13:40
me write a
13:43
function so we can actually use import
13:46
statements as well we can use third
13:48
party modules as well it will also
13:50
compile this as well so if I make this
13:53
change you will see the change will get
13:56
recognized you can see that so now the
13:59
thing I want to show you if you have
14:01
multiple SAS files let's suppose if you
14:03
have a component of button and you are
14:06
writing your file in a separate
14:07
component let's suppose only the styles
14:10
for this button will be there let's
14:12
suppose I Define a button color and here
14:15
I Define a
14:16
color like this so now I need to change
14:21
Target the button and change the
14:23
background color of this button to this
14:24
button color that we have defined now we
14:27
need to export this file now we need to
14:29
import this file in the base file you
14:31
can simply use the import statement at
14:34
the rate
14:36
import so we can simply use the button
14:41
button SAS so what it will do now if you
14:44
refresh it now you will see the button
14:46
color is also changed because it is
14:48
compiling both these SAS files and if
14:50
you see it is generating these Styles
14:52
you will see button comma body
14:54
background color so it is act you can
14:57
have multiple SAS files you can code
14:59
multiple fast files and then you it will
15:02
automatically compile it into a single
15:04
file at the time of compilation so this
15:07
makes it really easy you'll see that as
15:09
I change the color of the button it auto
15:12
refreshes so now you can code your
15:14
application guys this is actually makes
15:17
it really easy to actually code this
15:20
application and now I will show you how
15:22
you can use third party modules let's
15:24
suppose if you want to use a third party
15:26
module of
15:29
Dash which is a node module and xos for
15:31
data fetching so we are actually using
15:34
these two third party nodejs
15:36
modules so once it is installed you can
15:39
simply go to the JavaScript and uh you
15:42
can simply
15:44
import
15:47
the first of all the low Das package
15:50
basically we can import so it actually
15:52
uses a required
15:54
syntax low
15:57
Dash so
15:59
so lad Das is a very popular package
16:02
inside nodejs which actually used for
16:04
carrying out operations console log we
16:07
can simply say it has a function of
16:10
Chunk and here we can actually provide a
16:12
array 1 comma 4 comma 5 comma 6 comma 7
16:17
and here we can divide this array into
16:19
let's suppose a chunks of three so three
16:22
three elements will be there two arrays
16:24
will be created of three elements if I
16:27
try to refresh this you will now now see
16:29
in
16:32
the okay we do need to start the
16:35
development
16:43
script so if you see that guys uh parcel
16:47
transform browser scripts cannot have
16:50
Imports or
16:55
exports uh let me see guys what is the
16:58
problem
17:07
just
17:08
wait uh guys I figured out the error the
17:11
error was pretty simple you need to
17:14
actually whenever you execute this uh
17:17
whenever you are including your
17:19
Javascript file you need to actually
17:22
give it a attribute called as type is
17:24
equal to module so whenever I'm
17:27
referencing it inside our index. HTML
17:29
file whenever we are including this file
17:32
script.js so this file when we are
17:35
including which contains these import
17:36
statements this required statement this
17:38
is es6 modules these are not
17:41
commonjs code so for that you need to
17:44
actually add a attribute called as
17:47
type is equal to module so it's a es6
17:51
module it's a high level JavaScript code
17:53
that we want to execute in the browser
17:56
so actually parcel will actually compile
17:58
this into a a minified code so now if
18:00
you refresh it if you try
18:05
to run the scam script it will actually
18:09
create a
18:17
development so first of all just make
18:19
sure that you delete everything
18:23
from and also delete this folder which
18:26
automatically gets created parcel C
18:29
also delete this folder as
18:34
well so what I will do I will simply
18:37
delete this
18:43
folder
18:46
par example project here let me delete
18:49
this
18:52
folder and open it once again and then
19:03
so I will just add these two scripts
19:05
guys in the package.json file so that I
19:08
don't want to type it again and again
19:10
just open package.json and in the script
19:12
section just paste these two scripts the
19:15
build script and the dep script if you
19:19
see we are simply pasting the same
19:20
script right here parcel Source index.
19:23
HTML it is opening the port number you
19:26
can change this port number to 3,000 as
19:28
well
19:30
and for the build script we are simply
19:31
using parcel build followed by The
19:34
Source
19:35
index.html here we are providing the
19:37
destination folder to be dis by default
19:39
you can also change this as well dash
19:42
dash
19:44
disc we can call this Dev and here also
19:47
we don't need the source map you can
19:50
simply write
19:53
here we can directly now simply say npm
19:56
run Dev so it will actually Dev
20:01
partial example
20:08
project save
20:13
this
20:23
overr so now you can see that guys now
20:26
the project has successfully been
20:27
compiled
20:29
if you see it has created it has built
20:31
the folders if I show
20:34
you a Dev folder has been created it has
20:37
actually the files which are needed the
20:39
CSS JavaScript and the index. HTML if
20:42
you make any sort of change so actually
20:45
if I show you we are actually importing
20:48
these third party modules you can see
20:51
that first of all let me start from
20:53
scratch so we are actually importing the
20:55
third party module of low Dash and here
20:58
here we can perform some operations such
21:00
as this function
21:02
chunk this
21:04
array 5
21:06
6 7 45 so we need to uh just divide this
21:13
array into three chunks so three
21:15
elements then three elements and then
21:17
three so if I check the console you will
21:20
actually see in the console two arrays
21:23
have been created three arrays sorry
21:25
this is the first array this is a second
21:27
array this is a third array so here we
21:29
are actually using the low Dash package
21:31
third party module of nodejs similarly
21:34
we can import the XO package as well by
21:38
using the import statement which is
21:40
again a third party or high level
21:43
language es6 so basically it is compiled
21:48
now we are using actually making the uh
21:51
request to a rest API and actually
21:54
getting the response using Aus if you
21:56
check your console now you will get this
21:59
Json data you can see from the third
22:01
party API it is automatically being
22:03
refreshed it is as you write your code
22:06
it actually compiles your high level
22:08
JavaScript code which contains these
22:11
import statements it's required
22:12
statements we are using third party
22:14
nodejs modules and then it
22:17
actually compiles it and it actually
22:20
minifies this code you'll see that so
22:23
this is actually the development
22:24
environment now if you want to compile
22:26
it to a disc folder where for the
22:29
production code now you can run the
22:32
build script so what it will do it will
22:34
build out your project and create a so
22:37
it is saying that did you mean index.
22:40
html for this you just need to go to
22:42
package.json just remove this entry of
22:45
main just remove this entry as we are
22:48
not developing uh nodejs application so
22:51
simply delete
22:54
this again run
22:56
this so it will now actually create your
22:59
dist
23:01
folder it is bundling all the assets so
23:05
now you will see that it now all the
23:07
code is minifi it is actually common GS
23:10
code so that the browser can understand
23:12
this is a minified JavaScript code that
23:14
you see sorry CSS code the SAS has been
23:18
compiled and this is actually your
23:20
minified HTML so you can now directly
23:24
open this just add the do slash right
23:26
here
23:32
so now you can directly open this uh
23:35
live
23:36
server the same result will look
23:38
something like this and if you check
23:40
your console you will also see the same
23:43
result this
23:47
is so you can see that guys this is a
23:50
great solution I think it's a great
23:52
alternative to webpack there is very
23:54
less configuration which is required if
23:56
you're developing a new project project
23:58
related to anything it can be express it
24:01
can be react it can be view it can be
24:02
vanilla JavaScript project it can be
24:05
with any framework if you're developing
24:07
with this SAS and if you are using third
24:10
party nodejs modules then parcel is the
24:12
very great solution it's a module
24:14
bundler which actually compiles your
24:16
high level JavaScript code to this
24:18
minifi code and compiles your SAS as
24:21
well so I think it's a great solution
24:23
and uh thank you very much for watching
24:26
this video and I will be seeing you guys
24:28
in the next one
#Software