live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
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