Babel Mini Crash Course to Compile TypeScript to Javascript and Run it in Browser Setup in VS Code
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will look at Babel
0:06
mini crash course so it is actually a
0:08
JavaScript
0:10
compiler and with the help of this
0:12
Library you can actually compile your
0:15
typescript or any other high level code
0:18
into browser understandable JavaScript
0:21
code so we will look at an example right
0:23
here where will we will be compiling the
0:25
typescript code into JavaScript code and
0:28
execute it in the browser using HTML so
0:31
we will it's a very simple example and
0:33
we will be using this Library Babel so
0:37
it has its own official website you can
0:40
just check out the
0:41
documentation and they also have the
0:44
setup as well for various environments
0:46
so we will be looking at a very basic
0:48
example and we have this typescript file
0:51
if you see in the source directory
0:54
index.ts and we have written some
0:56
typescript code you will see we have
0:57
used this import export and in
1:00
typescript if you know it actually need
1:02
to declare the type of the variable
1:04
let's suppose if you if this is a string
1:05
variable or a number at the time of
1:08
compilation it actually checks these
1:11
types and it converts this typescript
1:14
code into a lip folder let me just
1:16
delete this and again rerun the
1:18
command so we have two commands out
1:21
there in the package.json file First
1:23
Command lets
1:25
you watch for the changes and then
1:28
compiles the codes so we will run the
1:30
First Command npm run watch compile and
1:33
we also have the second command if you
1:36
want to directly build your typescript
1:38
code into JavaScript so npm run built
1:42
compile so as I execute this command you
1:44
will see it will execute the Babel
1:46
command and it will create a lib folder
1:49
in the root
1:50
directory and this will actually contain
1:53
the JavaScript code which is actually
1:55
converted from typescript if I open this
1:57
you will see that now this code is
2:00
converted to JavaScript it doesn't have
2:02
this type checking right here so or we
2:06
can actually create just type a watch
2:11
compile this what this is will do it
2:14
will
2:15
actually not complete but it will
2:18
basically watch for any kind of changes
2:20
that you make inside your typescript
2:22
file so let's suppose if I make any more
2:25
changes if I delete this so it will once
2:28
again execute this you will see that so
2:30
this is really useful so as you make
2:32
changes inside your typescript file it
2:34
will automatically compile it
2:41
so what we can do you can also see it
2:43
also generates a source map file as well
2:46
so what we can do we can simply make a
2:48
index. HTML file we can include this
2:52
file simply if you want to execute it in
2:54
the browser you can make a script
2:57
tag and just include this file file
3:00
which is uh present in the same
3:02
directory
3:03
index.js and you need to just add this
3:06
type parameter to module because it's a
3:08
es module because we are using import
3:10
export statements that's why you need to
3:13
put this type parameter to module if you
3:15
open this with live server you will
3:18
actually see all these console log
3:19
statements will be console log you will
3:22
see so we are using third party nodejs
3:25
module which is which is low Dash from a
3:27
CDN so right here from the CDN Sky pack
3:31
it offers you to convert all your nodejs
3:34
modules into es modules so we haven't
3:37
installed this module low Dash if you
3:39
see if I delete this from the package
3:42
rojson
3:45
file
3:47
npmi if I don't have this L Dash module
3:50
installed we can also directly use this
3:52
by using skypack which is a really
3:54
awesome website which offers CDN Links
3:58
of all nodejs modules if you visit their
4:01
website Sky
4:02
pack you can use any third party nodejs
4:05
module using a CDN link right here just
4:08
replace the module
4:10
name and still we can run this file if I
4:13
refresh now still it works you will see
4:16
that
4:18
so the configuration process is really
4:21
simple uh let me delete this and start
4:23
from
4:26
scratch let me delete this go to
4:28
package.json
4:31
and simply delete all these dependencies
4:34
and start from scratch so also delete
4:42
this so first of all what we need to do
4:45
we need to initialize the package.json
4:48
file and then we need to install these
4:50
modules first module we need to install
4:53
is Babble CLI which is a base Library
4:56
Babble core which is a
5:00
compiler and then Babel preset EnV this
5:04
is actually the plugin for compiling
5:06
typescript into JavaScript so at theate
5:09
Babel CLI which is a base compiler Babel
5:13
core also and then Babel preset
5:16
EnV and then we also need a package for
5:20
compiling typescript so using Babel so
5:23
it has a preset of
5:27
typescript atate B preset typ
5:30
script and then we need to install them
5:33
as Dev dependencies so
5:36
dashd so it is only required for
5:38
development it is not required for
5:40
production so once you install this it
5:43
will list out inside the dev dependency
5:45
section right in this section all these
5:48
dependencies will be installed
6:06
so now it is installed so first of now
6:11
we also need to
6:18
install another dependency which will
6:20
actually run all the scripts
6:23
concurrently so this script is called as
6:26
concurrently so also install this also
6:29
for
7:02
so now you can see all these
7:04
dependencies are installed in the dev
7:06
dependency section so after this what we
7:09
need to do we can actually write our
7:11
typescript code if you see right here we
7:13
are writing the typescript
7:19
code so if you don't know about
7:22
typescript it actually is a super set of
7:24
JavaScript and we use actually type
7:27
checking right here in this file you can
7:29
declare any variable let's suppose a
7:31
string variable we can't directly do
7:34
this inside typescript it will give you
7:36
this
7:37
error because we do need to actually put
7:40
a data type if it's a string variable
7:44
and now you can't put number here if you
7:46
put number then it will give you this
7:48
error that type number is not assignable
7:51
to type string so that's the advantage
7:53
of using typescript so at the time of
7:56
compilation you will get the error and
7:59
similarly we can basically declare a
8:02
number as well by putting number and now
8:04
you can't put string because it's a type
8:07
number so it's strictly type
8:11
checking so this is not valid in
8:14
JavaScript and uh similarly we can
8:17
console log some statement such as num
8:20
one plus
8:22
text this is our typescript code so if
8:25
you now need to compile this code into
8:28
the JavaScript code we will actually add
8:31
a script
8:34
inside the package Ro
8:36
Json so the script first of all we do
8:39
need to
8:42
initialize the two files which are
8:45
really
8:48
necessary so I will show you one by one
8:51
what the what this meant by this I will
8:54
delete all these
8:56
files so first file we do need to
8:59
initialize SI is Babel config JS
9:02
file do config JS so if you see the icon
9:07
will also change it's a Babel config
9:09
file and here we need to write some
9:13
things we need to initialize the presets
9:16
which will be a array and babble
9:20
actually contains various presets so one
9:22
such preset is for compiling the
9:24
typescript to JavaScript so this preset
9:27
that we installed Babble SL preset
9:30
typescript and you need to put comma and
9:33
the second preset we need to say is
9:39
uh
9:45
bble preset do
9:55
EnV so presets I
9:59
and here we need to add two properties
10:01
so what we are targeting so we are
10:03
basically Target all
10:05
the browsers which are less than
10:09
0.25 so we are actually targeting the
10:12
older
10:14
browsers like this so presets if you see
10:17
like this
10:30
okay sorry this is not a Javascript file
10:32
it's a Json file that was a problem what
10:36
which is coming so just rename this file
10:38
to Babel config.js so it's a Json file
10:41
not a Javascript file so here you add
10:43
this code you provide your preset which
10:46
is used for compiling the typescript to
10:48
JavaScript here we are targeting the
10:50
browsers which are
10:51
0.25 and modules we are setting this
10:54
property to false so by using ES modules
10:58
so we are not using common JS we are
11:00
using ES modules so after this the
11:03
second file you need to declare is TS
11:05
config for actually configuring the
11:08
typescript this file is really important
11:10
and here you need to set the compiler
11:12
options so what this typescript compiler
11:15
will do it will actually Target
11:18
es5 if you see it will Target es5 and
11:21
the module will be
11:25
commonjs and you have all these
11:27
properties Source map through
11:30
these are default options but the
11:32
options that I have listed here these
11:34
are the options that you need to
11:36
set rest of the options are not required
11:40
you will put strict to true so strict
11:43
type checking will be
11:45
there do directory here you can just
11:48
specify in which directory your
11:50
typescript code is located so my code is
11:52
located in the source directory so in
11:55
which directory your code is located you
11:57
will put right here and in which
11:59
directory you want the output code so
12:01
you can also modify this also let me CH
12:03
choose list folder so now if you run the
12:06
command all the code output code will be
12:09
located in the dis
12:10
directory like this so you can modify
12:13
all these options of the typescript
12:16
compiler in the TS config JS Json
12:22
file so you have seen this file used
12:25
inside react project angular project
12:27
whenever you make those project
12:29
this file will be
12:31
there yes module interop is also
12:41
true then we have the advanced options
12:45
skip Library check to True Force
12:47
consistent casing in file names to true
12:50
so these are some of the options just
12:52
make these options inside compiler
12:55
options after you do this now you can go
12:57
to package.json and inside the script
13:00
section you can add these two scripts so
13:03
first script will be for build
13:06
process if you want to directly compile
13:10
the typescript
13:12
code you can just add a build
13:16
script and here how we do this we say
13:19
npx Babel b a b l and then you provide
13:23
the source
13:24
directory and right here we provide the
13:27
extensions dots yes and
13:31
out directory we will say that uh we
13:35
need to provide a dis directory to
13:37
create and also we need the source Maps
13:40
as well this is actual command if you
13:44
see we initializing all the typescript
13:47
file we need to create a dis directory
13:49
output directory and we also need the
13:51
source Maps so if you now
13:55
refresh and try to run this command
14:06
just run npm run
14:11
build uh I think we do need to save this
14:24
file so now the command is
14:26
running and if you see
14:29
the dis directory is has been
14:33
created and successfully
14:36
compiled so Babel is very fast you will
14:39
see it has compiled everything which was
14:41
written inside uh this
14:46
uh if you also need to use the low Dash
14:51
you can
14:53
just say
15:01
again you can do this if you make any
15:03
sort of change again run npm run build
15:05
so again your com file will be compiled
15:08
now you can see the load Dash module is
15:10
also there so now if you want to
15:13
actually watch for the changes you can
15:15
add a second command which will be
15:18
watching all your changes that you done
15:20
and automatically compile this so this
15:22
will we will set it to
15:24
watch and
15:26
uh in this command what we need to
15:29
we will execute the same command but
15:32
this time this will watch for all the
15:34
changes that you
15:39
make so
16:00
uh let
16:02
me I think this is for
16:07
the yeah this
16:11
is this is actually the command npx
16:15
pabble Source extension and we basically
16:18
add this flag which is dash dash watch
16:21
at the very last this flag you can just
16:24
add this in the build command as well
16:27
dash-w
16:29
so Babble actually supports this and you
16:31
can just change this to watch instead of
16:37
build so there is a flag which is
16:40
supported right here by Babble if you
16:43
want to watch for the changes and then
16:45
automatically compil just add this flag
16:47
Das Das watch so what it will do now it
16:50
will if you run this command npm run
16:53
watch so it will now watch for all the
16:56
changes The Watcher is ready so if you
16:59
now make any sort of changes let's
17:01
suppose if I delete
17:04
this so now if you show it will compile
17:12
this so in this way whenever you make
17:17
changes and now you can actually make uh
17:20
index HTML
17:23
file right here we can include the file
17:30
can put type is equal to module and then
17:33
you can run this file directly in the
17:38
browser so if you see all these console
17:42
log statements are it is saying
17:49
that import low Dash chunks is not a
17:53
function
17:59
could just do this like
18:09
this I think it's chunk
18:33
so in this way guys you can do this uh
18:36
basically you can compile this and you
18:41
can run this file in the
18:44
browser by using Babble you can compile
18:47
your typescript code into JavaScript
18:49
code so thank you very much for watching
18:52
this video and uh
18:59
I will be seeing you guys in the next
19:01
one
#Development Tools
#Scripting Languages
