right so we just went through the lid
stage and the next stage it technically
is test so this is where we actually get
to test our code but is there any code
that we can actually test in the repo
right now if you look at the source
directory we just have a single and XJS
file with the console.log statements so
there’s not much goto to test it
necessarily so what I propose is that we
actually skip the test stage and go
directly to the ability stage instead so
first things first we’re gonna need a
bundler so one thing we could do is we
could use the web pack but learn for
example which is a very popular choice
for applications but in this case I’m
actually going to go with a different
bundler the reason I’m not going to
favor wetback in this scenario is
because what pack actually adds it quite
a bit of setup boilerplate code it to
your bundle so this is something that we
want to avoid because we don’t want to
ship unnecessary code in our bundle so
there’s a different Butler that library
authors actually prefer and this one is
called roll-up
so the premise is pretty much the same
but the difference is that roll-up will
simply concatenate the files you could
also do transformations on those files
using plugins so for example with the
babel plugin we can transform our code
from es6 to es5 with a post CSS plugin
we can transform our post CSS syntax
down into plane and CSS and of course
there’s a bunch of other plugins as well
so it’s more of a plug-in place syntax
so you find a plugin that you want to
use for a particular purpose
you put that plug it in to your
configuration file and then that plug-in
is going to be applied at to transform
your code but without any plugins roll
up will simply concatenate all of your
assets so it’s not going to end any
boilerplate code like webpack does and
this is why I would prefer to use
roll-up in this case and in fact it’s
very common among libraries to use
roll-up to bundle the assets instead of
wetback wetback is something you would
use at the application layer most of the
time so now I’m gonna go back to the
terminal let me clear it out so what I’m
gonna do is I’ll do an install of a
roll-up let’s just add that dependency
for now now if we go to roll-up j/s org
there’s gonna be quite a few other
things we have to install so for one
thing we need to install node resolve
package there’s a plugin called roll-up
plugin no resolve this one will allow us
to resolve any NPM dependencies so this
one is a must let’s actually install
that one as well so now once we do that
the syntax is pretty simple to compile a
file we can call
on a given file so let’s say me in de
geus we specify the output file so for
example bundle yes we also specify the
format and this could be something like
if a common GS UMD aureus modules and we
get the output by running that command
let’s actually go ahead and try it so
we’ll go back to the terminal
I’ll clear it out again so let’s do NP x
roll up and we’re gonna do it on the
source index dot JSP the output will be
let’s say test bundle – a yes and the
format
let’s try commonjs syntax so this
created the bundle so now if we do cat
on dist bundle – yes you’re gonna see
that we get a file that has a use strict
pragma as well as the console.log
statement no it doesn’t have anything
else but of course we could also go back
and for example we could create a
constants let’s do some function so this
will be just an empty function that
doesn’t do anything we’re gonna do an
export default of that function so if I
go back to the terminal so let’s run
that command again let’s see the
contents of the file and we get a arrow
function but in this case as you can see
it transforms it down into common GS
index and this way something like this
could actually be used as an NPM module
because using the source code format
unless you use the bundler yourself
nodejs will not be able to understand
that syntax and now besides common GS we
could also use a bunch of other formats
so for example we could use the efi
format which stands for immediately
invoked function expression in this case
we actually get an error because we need
to specify the name for the output but
if i go back in here and if i change it
back to the console log statement if we
try to no we get the bundle so we can
actually go ahead and output it as you
can see it’s simply a function that
invokes itself in this case once again
it has the use strict pragma and it’s
gonna output console.log
and besides that we also have other
formats like UMD and ESM or ES for es
modules so what we’re gonna do in this
case is we’re going to add a config file
so let’s do touch roll up dot config yes
and once again don’t really be scared
about these syntax this is very very
similar to web pack it’s basically the
same concept
just a different syntax or a different
way to accomplish the same result so as
it turns out in this file we can
actually use es modules syntax so we
could do export defaults or pass in an
object and this will be the
configuration object and now let’s see
if we can see some of the options in the
documentation I’m just gonna look for
outputs so one thing we can do is we can
specify the input file and let’s do
exactly that so the input will be source
index adachi is the output in this case
will be let’s do if file we’ll put in
dist slash bundle a yes we also have to
specify the format so they format will
be let’s say common j s and if we are
building an NPM module this is the
preferred format that we want to ship
and besides that we could also put in
things like external if we have any
dependencies in our code we could also
specify some Global’s if we have any and
there’s also a section for plugins so
plugins is another thing that we can
specify if we go back in here I’m gonna
save the file as you can see everything
gets Auto formatted for us which is very
nice so now to build our bundle all we
have to do is we need to call npx
roll-up and pass in the config options
so we’re gonna pass in – C and this will
use the Yuval up convict GS file and as
you can see a built e bundle so now if
we do cat on the dist bundle GS and
you’re gonna see that we get the same
output as before so in this case it’s
using common share syntax
now for a library like this we want to
not only ship the common GS and that’s
which is useful for APM but we might
also want to ship es module syntax which
is going to be useful for bundlers in
order to enable Chi shaking so we want
to make sure that the end user is able
to only import the files or components
that they actually need and not the
entire project and unfortunately using
the common GS syntax it’s pretty much
impossible
there is tools that try to do that but
because of the dynamic nature of common
GS modules tree shaking is very
difficult if not impossible
now tree shaking luckily for us is
actually very easy using es modules and
now besides that for environments like
browsers we might also want to ship the
UMD bundle so UMD is very similar to the
if a format the benefit of the UMD
format is that it actually supports
multiple module specifications like for
example AMD using something
requirejs or ei also has support for
commonjs
and it can also be invoked in a global
environment like a browsers for example
on the window object so now this one is
a very versatile syntax and it’s most
often used in browsers that don’t have
any built workflow so for example if
you’re not using something like web pack
you might pull in the bundled GS file
yourself so you could put an e bundle
the GS file manually or you could even
reference it from a CD and yourself
using the UMD format this will actually
work in a browser from the get-go so it
sounds like we want to export multiple
outputs and in fact in roll-up we have
an option to do that and so now if I
look for output and instead of an object
or in a pass on an array C as you can
see here we can pass in multiple
configurations to create several bundles
so now in the end what I like to do is
I’d like to create several output files
so instead of the dist directory we’re
gonna create several bundles there’s
gonna be bundle dot j s for the comma j
s syntax so we might as well put in c j
s to denote that this bundle is indeed
for comma j s we might also have another
one
this’ll be bundle dot es m da Jia’s the
ESM syntax denotes that this file is
intended for bundler stack web pack and
will up so this one will actually be
used in a build workflow so for example
if you have a create react app
application or if you have a custom
build setup with web pack this bundle
esmd as well is the one that’s going to
be used because we want to enable tree
shaking in the project and if this
sounds confusing to you I’m going to
also include some of the resources under
this video so you could read up more
about the intricacies of these different
module systems yourself and the last one
like I said I didn’t want to also enable
support for UMD so this will be bundled
at UMD GS so in the end I want to ship
three different bundles like that so now
with roll-up it’s actually fairly simple
we’re gonna pass in an array instead of
an object so we’re gonna have several
objects instead of that array each for a
different purpose
so one of them is going to be the dist
bundle dot command GS GS file format of
course is going to be comma GS as well
no the next one is going to be the same
file except we’re gonna put in bundle
dot es mas to denote that this file is
indeed for es modules the format in this
case is going to be es m
you could also put an es as a shorthand
for es modules and of course the last
one will be file dest module dot UMD and
this one will be for the format of UMD
now in this case we could also specify a
name for that bundle so we can pass on a
name option and in fact in a
documentation if you look for name name
is something you would often specify for
a UMD export this one allows you to
define a name for that bundle like I
said so for instance if you were to put
that file in a script tag in a browser
and let’s say if we give it a name of
for example react CSS spinners if you
were to use that name in a browser you
would do something like window dot react
CSS spinners and then from there you get
to let’s say a ring or a circle or
something like that so this is why
putting a name is very useful this way
we can identify the global for our
project that will allow us to access all
of these spinners now you could see some
of the configuration is being duplicated
so what I’m gonna do is I’m actually
going to create a Constance so let’s put
in dist I’ll just set it to a dist
string and this one I’m going to change
to a template string so we’re gonna wrap
this in a variable so this we’re gonna
be passing the name as a variable so now
let’s go ahead and try to build it so
back in the terminal in fact instead of
doing it from the terminal all the time
I’m gonna go back to the editor so what
I’m gonna do is I’m gonna add a script
called build and we’re gonna call roll
up with E – C option this way it’s gonna
look for the configuration file so now
if we save it let’s go back to the
terminal let’s do a p.m. run build and
as you can see it created three
different bundles so if we do LS on the
dist directory we’ll have four different
files in this case you’ll notice the
bono J’s file from the previous build
and this one we built ourselves just a
few minutes ago so for someone like this
you want to make sure that the old files
don’t end up in a bundle to be safe you
would want to make sure to first of all
delete the dist directory if it exists
already
and then recreated using roll-up so
before we even bundle our code you want
to make sure that we remove any of the
leftovers from the last time so for
something like this it’s very common to
use the remm rev package so if I look
for rim rev this one is basically a very
simple package that allows you to delete
a directory if it exists so now if I go
to the terminal I’m going to
p.m. install a dev dependency of rim
wrath so now once that’s done we can add
a script so we could either add let’s
say clean and we can call rim rev on the
dist directory and now we could either
chain them so for example something like
NPM run clean and then run the roll-up –
C command but it’s a lot simpler to just
simply have a pre script so using NPM we
can actually set up pre and post scripts
so for something like build we could set
up a pre build script this one will run
before the build command so every time
you do a PM run build it’s going to
first execute the pre build script if
it’s available in package.json in this
case we could do npm run and clean
ourselves or because we’re gonna be
using the clean command only in the
build process it also makes sense to
just simply put it in pre build like
that because I don’t think we’re gonna
be using that clean commit ourselves
so now let’s save it so if I do a medium
run build it’s gonna first remove the
dist directory and then after that it’s
going to generate the bundles so now if
you do LS on the destructor II we get these three different bundles
stage and the next stage it technically
is test so this is where we actually get
to test our code but is there any code
that we can actually test in the repo
right now if you look at the source
directory we just have a single and XJS
file with the console.log statements so
there’s not much goto to test it
necessarily so what I propose is that we
actually skip the test stage and go
directly to the ability stage instead so
first things first we’re gonna need a
bundler so one thing we could do is we
could use the web pack but learn for
example which is a very popular choice
for applications but in this case I’m
actually going to go with a different
bundler the reason I’m not going to
favor wetback in this scenario is
because what pack actually adds it quite
a bit of setup boilerplate code it to
your bundle so this is something that we
want to avoid because we don’t want to
ship unnecessary code in our bundle so
there’s a different Butler that library
authors actually prefer and this one is
called roll-up
so the premise is pretty much the same
but the difference is that roll-up will
simply concatenate the files you could
also do transformations on those files
using plugins so for example with the
babel plugin we can transform our code
from es6 to es5 with a post CSS plugin
we can transform our post CSS syntax
down into plane and CSS and of course
there’s a bunch of other plugins as well
so it’s more of a plug-in place syntax
so you find a plugin that you want to
use for a particular purpose
you put that plug it in to your
configuration file and then that plug-in
is going to be applied at to transform
your code but without any plugins roll
up will simply concatenate all of your
assets so it’s not going to end any
boilerplate code like webpack does and
this is why I would prefer to use
roll-up in this case and in fact it’s
very common among libraries to use
roll-up to bundle the assets instead of
wetback wetback is something you would
use at the application layer most of the
time so now I’m gonna go back to the
terminal let me clear it out so what I’m
gonna do is I’ll do an install of a
roll-up let’s just add that dependency
for now now if we go to roll-up j/s org
there’s gonna be quite a few other
things we have to install so for one
thing we need to install node resolve
package there’s a plugin called roll-up
plugin no resolve this one will allow us
to resolve any NPM dependencies so this
one is a must let’s actually install
that one as well so now once we do that
the syntax is pretty simple to compile a
file we can call
on a given file so let’s say me in de
geus we specify the output file so for
example bundle yes we also specify the
format and this could be something like
if a common GS UMD aureus modules and we
get the output by running that command
let’s actually go ahead and try it so
we’ll go back to the terminal
I’ll clear it out again so let’s do NP x
roll up and we’re gonna do it on the
source index dot JSP the output will be
let’s say test bundle – a yes and the
format
let’s try commonjs syntax so this
created the bundle so now if we do cat
on dist bundle – yes you’re gonna see
that we get a file that has a use strict
pragma as well as the console.log
statement no it doesn’t have anything
else but of course we could also go back
and for example we could create a
constants let’s do some function so this
will be just an empty function that
doesn’t do anything we’re gonna do an
export default of that function so if I
go back to the terminal so let’s run
that command again let’s see the
contents of the file and we get a arrow
function but in this case as you can see
it transforms it down into common GS
index and this way something like this
could actually be used as an NPM module
because using the source code format
unless you use the bundler yourself
nodejs will not be able to understand
that syntax and now besides common GS we
could also use a bunch of other formats
so for example we could use the efi
format which stands for immediately
invoked function expression in this case
we actually get an error because we need
to specify the name for the output but
if i go back in here and if i change it
back to the console log statement if we
try to no we get the bundle so we can
actually go ahead and output it as you
can see it’s simply a function that
invokes itself in this case once again
it has the use strict pragma and it’s
gonna output console.log
and besides that we also have other
formats like UMD and ESM or ES for es
modules so what we’re gonna do in this
case is we’re going to add a config file
so let’s do touch roll up dot config yes
and once again don’t really be scared
about these syntax this is very very
similar to web pack it’s basically the
same concept
just a different syntax or a different
way to accomplish the same result so as
it turns out in this file we can
actually use es modules syntax so we
could do export defaults or pass in an
object and this will be the
configuration object and now let’s see
if we can see some of the options in the
documentation I’m just gonna look for
outputs so one thing we can do is we can
specify the input file and let’s do
exactly that so the input will be source
index adachi is the output in this case
will be let’s do if file we’ll put in
dist slash bundle a yes we also have to
specify the format so they format will
be let’s say common j s and if we are
building an NPM module this is the
preferred format that we want to ship
and besides that we could also put in
things like external if we have any
dependencies in our code we could also
specify some Global’s if we have any and
there’s also a section for plugins so
plugins is another thing that we can
specify if we go back in here I’m gonna
save the file as you can see everything
gets Auto formatted for us which is very
nice so now to build our bundle all we
have to do is we need to call npx
roll-up and pass in the config options
so we’re gonna pass in – C and this will
use the Yuval up convict GS file and as
you can see a built e bundle so now if
we do cat on the dist bundle GS and
you’re gonna see that we get the same
output as before so in this case it’s
using common share syntax
now for a library like this we want to
not only ship the common GS and that’s
which is useful for APM but we might
also want to ship es module syntax which
is going to be useful for bundlers in
order to enable Chi shaking so we want
to make sure that the end user is able
to only import the files or components
that they actually need and not the
entire project and unfortunately using
the common GS syntax it’s pretty much
impossible
there is tools that try to do that but
because of the dynamic nature of common
GS modules tree shaking is very
difficult if not impossible
now tree shaking luckily for us is
actually very easy using es modules and
now besides that for environments like
browsers we might also want to ship the
UMD bundle so UMD is very similar to the
if a format the benefit of the UMD
format is that it actually supports
multiple module specifications like for
example AMD using something
requirejs or ei also has support for
commonjs
and it can also be invoked in a global
environment like a browsers for example
on the window object so now this one is
a very versatile syntax and it’s most
often used in browsers that don’t have
any built workflow so for example if
you’re not using something like web pack
you might pull in the bundled GS file
yourself so you could put an e bundle
the GS file manually or you could even
reference it from a CD and yourself
using the UMD format this will actually
work in a browser from the get-go so it
sounds like we want to export multiple
outputs and in fact in roll-up we have
an option to do that and so now if I
look for output and instead of an object
or in a pass on an array C as you can
see here we can pass in multiple
configurations to create several bundles
so now in the end what I like to do is
I’d like to create several output files
so instead of the dist directory we’re
gonna create several bundles there’s
gonna be bundle dot j s for the comma j
s syntax so we might as well put in c j
s to denote that this bundle is indeed
for comma j s we might also have another
one
this’ll be bundle dot es m da Jia’s the
ESM syntax denotes that this file is
intended for bundler stack web pack and
will up so this one will actually be
used in a build workflow so for example
if you have a create react app
application or if you have a custom
build setup with web pack this bundle
esmd as well is the one that’s going to
be used because we want to enable tree
shaking in the project and if this
sounds confusing to you I’m going to
also include some of the resources under
this video so you could read up more
about the intricacies of these different
module systems yourself and the last one
like I said I didn’t want to also enable
support for UMD so this will be bundled
at UMD GS so in the end I want to ship
three different bundles like that so now
with roll-up it’s actually fairly simple
we’re gonna pass in an array instead of
an object so we’re gonna have several
objects instead of that array each for a
different purpose
so one of them is going to be the dist
bundle dot command GS GS file format of
course is going to be comma GS as well
no the next one is going to be the same
file except we’re gonna put in bundle
dot es mas to denote that this file is
indeed for es modules the format in this
case is going to be es m
you could also put an es as a shorthand
for es modules and of course the last
one will be file dest module dot UMD and
this one will be for the format of UMD
now in this case we could also specify a
name for that bundle so we can pass on a
name option and in fact in a
documentation if you look for name name
is something you would often specify for
a UMD export this one allows you to
define a name for that bundle like I
said so for instance if you were to put
that file in a script tag in a browser
and let’s say if we give it a name of
for example react CSS spinners if you
were to use that name in a browser you
would do something like window dot react
CSS spinners and then from there you get
to let’s say a ring or a circle or
something like that so this is why
putting a name is very useful this way
we can identify the global for our
project that will allow us to access all
of these spinners now you could see some
of the configuration is being duplicated
so what I’m gonna do is I’m actually
going to create a Constance so let’s put
in dist I’ll just set it to a dist
string and this one I’m going to change
to a template string so we’re gonna wrap
this in a variable so this we’re gonna
be passing the name as a variable so now
let’s go ahead and try to build it so
back in the terminal in fact instead of
doing it from the terminal all the time
I’m gonna go back to the editor so what
I’m gonna do is I’m gonna add a script
called build and we’re gonna call roll
up with E – C option this way it’s gonna
look for the configuration file so now
if we save it let’s go back to the
terminal let’s do a p.m. run build and
as you can see it created three
different bundles so if we do LS on the
dist directory we’ll have four different
files in this case you’ll notice the
bono J’s file from the previous build
and this one we built ourselves just a
few minutes ago so for someone like this
you want to make sure that the old files
don’t end up in a bundle to be safe you
would want to make sure to first of all
delete the dist directory if it exists
already
and then recreated using roll-up so
before we even bundle our code you want
to make sure that we remove any of the
leftovers from the last time so for
something like this it’s very common to
use the remm rev package so if I look
for rim rev this one is basically a very
simple package that allows you to delete
a directory if it exists so now if I go
to the terminal I’m going to
p.m. install a dev dependency of rim
wrath so now once that’s done we can add
a script so we could either add let’s
say clean and we can call rim rev on the
dist directory and now we could either
chain them so for example something like
NPM run clean and then run the roll-up –
C command but it’s a lot simpler to just
simply have a pre script so using NPM we
can actually set up pre and post scripts
so for something like build we could set
up a pre build script this one will run
before the build command so every time
you do a PM run build it’s going to
first execute the pre build script if
it’s available in package.json in this
case we could do npm run and clean
ourselves or because we’re gonna be
using the clean command only in the
build process it also makes sense to
just simply put it in pre build like
that because I don’t think we’re gonna
be using that clean commit ourselves
so now let’s save it so if I do a medium
run build it’s gonna first remove the
dist directory and then after that it’s
going to generate the bundles so now if
you do LS on the destructor II we get these three different bundles
Please follow and like us: