but so now that we have a basic config
for Rolla let’s actually go ahead and
start fleshing out our index tree as
well so what do we want to do in the end
well in the end we want to basically do
something like import react from react
and let’s say we had a spinner so we’re
gonna have a component that accepts some
props and returns let’s say an h1 for
now we’re just gonna say spinner and
we’re gonna do an export default of
spinner so let’s save the file and now
ignore the underline for a second but if
we go back to the terminal now if we do
npm run build again it’s going to fail
because it can’t possibly understand the
JSX syntax so there’s a few things we
have to do first of all we need to setup
react and Bobble in the project and then
the second thing we need to do is we
need to make sure to also let us let
know that we’re using react in this
project now the second one is the
easiest between the two so let’s
actually go back to Google Chrome so
what I’m gonna do is I’m gonna search
for yes lint plug-in react so now this
one will allow us to set up some
reasonable default for react so that es
Lin doesn’t bother us so now to install
it so let’s copy the name es lint
plug-in react back in the terminal let’s
clear it out I’ll do NPM install
yes Lim plug-in react now back in here
we’re gonna copy plug-in call and react
slash recommended this one will like I
said set up some reasonable defaults
that we can use so let’s go back in here
I’m gonna go back to islets RC JSON file
and now instead of putting a string
after the extends key I’m gonna actually
pass in an array and I’m just gonna add
the react plugin to the end of that
array so let’s say the father if we go
back to index dot yes you’re gonna see
that the other line is gone now because
before the issue was that we were
importing to react but we were not using
reacted directly when using gsx will
still have to import react at the top
because that chess X and X will be
transformed to react create element
calls now let’s get back to our build
setup so in order to enable the JSX
syntax but first of all have to add
babel plugin it’s to roll up so let’s do
that so let’s do a theme install – D of
roll-up plugin
bable we are also going to install babel
/ core so we’re going to be using babel
seven
let’s also install babel preset and
let’s also add babel preset react to
work with the GS x and x so let’s
install all of those ones and I’m gonna
go back to the editor in the meantime
I’m going to create a babel our c file
so this one will be a json file we’re
gonna have a bunch of presets so let’s
add a few presets so we’re gonna have a
babel /n and this is a shorthand for
preset – and i’m also going to add one
for react as well so bob will react and
now for the end of preset i’m actually
going to pass in an array there’s a few
things I want to configure myself so
I’ll pass in an object we’re gonna set
up modules to false now let me explain
this one in more detail now if we go
back to the documentation for Bao let’s
go to babel jio let’s look at preset and
you know if I look for modules and now
this key as you can see allows us to
control how the es6 modules are being
transformed so we could either transform
them to something like AMD or UMD or
commonjs
which happens to be the default or we
could just simply set it to false which
means that we’re not going to transpile
the modules using babel but in fact
we’re gonna leave that task up to roll
up instead and this in fact happens to
be the preferred option because if we
transform it to commonjs
we’re gonna lose tree-shaking like I
explained before so we’re gonna set it
to false ourselves we’re not going to
transpile ES modules using babel we’re
gonna leave them as is the other option
I’m gonna set up is going to be target
now what this one will allow us to do is
to target specific browser markets so
for instance we can target more than
0.25 percent of browsers including I 11
because this will be a library that we
export so we might as well at support
for 11 just in case but we’re gonna
exclude or pro meeting all and we’re
gonna put not dead to make sure that we
don’t target any dead browsers now this
query you could actually copy yourself
it’s gonna copy it and just for a demo
let’s go to browser list because the
website that we can go to and we can
basically paste in that query and I
paste it in to make sure that it
valid so you can see it’s gonna target
Chrome Firefox edge 11 as well and some
of the browsers like opera and Safari
now of course you could also modify that
query to target more modern browsers so
for example if you want to exclude a 11
you would put not a 11 you could also
play with the percentage option and this
will of course affect how the bundle is
transpiled and the last one is I’m gonna
put an option for a node in this case
I’m gonna be targeting node a 10 because
it’s already in LTS or once again if you
want to enable support for something
older you might as well put in let’s say
node 8 like that again this is something
you might have to play with so give it a
try and once again if you’re in confused
about the options you could of course go
back to the docs again in the preset
enim section you could read about that
in more detail of course you could also
create a separate browser list file but
for now I’m just gonna put it in Babel
or C and so what we can do is we can go
back to a rollup config file and so
let’s have an import of Babel plug-in so
we’re gonna import roll-up plug-in Babel
like that we’re also going to import
resolve from roll-up plugin ode resolved
so now let’s go ahead and set up a
plugins section we’ll set up plugins
this will be an array will pass in Babel
in fact it let’s actually go and look
for that plugin so once you install you
can pass in an option to exclude node
modules from being bundled we’re gonna
do exactly that I’m just gonna paste in
the config object and we can also call
result in fact resolve is something
we’ll have to put because it’s gonna
help us resolve the dependencies and if
we go back to the terminal we’re gonna
try to do an NPM run and build you’re
gonna see that we got two warnings one
of them talks about the unresolved
dependencies in fact it points to react
and port the way I’ve in our source code
and it’s also talking about missing
global variable name now let’s deal with
them one by one so the first one talks
about unresolved dependencies if we go
back to Google Chrome in the roll-up
documentation you’re gonna find that
there is a key known as external so if
you look at this example over here it’s
declaring lodash as an external
dependency so the reason behind this is
that we don’t want to bundle the source
code of lodash into our module so we
want to make use of lodash as a
dependency but we don’t actually want to
bundle it ourselves
so what we can do is we can declare it
as an external dependency and that way
whoever integrates our package will have
to install that lodash dependency
themselves in fact there’s a name for
that type of dependency and it’s known
as a peer dependency you know so we’re
gonna do is we’re gonna add a new key
we’re gonna call it external and we’re
gonna specify react as an external
dependency and now for the second
warning this one talks about you missing
a global variable name because we need
to tell roll up that react is going to
be a global variable so we just have to
specify some sort of a mechanism to
resolve it now back in the roll up
documentation there’s a Global’s
property that we can specify so for
example if you were to use jQuery as an
external dependency we will declare it
as external but for the ithi bundle or
for the UMD bundle specifically we would
also put the Global’s key and once again
you would only need to put this if you
are targeting a UMD or if a bundles
because let’s say any common GS bundle
you would simply import it using the
required statement so you don’t have to
necessarily declare it but if it’s an
immediately self invoked function or if
it’s a UMD bundle you have to be
specific about the way that that
dependency is going to be resolved so in
a roll-up conflict for the UMD bundle
only we’re gonna add a global ski and
this one is going to be an object so
we’re gonna put and react as a
dependency we’re gonna set it to react
upper case now what does this syntax
actually do so the first one is the key
of that object so react lower case this
one actually refers to the import of
react in our index.js file so if we had
something like let’s say import react
Dom from react Dom you would have to
also copy that react – Dom package name
and you would also have to add it as a
key over here so you would add something
like let’s say react Dom you would also
have to wrap it with quotes because it’s
not a valid identifier on its own and
then the second value would be the
actual variable in the global context so
if this was being used in a browser how
would they react dependency be resolved
well it’s going to be usually resolved
with window dot react upper case and if
it’s a react on dependency it’s going to
be resolved as window react Dom so the
are in react is capitalized and then the
letters in the word Dom are also
capitalized so because of that it would
all support react Dom
like this and again this also match the
react Dom import in your index status
file but in this case we don’t have any
yak Dom so I’m just actually going to
remove it so let me clean it up so we’re
actually only going to have a
all definition for react now if I go
back to the terminal let’s do an NPM run
build once again and it looks like it
succeeded so now if we look at the files
in our disco well the first thing is
you’re gonna see an underline which is
coming from eslint now once again this
is only going to happen if you have the
es length extension enabled and the same
thing actually applies to prettier as
well so you have to make sure that those
two are installed but in some cases
they’re gonna be applied to files that
you don’t necessarily want to be Lintott
or prettified so what we can do in this
case is we can create a dot es lint
ignore file in this file we’re gonna add
the dist folder in fact let’s also add
node modules like this so I’m gonna copy
this and I’m actually going to create
another file so let’s call it dot
prettier ignore we’re gonna copy these
same two folders in there so once again
for the es let ignore file this will
ignore any files in a dist or node
modules directory from being Linton and
the same thing will also apply to
prettier so prettier will not Profi any
files in these two directories and on
the same note we can actually go to get
ignore and let’s also add the dist
directory to get ignore as well so that
way we won’t accidentally push the desk
directory to our source code and if I go
back to the bundle common J’s file as
you can see here we get our component
and it’s being exported using the
ecology as syntax in the bundle es MV as
well we get the same component but it’s
being exported using es modules so this
way will enable tree shaking eventually
and now for the UMD bundle this is the
heaviest file among the three and this
one will obviously reference the react
dependency it’s going to create a
spinner and it’s going to return it so
it’s gonna do its own EU MD style syntax
export now if you take a look at any of
the three bundles you’re actually going
to see that the source code is not
modified and that’s the one thing that
we forgot to do so you notice to do that
we could use a plug-in so one thing we
could do is we could use the uglify
plugin so there’s a rollup plug-in
uglify and i’m this one allows you to a
glyph i and mingle the source code when
it’s being bundled but the downside of
this plug-in is it doesn’t actually work
for es6 and you can even see a warning
over here that a graffiti is is only
able to transpile es5 syntax and if you
indeed want to transpile es6 syntax
please use tercer plugin instead so
Chaucer is very very similar it does the
same job of uglify your code and
minifying it to reduce the bundle size
but the difference is that it can
actually work with es6 + syntax so what
we’re gonna do is we’re gonna copy the
name let’s go back to the terminal I’ll
clear it out and then I’m gonna do an
NPM install of that dependency so in
this case roll-up plug-in tercer so now
to use it let’s go back to the editor
we’re gonna import it so we’ll have an
import of Chaucer from will a plug-in
tercer you know we could obviously put
the plug-in in here so let’s say tracer
to the array of plugins but it might
also be useful to only minify the code
for production so let’s create a
variable our gonna call it production if
the production variable is set to true
we’re gonna minify the code but
otherwise we’re gonna skip that step so
to create that variable I’m gonna put
production to determine if we are indeed
in a production mode we can take a look
at process dot and dot rollup underscore
watch variable and so if that variable
evaluates to true then we are in
development but if not it means that
we’re in production so I’m gonna put the
exclamation point in front of it and in
fact now that I’m looking at it the
bundle keyword is actually being
duplicated as well so let’s actually
create a variable for it – so recruited
one for dist let’s also add one for a
bundle so in the same notes I’ll just go
ahead and replace bundle it’s gonna do
the same exact thing it’s just that it’s
gonna be more configurable and let’s go
back to the terminal I’ll clear it out
let’s do NPM around build and the bundle
is built this time so now if we go back
and take a look at it you can see that
this time all the code will be minified
and so this one fact will reduce the
bundle size as well and this is an
upside of course because you want to
ship the smallest amount of code as
possible all right so with that we
should be good to go so let’s do a get
status so I’m gonna add all of those
files and I’m gonna do a commit of let’s
say add roll-up and bubble with react
and this will run the length command and
once that’s done we can do a get push to a repo and we should be good to go
for Rolla let’s actually go ahead and
start fleshing out our index tree as
well so what do we want to do in the end
well in the end we want to basically do
something like import react from react
and let’s say we had a spinner so we’re
gonna have a component that accepts some
props and returns let’s say an h1 for
now we’re just gonna say spinner and
we’re gonna do an export default of
spinner so let’s save the file and now
ignore the underline for a second but if
we go back to the terminal now if we do
npm run build again it’s going to fail
because it can’t possibly understand the
JSX syntax so there’s a few things we
have to do first of all we need to setup
react and Bobble in the project and then
the second thing we need to do is we
need to make sure to also let us let
know that we’re using react in this
project now the second one is the
easiest between the two so let’s
actually go back to Google Chrome so
what I’m gonna do is I’m gonna search
for yes lint plug-in react so now this
one will allow us to set up some
reasonable default for react so that es
Lin doesn’t bother us so now to install
it so let’s copy the name es lint
plug-in react back in the terminal let’s
clear it out I’ll do NPM install
yes Lim plug-in react now back in here
we’re gonna copy plug-in call and react
slash recommended this one will like I
said set up some reasonable defaults
that we can use so let’s go back in here
I’m gonna go back to islets RC JSON file
and now instead of putting a string
after the extends key I’m gonna actually
pass in an array and I’m just gonna add
the react plugin to the end of that
array so let’s say the father if we go
back to index dot yes you’re gonna see
that the other line is gone now because
before the issue was that we were
importing to react but we were not using
reacted directly when using gsx will
still have to import react at the top
because that chess X and X will be
transformed to react create element
calls now let’s get back to our build
setup so in order to enable the JSX
syntax but first of all have to add
babel plugin it’s to roll up so let’s do
that so let’s do a theme install – D of
roll-up plugin
bable we are also going to install babel
/ core so we’re going to be using babel
seven
let’s also install babel preset and
let’s also add babel preset react to
work with the GS x and x so let’s
install all of those ones and I’m gonna
go back to the editor in the meantime
I’m going to create a babel our c file
so this one will be a json file we’re
gonna have a bunch of presets so let’s
add a few presets so we’re gonna have a
babel /n and this is a shorthand for
preset – and i’m also going to add one
for react as well so bob will react and
now for the end of preset i’m actually
going to pass in an array there’s a few
things I want to configure myself so
I’ll pass in an object we’re gonna set
up modules to false now let me explain
this one in more detail now if we go
back to the documentation for Bao let’s
go to babel jio let’s look at preset and
you know if I look for modules and now
this key as you can see allows us to
control how the es6 modules are being
transformed so we could either transform
them to something like AMD or UMD or
commonjs
which happens to be the default or we
could just simply set it to false which
means that we’re not going to transpile
the modules using babel but in fact
we’re gonna leave that task up to roll
up instead and this in fact happens to
be the preferred option because if we
transform it to commonjs
we’re gonna lose tree-shaking like I
explained before so we’re gonna set it
to false ourselves we’re not going to
transpile ES modules using babel we’re
gonna leave them as is the other option
I’m gonna set up is going to be target
now what this one will allow us to do is
to target specific browser markets so
for instance we can target more than
0.25 percent of browsers including I 11
because this will be a library that we
export so we might as well at support
for 11 just in case but we’re gonna
exclude or pro meeting all and we’re
gonna put not dead to make sure that we
don’t target any dead browsers now this
query you could actually copy yourself
it’s gonna copy it and just for a demo
let’s go to browser list because the
website that we can go to and we can
basically paste in that query and I
paste it in to make sure that it
valid so you can see it’s gonna target
Chrome Firefox edge 11 as well and some
of the browsers like opera and Safari
now of course you could also modify that
query to target more modern browsers so
for example if you want to exclude a 11
you would put not a 11 you could also
play with the percentage option and this
will of course affect how the bundle is
transpiled and the last one is I’m gonna
put an option for a node in this case
I’m gonna be targeting node a 10 because
it’s already in LTS or once again if you
want to enable support for something
older you might as well put in let’s say
node 8 like that again this is something
you might have to play with so give it a
try and once again if you’re in confused
about the options you could of course go
back to the docs again in the preset
enim section you could read about that
in more detail of course you could also
create a separate browser list file but
for now I’m just gonna put it in Babel
or C and so what we can do is we can go
back to a rollup config file and so
let’s have an import of Babel plug-in so
we’re gonna import roll-up plug-in Babel
like that we’re also going to import
resolve from roll-up plugin ode resolved
so now let’s go ahead and set up a
plugins section we’ll set up plugins
this will be an array will pass in Babel
in fact it let’s actually go and look
for that plugin so once you install you
can pass in an option to exclude node
modules from being bundled we’re gonna
do exactly that I’m just gonna paste in
the config object and we can also call
result in fact resolve is something
we’ll have to put because it’s gonna
help us resolve the dependencies and if
we go back to the terminal we’re gonna
try to do an NPM run and build you’re
gonna see that we got two warnings one
of them talks about the unresolved
dependencies in fact it points to react
and port the way I’ve in our source code
and it’s also talking about missing
global variable name now let’s deal with
them one by one so the first one talks
about unresolved dependencies if we go
back to Google Chrome in the roll-up
documentation you’re gonna find that
there is a key known as external so if
you look at this example over here it’s
declaring lodash as an external
dependency so the reason behind this is
that we don’t want to bundle the source
code of lodash into our module so we
want to make use of lodash as a
dependency but we don’t actually want to
bundle it ourselves
so what we can do is we can declare it
as an external dependency and that way
whoever integrates our package will have
to install that lodash dependency
themselves in fact there’s a name for
that type of dependency and it’s known
as a peer dependency you know so we’re
gonna do is we’re gonna add a new key
we’re gonna call it external and we’re
gonna specify react as an external
dependency and now for the second
warning this one talks about you missing
a global variable name because we need
to tell roll up that react is going to
be a global variable so we just have to
specify some sort of a mechanism to
resolve it now back in the roll up
documentation there’s a Global’s
property that we can specify so for
example if you were to use jQuery as an
external dependency we will declare it
as external but for the ithi bundle or
for the UMD bundle specifically we would
also put the Global’s key and once again
you would only need to put this if you
are targeting a UMD or if a bundles
because let’s say any common GS bundle
you would simply import it using the
required statement so you don’t have to
necessarily declare it but if it’s an
immediately self invoked function or if
it’s a UMD bundle you have to be
specific about the way that that
dependency is going to be resolved so in
a roll-up conflict for the UMD bundle
only we’re gonna add a global ski and
this one is going to be an object so
we’re gonna put and react as a
dependency we’re gonna set it to react
upper case now what does this syntax
actually do so the first one is the key
of that object so react lower case this
one actually refers to the import of
react in our index.js file so if we had
something like let’s say import react
Dom from react Dom you would have to
also copy that react – Dom package name
and you would also have to add it as a
key over here so you would add something
like let’s say react Dom you would also
have to wrap it with quotes because it’s
not a valid identifier on its own and
then the second value would be the
actual variable in the global context so
if this was being used in a browser how
would they react dependency be resolved
well it’s going to be usually resolved
with window dot react upper case and if
it’s a react on dependency it’s going to
be resolved as window react Dom so the
are in react is capitalized and then the
letters in the word Dom are also
capitalized so because of that it would
all support react Dom
like this and again this also match the
react Dom import in your index status
file but in this case we don’t have any
yak Dom so I’m just actually going to
remove it so let me clean it up so we’re
actually only going to have a
all definition for react now if I go
back to the terminal let’s do an NPM run
build once again and it looks like it
succeeded so now if we look at the files
in our disco well the first thing is
you’re gonna see an underline which is
coming from eslint now once again this
is only going to happen if you have the
es length extension enabled and the same
thing actually applies to prettier as
well so you have to make sure that those
two are installed but in some cases
they’re gonna be applied to files that
you don’t necessarily want to be Lintott
or prettified so what we can do in this
case is we can create a dot es lint
ignore file in this file we’re gonna add
the dist folder in fact let’s also add
node modules like this so I’m gonna copy
this and I’m actually going to create
another file so let’s call it dot
prettier ignore we’re gonna copy these
same two folders in there so once again
for the es let ignore file this will
ignore any files in a dist or node
modules directory from being Linton and
the same thing will also apply to
prettier so prettier will not Profi any
files in these two directories and on
the same note we can actually go to get
ignore and let’s also add the dist
directory to get ignore as well so that
way we won’t accidentally push the desk
directory to our source code and if I go
back to the bundle common J’s file as
you can see here we get our component
and it’s being exported using the
ecology as syntax in the bundle es MV as
well we get the same component but it’s
being exported using es modules so this
way will enable tree shaking eventually
and now for the UMD bundle this is the
heaviest file among the three and this
one will obviously reference the react
dependency it’s going to create a
spinner and it’s going to return it so
it’s gonna do its own EU MD style syntax
export now if you take a look at any of
the three bundles you’re actually going
to see that the source code is not
modified and that’s the one thing that
we forgot to do so you notice to do that
we could use a plug-in so one thing we
could do is we could use the uglify
plugin so there’s a rollup plug-in
uglify and i’m this one allows you to a
glyph i and mingle the source code when
it’s being bundled but the downside of
this plug-in is it doesn’t actually work
for es6 and you can even see a warning
over here that a graffiti is is only
able to transpile es5 syntax and if you
indeed want to transpile es6 syntax
please use tercer plugin instead so
Chaucer is very very similar it does the
same job of uglify your code and
minifying it to reduce the bundle size
but the difference is that it can
actually work with es6 + syntax so what
we’re gonna do is we’re gonna copy the
name let’s go back to the terminal I’ll
clear it out and then I’m gonna do an
NPM install of that dependency so in
this case roll-up plug-in tercer so now
to use it let’s go back to the editor
we’re gonna import it so we’ll have an
import of Chaucer from will a plug-in
tercer you know we could obviously put
the plug-in in here so let’s say tracer
to the array of plugins but it might
also be useful to only minify the code
for production so let’s create a
variable our gonna call it production if
the production variable is set to true
we’re gonna minify the code but
otherwise we’re gonna skip that step so
to create that variable I’m gonna put
production to determine if we are indeed
in a production mode we can take a look
at process dot and dot rollup underscore
watch variable and so if that variable
evaluates to true then we are in
development but if not it means that
we’re in production so I’m gonna put the
exclamation point in front of it and in
fact now that I’m looking at it the
bundle keyword is actually being
duplicated as well so let’s actually
create a variable for it – so recruited
one for dist let’s also add one for a
bundle so in the same notes I’ll just go
ahead and replace bundle it’s gonna do
the same exact thing it’s just that it’s
gonna be more configurable and let’s go
back to the terminal I’ll clear it out
let’s do NPM around build and the bundle
is built this time so now if we go back
and take a look at it you can see that
this time all the code will be minified
and so this one fact will reduce the
bundle size as well and this is an
upside of course because you want to
ship the smallest amount of code as
possible all right so with that we
should be good to go so let’s do a get
status so I’m gonna add all of those
files and I’m gonna do a commit of let’s
say add roll-up and bubble with react
and this will run the length command and
once that’s done we can do a get push to a repo and we should be good to go
Please follow and like us: