what’s up guys I’m back with another
episode this time we’re gonna take a
look at modules in es6 so I have wet
backbend calm open here and I first
thought that we would set up a local
environment with Babylon webpack but it
takes a little bit of time so I’m gonna
use webpack then instead so when it
first loads you’re gonna see that
there’s a dialogue that asks you what
type of environment do you want to set
up well make sure you select es2015 so
once you do that just give it some time
to load up
okay so what’s it’s done you’re gonna
see that we have index.html here and we
also have mange es now in this case
we’re really not interested in any HTML
so make sure you select show log instead
and then if you click on the square on
the right side it’s basically gonna go
full-size now prior to es6 you’ve
probably seen the common GS syntax so
common GS is very popular in
environments like no GS but it’s also
been available in browsers with
browserify now let’s say you want to
export something from a file the way you
would do that is you would use module
dot exports and then you would assign
that to an object and instead of that
object you might have you know functions
or variables now if you wanted to import
that module you would basically do
something like this so let’s save our
module equals sort wire and then
basically you put the name of your
module so it might be some kind of a
library that you installed from NPM or
it could be a local modular file so in
that case there’ll be a relative path
let’s say module 1 or something like
that
and of course if you use the S 6 you can
use Const now the one thing to keep in
mind about this approach is that it’s
actually synchronous so imagine you have
multiple imports of this sort so you
have multiple require statements well
every single statement is going to be
executed synchronously or in a blocking
fashion so it takes a little bit more
time than for example AMD which is
another approach to handling modules in
JavaScript so like I said AMD is
asynchronous and it’s actually been
specifically designed for browser
environment as opposed to common GS
which is mostly using no GS on the back
end but the problem with AMD is that
it’s quite verbose and it’s not easy to
write the last option now I’ll mention
is one that you might have seen is um
which is actually compatible with both
AMD and come-ons yes but again it’s also
extremely verbose to write and the very
last one that we’re actually going to
look at is es6 harmony now es6 basically
introduces the new import and export
syntax so the syntax has already
supported on modern browsers like Chrome
Safari Mozilla but the module loading
itself is not at least just not yet so
you would actually need an ESS compiler
and such as Babel when it comes to no
js’ the syntax is also supported in OGS
with a version 8 5 0 and you could
actually enable module loading if you
use the experimental modules flag but
the other thing is that if you use that
flag the files that contain the imports
and exports need to have an MJS
extension which a lot of people say
stands for michael jackson script now
anyways the import export syntax will be
available by default from version 10 0
LTS release and of course you could
always look it up no GS release table or
something like that they have a table on
github which you could find yeah right
there you can see that the version 10 is
still pending and it’s scheduled for
October 2018 but so let’s now look at
some actual examples and let’s begin
with named exports and imports I’m going
to create a new file here let’s call it
utils yes and in there let’s say we’re
gonna have a constant of buy it’s gonna
be 314 let’s say we’re also gonna have a
constant we’re gonna call it it sort so
it’s gonna be an arrow function and
we’re gonna accept a variable number of
arguments and then we’re basically going
to sort them so we’re gonna apply the
sort function now if you don’t pass any
comparison function and that’s actually
look at some of the syntax here so yes
you’re gonna find the function the
documentation here so if you don’t pass
like a person function it’s basically
going to sort the elements of the array
based on each characters Unicode code
point value which basically means that
it’s gonna apply an alphabetical sorting
order now that’s fine with characters
but in this case we’re going to assume
that we’re dealing with members so let’s
pass a function and it’s
except two arguments and it’s also going
to be an error function it’s basically
going to do a minus B so that’s
basically going to sort the elements in
ascending order
okay and so let’s say we got the PI
constant and then we got the sort
constant which is actually a function so
wanted to export them the way you would
do that is you just use the exported
keyword and you would pass by and you
would pass your sort function okay you
could save that now in main GS that’s
basically the entry point of the
application if you look at index GS it
basically imports the script and of
course the project is going to bundle
everything up with webpack and it’s also
going to transpile at ease in babel so
we don’t have to setup anything
ourselves it’s already pre-configured
out-of-the-box so back here let’s do
import and the way that you would import
the two conferences you could do by and
sort and you got to be careful with this
basically the names that you choose have
to match the names that basically you
you export inside of the utils module
and the space is here or optional I
include them just for readability but of
course you could omit them the back here
and then you need to use the relative
path of details and the J s extension is
optional so we can already do
console.log why let’s see what that
gives us that’s gonna give us 314 and
let’s also do console.log sort so I’m
gonna pass let’s say nine three seven
one zero minus two or something like
that let’s say that and it gives us the
following result if you actually click
on it you could see that all the
elements were sorted in ascending order
now of course you don’t have to use the
arrow functions you could also export a
normal function so let’s say we had sort
reverse function and it accepted a
variable number of arguments as well but
instead of returning that type of result
we would return something very similar
but we would do instead B minus a so
that’s going to sort the elements in
reverse order or in descending order and
you could also export that function as
well in the same way and you don’t have
to put them all on one line it’s sort of
shorter to do
you could also do you could also export
them separately so let’s say we could
just put a short reverse okay and we can
now import that from the module so let’s
do a sort reverse save that now we can
geo console.log let’s use the same set
of numbers and let’s just call sort
reverse let’s see what the result gives
us is what the first one looks like and
here’s what the second one looks like so
it’s gonna be all the elements in
descending order now back to mute ills
the other thing you would also do is you
could export a constant let’s say we
have a constant e equals 271 you could
export it in one single line like so and
if you wanted to import it
let’s also import it and let’s also
console.log that so let’s see what the
value is the value is two points every
one so that’s how you import it now the
same goes for functions so you don’t
necessarily have to export them you know
somewhere at the end of the file
you could also export them inline so we
could do export functions sort reversed
okay we could also export the PI
constant and of course you could also
export the sort function right there and
we don’t need anything else here so
we’ll get do that and this so works as
you can see we still get the values I
was supposed to say we had another
function here let’s say cons we’re gonna
call it clone and it’s basically going
to clone an object the way we would do
that is basically using following syntax
so I’m gonna use the spread operator
it’s basically going to extend all the
object properties into this new object
and it’s going to return that object and
of course this is going to be a shallow
clone function so what I’m gonna do is
I’m gonna put export let’s do clone as
clone shallow so when you do that using
the as keyword it’s basically going to
create an alias for clone so the
variable is gonna stay as clone inside
of this scope but when you export it you
would need to use the clone shallow name
in order to import that function from
the module okay so back in main yes
let’s remove all that other stuff
let’s just put
import clone shallow from let’s do it
tools and that G s is optional you could
put it but it’s actually not necessary
and let’s do console.log clone shallow
let’s maybe a pass some kind of an
object here named Alex let’s see what
that gives us if you actually minimize
the log you’re gonna see that we get an
error here
it basically complains about the spread
operator syntax now the one thing you
could do is you could go to
configuration to the settings just click
on the gear icon make sure you select
stage 0 features now of course the
spread operator is actually not a stage
0 feature but if you enable that the
syntax is going to be available so once
you save that and let’s maximize the log
output you’re gonna see the object right
there in fact what we can do is let’s
say we have constant that’s gonna be
your object here and let’s do a
comparison here object equals and let’s
put the object in the clone shell
function and of course that’s gonna be
false it’s basically going to return a
brand-new object from this function so
basically this is how you can use an
alias for your named exports now of
course back in here let’s say you wanted
to import clone shallow but let’s say
you also wanted to use a custom name for
that you don’t necessarily have to use
the same name that you named export
provides back in the module itself you
could use a custom name so let’s say we
wanted to export that function but we
wanted to call it as clone instead of
clone shallow which is kind of silly in
this example but still it’s permissible
so let’s say we wanted to call it clone
and I’m gonna replace clone shallow with
clone it’s still going to work as you
can see and of course the same thing
goes for you know pretty much is any
constant any function and you could
basically apply the same syntax for you
know just about anything that you export
now the last thing I’m going to show you
with named exports is you could also
import the whole thing like the whole
module using this star keyword so that’s
basically going to import everything
that’s being exported from the file so
let’s do import star or asterisk
from let’s do it cells and let’s do
console.log and of course if you use
that syntax you would also need to use
the as keyword and then let’s call it
utils so utils is basically going to
contain all the exports from here right
so let’s to console.log it sells that pi
that’s gonna give us the value of pi if
you do console.log of utils e of course
that’s gonna be the value of e and you
can use a sort function you could use
the sort reverse and you can also use
the clone shallow function like that
right let’s I’m not clear that’s up for
now so let’s go back to your tails it
let’s next look at default imports and
exports let’s say we have a class of car
here and we had a constructor here let’s
say the constructor is going to accept
the number of wheels and let me do this
wheels equals wheels we could also have
a getter lets it get wheels it’s gonna
be a function and it’s going to return
the start wheels now we could do export
default car like so so that’s gonna be a
default export and back in here with the
to import car from utils of course this
make sense to call utils let’s just keep
it that way for now and let’s save it
let’s do console log new or let’s do
four four wheels that’s gonna return an
object with wheels set to four as you
would expect now the one thing to keep
in mind about default exports is that
you don’t necessarily have to keep the
same name so you have a class that’s
called car in this case but you don’t
have to keep the same name for the
import you can call it a fake truck
right maybe for the truck you have six
wheels right and of course you would
need to replace car with truck but that
still is going to work because when it
comes to default exports you can use
pretty much just any name when importing
the default value from the module now
there’s also another syntax you could
use you could move the export default to
the top and you could use this and the
same
one with a clasp and this is still going
to work make you save it you’re gonna
get the same object as before now when
it comes to constants you have to be a
little bit careful let’s say we had a
constant of let’s say person equals a
new object named Alex and let’s say you
wanted to it sports default person and
back in Maine yes let’s do import person
for me tools and let’s to console.log
person that’s gonna be the object as you
can see and of course this doesn’t have
to be a person is to be fool you
console.log fool and that’s gonna be the
same object the you export okay so the
one thing to keep in mind with constants
like I said is you can’t have export
default constant so you could export the
constant by itself and that’s gonna be
valid syntax right you can say that and
then in here you could do an import
person from utils and then you could
console off person it could be foo if
you use the Elias like I showed you
before right if you use as foo that’s
gonna use a custom name for the import
or you could keep it as person and in
case you have to use the same name in
the console log right so that’s going to
work but like I said you can’t have this
as a default export so this is just not
going to work it’s not going to be
recognized as you can see so if you
wanted to use a default export of a
constant you would have to use it on two
separate lines like so let’s support the
full person and then you could import
person without the curly braces because
this is a default important right now
for functions let’s say we had export
default some kind of a function here
what functions you don’t need to provide
any you know any name for that function
so we could export an object the name of
Alex as before so this is going to be a
function and let’s call it gab person
versus you can see we basically just
have an anonymous function here and like
before you could use pretty much just
any name for it and if you call that you
of course is gonna get the object as you
expect now let’s see back in details we
had several exports here so of course we
could combine them on a single
but here basically I have three exports
we have apply we have a short function
and we also have sort reversed function
like before one thing we could do is we
could also do at sport default with
export an object the basically contains
all of those constants inside of it so
we could do PI sort and sort reversed
and this syntax like I talked before
this is basically a shorthand for
objects so this is the same thing as
saying by : PI right in the same thing
goes for sort if you don’t specify those
it’s still going to work because of the
shorthand syntax typically you don’t
need to put them just for clarity
because the names are pretty much the
same so you could just separate them by
commas like so and this is going to be
the default export so the one thing we
could do here let’s do import utils this
is going to be the default important
right and let’s also import sort from in
there right let’s do from utils like so
let’s do console.log util start by let’s
also do console.log let’s do sort in
that pass let’s say again 8 – 3 – 10
we’ve got the results right there so
we’ve got the value of BI and we also
got a new array with the elements sorted
in ascending order now we could also do
it a little bit differently so instead
of doing the export default of an object
we could also do let’s say constant
utils and that’s basically going to be
the object containing all of those
properties so let’s do PI that’s the
sort sort reversed the other thing we
could do is we could do export let’s do
utils as default and then we could also
export all of the other things so
instead of let’s say exporting them on a
single line you could also exploit them
at the very end of the file so let’s do
export PI sort and sort reversed and
this is still going to work we get the
exact same results now in this case you
would support the yuto’s constant as the
default export
in this case you could still use a
custom name here it doesn’t have to be
your tools could be pretty much just any
name and for the other ones they’re
still going to be named exports so you
have to use the same name so if you were
to it’s so if you were to import by for
example you would need to use the same
name as he used in utils Chia’s so if I
like here right and the last thing I’ll
mention is let’s say Nia tilts yes we
had some kind of a processing here let’s
so let’s say constant pi equals 314
let’s say with it console.log by if you
simply wanted to import the code from
this file from utils Jia’s but you
didn’t actually want to assign it to
anything you could still use the import
keyword and then put utils like so so
this is basically going to execute all
the code in utils GS but it’s not going
to bind anything to any variable instead
of man GS it’ll just basically run all
the coding util she has and just one
small thing I’ll mention if you look at
export GS let’s go to the documentation
here the syntax right here could be
useful if you’re building a package and
NPM package and let’s say your package
contains multiple other third-party
libraries and you wanted to export
everything from a certain library this
is basically how you would do that you
would use the Asterix effects
export everything from any library or
any module and typically that would just
be a separate file this so this would
basically import the contents of that
file and export them from the corn file
of course you could export you know
several things like functions constant
classes anything else pretty much and
this will be imported from a different
module or library the same thing those
for aliases and you can also assign
aliases to those imports like so this is
not very common but you might run into
it and so I just wanted to mention that
so this is pretty much it for modules
thanks a lot for watching a I’ll see you in the next video
episode this time we’re gonna take a
look at modules in es6 so I have wet
backbend calm open here and I first
thought that we would set up a local
environment with Babylon webpack but it
takes a little bit of time so I’m gonna
use webpack then instead so when it
first loads you’re gonna see that
there’s a dialogue that asks you what
type of environment do you want to set
up well make sure you select es2015 so
once you do that just give it some time
to load up
okay so what’s it’s done you’re gonna
see that we have index.html here and we
also have mange es now in this case
we’re really not interested in any HTML
so make sure you select show log instead
and then if you click on the square on
the right side it’s basically gonna go
full-size now prior to es6 you’ve
probably seen the common GS syntax so
common GS is very popular in
environments like no GS but it’s also
been available in browsers with
browserify now let’s say you want to
export something from a file the way you
would do that is you would use module
dot exports and then you would assign
that to an object and instead of that
object you might have you know functions
or variables now if you wanted to import
that module you would basically do
something like this so let’s save our
module equals sort wire and then
basically you put the name of your
module so it might be some kind of a
library that you installed from NPM or
it could be a local modular file so in
that case there’ll be a relative path
let’s say module 1 or something like
that
and of course if you use the S 6 you can
use Const now the one thing to keep in
mind about this approach is that it’s
actually synchronous so imagine you have
multiple imports of this sort so you
have multiple require statements well
every single statement is going to be
executed synchronously or in a blocking
fashion so it takes a little bit more
time than for example AMD which is
another approach to handling modules in
JavaScript so like I said AMD is
asynchronous and it’s actually been
specifically designed for browser
environment as opposed to common GS
which is mostly using no GS on the back
end but the problem with AMD is that
it’s quite verbose and it’s not easy to
write the last option now I’ll mention
is one that you might have seen is um
which is actually compatible with both
AMD and come-ons yes but again it’s also
extremely verbose to write and the very
last one that we’re actually going to
look at is es6 harmony now es6 basically
introduces the new import and export
syntax so the syntax has already
supported on modern browsers like Chrome
Safari Mozilla but the module loading
itself is not at least just not yet so
you would actually need an ESS compiler
and such as Babel when it comes to no
js’ the syntax is also supported in OGS
with a version 8 5 0 and you could
actually enable module loading if you
use the experimental modules flag but
the other thing is that if you use that
flag the files that contain the imports
and exports need to have an MJS
extension which a lot of people say
stands for michael jackson script now
anyways the import export syntax will be
available by default from version 10 0
LTS release and of course you could
always look it up no GS release table or
something like that they have a table on
github which you could find yeah right
there you can see that the version 10 is
still pending and it’s scheduled for
October 2018 but so let’s now look at
some actual examples and let’s begin
with named exports and imports I’m going
to create a new file here let’s call it
utils yes and in there let’s say we’re
gonna have a constant of buy it’s gonna
be 314 let’s say we’re also gonna have a
constant we’re gonna call it it sort so
it’s gonna be an arrow function and
we’re gonna accept a variable number of
arguments and then we’re basically going
to sort them so we’re gonna apply the
sort function now if you don’t pass any
comparison function and that’s actually
look at some of the syntax here so yes
you’re gonna find the function the
documentation here so if you don’t pass
like a person function it’s basically
going to sort the elements of the array
based on each characters Unicode code
point value which basically means that
it’s gonna apply an alphabetical sorting
order now that’s fine with characters
but in this case we’re going to assume
that we’re dealing with members so let’s
pass a function and it’s
except two arguments and it’s also going
to be an error function it’s basically
going to do a minus B so that’s
basically going to sort the elements in
ascending order
okay and so let’s say we got the PI
constant and then we got the sort
constant which is actually a function so
wanted to export them the way you would
do that is you just use the exported
keyword and you would pass by and you
would pass your sort function okay you
could save that now in main GS that’s
basically the entry point of the
application if you look at index GS it
basically imports the script and of
course the project is going to bundle
everything up with webpack and it’s also
going to transpile at ease in babel so
we don’t have to setup anything
ourselves it’s already pre-configured
out-of-the-box so back here let’s do
import and the way that you would import
the two conferences you could do by and
sort and you got to be careful with this
basically the names that you choose have
to match the names that basically you
you export inside of the utils module
and the space is here or optional I
include them just for readability but of
course you could omit them the back here
and then you need to use the relative
path of details and the J s extension is
optional so we can already do
console.log why let’s see what that
gives us that’s gonna give us 314 and
let’s also do console.log sort so I’m
gonna pass let’s say nine three seven
one zero minus two or something like
that let’s say that and it gives us the
following result if you actually click
on it you could see that all the
elements were sorted in ascending order
now of course you don’t have to use the
arrow functions you could also export a
normal function so let’s say we had sort
reverse function and it accepted a
variable number of arguments as well but
instead of returning that type of result
we would return something very similar
but we would do instead B minus a so
that’s going to sort the elements in
reverse order or in descending order and
you could also export that function as
well in the same way and you don’t have
to put them all on one line it’s sort of
shorter to do
you could also do you could also export
them separately so let’s say we could
just put a short reverse okay and we can
now import that from the module so let’s
do a sort reverse save that now we can
geo console.log let’s use the same set
of numbers and let’s just call sort
reverse let’s see what the result gives
us is what the first one looks like and
here’s what the second one looks like so
it’s gonna be all the elements in
descending order now back to mute ills
the other thing you would also do is you
could export a constant let’s say we
have a constant e equals 271 you could
export it in one single line like so and
if you wanted to import it
let’s also import it and let’s also
console.log that so let’s see what the
value is the value is two points every
one so that’s how you import it now the
same goes for functions so you don’t
necessarily have to export them you know
somewhere at the end of the file
you could also export them inline so we
could do export functions sort reversed
okay we could also export the PI
constant and of course you could also
export the sort function right there and
we don’t need anything else here so
we’ll get do that and this so works as
you can see we still get the values I
was supposed to say we had another
function here let’s say cons we’re gonna
call it clone and it’s basically going
to clone an object the way we would do
that is basically using following syntax
so I’m gonna use the spread operator
it’s basically going to extend all the
object properties into this new object
and it’s going to return that object and
of course this is going to be a shallow
clone function so what I’m gonna do is
I’m gonna put export let’s do clone as
clone shallow so when you do that using
the as keyword it’s basically going to
create an alias for clone so the
variable is gonna stay as clone inside
of this scope but when you export it you
would need to use the clone shallow name
in order to import that function from
the module okay so back in main yes
let’s remove all that other stuff
let’s just put
import clone shallow from let’s do it
tools and that G s is optional you could
put it but it’s actually not necessary
and let’s do console.log clone shallow
let’s maybe a pass some kind of an
object here named Alex let’s see what
that gives us if you actually minimize
the log you’re gonna see that we get an
error here
it basically complains about the spread
operator syntax now the one thing you
could do is you could go to
configuration to the settings just click
on the gear icon make sure you select
stage 0 features now of course the
spread operator is actually not a stage
0 feature but if you enable that the
syntax is going to be available so once
you save that and let’s maximize the log
output you’re gonna see the object right
there in fact what we can do is let’s
say we have constant that’s gonna be
your object here and let’s do a
comparison here object equals and let’s
put the object in the clone shell
function and of course that’s gonna be
false it’s basically going to return a
brand-new object from this function so
basically this is how you can use an
alias for your named exports now of
course back in here let’s say you wanted
to import clone shallow but let’s say
you also wanted to use a custom name for
that you don’t necessarily have to use
the same name that you named export
provides back in the module itself you
could use a custom name so let’s say we
wanted to export that function but we
wanted to call it as clone instead of
clone shallow which is kind of silly in
this example but still it’s permissible
so let’s say we wanted to call it clone
and I’m gonna replace clone shallow with
clone it’s still going to work as you
can see and of course the same thing
goes for you know pretty much is any
constant any function and you could
basically apply the same syntax for you
know just about anything that you export
now the last thing I’m going to show you
with named exports is you could also
import the whole thing like the whole
module using this star keyword so that’s
basically going to import everything
that’s being exported from the file so
let’s do import star or asterisk
from let’s do it cells and let’s do
console.log and of course if you use
that syntax you would also need to use
the as keyword and then let’s call it
utils so utils is basically going to
contain all the exports from here right
so let’s to console.log it sells that pi
that’s gonna give us the value of pi if
you do console.log of utils e of course
that’s gonna be the value of e and you
can use a sort function you could use
the sort reverse and you can also use
the clone shallow function like that
right let’s I’m not clear that’s up for
now so let’s go back to your tails it
let’s next look at default imports and
exports let’s say we have a class of car
here and we had a constructor here let’s
say the constructor is going to accept
the number of wheels and let me do this
wheels equals wheels we could also have
a getter lets it get wheels it’s gonna
be a function and it’s going to return
the start wheels now we could do export
default car like so so that’s gonna be a
default export and back in here with the
to import car from utils of course this
make sense to call utils let’s just keep
it that way for now and let’s save it
let’s do console log new or let’s do
four four wheels that’s gonna return an
object with wheels set to four as you
would expect now the one thing to keep
in mind about default exports is that
you don’t necessarily have to keep the
same name so you have a class that’s
called car in this case but you don’t
have to keep the same name for the
import you can call it a fake truck
right maybe for the truck you have six
wheels right and of course you would
need to replace car with truck but that
still is going to work because when it
comes to default exports you can use
pretty much just any name when importing
the default value from the module now
there’s also another syntax you could
use you could move the export default to
the top and you could use this and the
same
one with a clasp and this is still going
to work make you save it you’re gonna
get the same object as before now when
it comes to constants you have to be a
little bit careful let’s say we had a
constant of let’s say person equals a
new object named Alex and let’s say you
wanted to it sports default person and
back in Maine yes let’s do import person
for me tools and let’s to console.log
person that’s gonna be the object as you
can see and of course this doesn’t have
to be a person is to be fool you
console.log fool and that’s gonna be the
same object the you export okay so the
one thing to keep in mind with constants
like I said is you can’t have export
default constant so you could export the
constant by itself and that’s gonna be
valid syntax right you can say that and
then in here you could do an import
person from utils and then you could
console off person it could be foo if
you use the Elias like I showed you
before right if you use as foo that’s
gonna use a custom name for the import
or you could keep it as person and in
case you have to use the same name in
the console log right so that’s going to
work but like I said you can’t have this
as a default export so this is just not
going to work it’s not going to be
recognized as you can see so if you
wanted to use a default export of a
constant you would have to use it on two
separate lines like so let’s support the
full person and then you could import
person without the curly braces because
this is a default important right now
for functions let’s say we had export
default some kind of a function here
what functions you don’t need to provide
any you know any name for that function
so we could export an object the name of
Alex as before so this is going to be a
function and let’s call it gab person
versus you can see we basically just
have an anonymous function here and like
before you could use pretty much just
any name for it and if you call that you
of course is gonna get the object as you
expect now let’s see back in details we
had several exports here so of course we
could combine them on a single
but here basically I have three exports
we have apply we have a short function
and we also have sort reversed function
like before one thing we could do is we
could also do at sport default with
export an object the basically contains
all of those constants inside of it so
we could do PI sort and sort reversed
and this syntax like I talked before
this is basically a shorthand for
objects so this is the same thing as
saying by : PI right in the same thing
goes for sort if you don’t specify those
it’s still going to work because of the
shorthand syntax typically you don’t
need to put them just for clarity
because the names are pretty much the
same so you could just separate them by
commas like so and this is going to be
the default export so the one thing we
could do here let’s do import utils this
is going to be the default important
right and let’s also import sort from in
there right let’s do from utils like so
let’s do console.log util start by let’s
also do console.log let’s do sort in
that pass let’s say again 8 – 3 – 10
we’ve got the results right there so
we’ve got the value of BI and we also
got a new array with the elements sorted
in ascending order now we could also do
it a little bit differently so instead
of doing the export default of an object
we could also do let’s say constant
utils and that’s basically going to be
the object containing all of those
properties so let’s do PI that’s the
sort sort reversed the other thing we
could do is we could do export let’s do
utils as default and then we could also
export all of the other things so
instead of let’s say exporting them on a
single line you could also exploit them
at the very end of the file so let’s do
export PI sort and sort reversed and
this is still going to work we get the
exact same results now in this case you
would support the yuto’s constant as the
default export
in this case you could still use a
custom name here it doesn’t have to be
your tools could be pretty much just any
name and for the other ones they’re
still going to be named exports so you
have to use the same name so if you were
to it’s so if you were to import by for
example you would need to use the same
name as he used in utils Chia’s so if I
like here right and the last thing I’ll
mention is let’s say Nia tilts yes we
had some kind of a processing here let’s
so let’s say constant pi equals 314
let’s say with it console.log by if you
simply wanted to import the code from
this file from utils Jia’s but you
didn’t actually want to assign it to
anything you could still use the import
keyword and then put utils like so so
this is basically going to execute all
the code in utils GS but it’s not going
to bind anything to any variable instead
of man GS it’ll just basically run all
the coding util she has and just one
small thing I’ll mention if you look at
export GS let’s go to the documentation
here the syntax right here could be
useful if you’re building a package and
NPM package and let’s say your package
contains multiple other third-party
libraries and you wanted to export
everything from a certain library this
is basically how you would do that you
would use the Asterix effects
export everything from any library or
any module and typically that would just
be a separate file this so this would
basically import the contents of that
file and export them from the corn file
of course you could export you know
several things like functions constant
classes anything else pretty much and
this will be imported from a different
module or library the same thing those
for aliases and you can also assign
aliases to those imports like so this is
not very common but you might run into
it and so I just wanted to mention that
so this is pretty much it for modules
thanks a lot for watching a I’ll see you in the next video
Please follow and like us: