We just ran a bundler a couple of times and observed the output.
I want to very quickly summarize exactly what the bundler was doing for us step by step.
So we ran a bundler.
In our case, it was Watpac and it executed this series of steps you see right here.
The first thing that occurred, the bundler read the contents of our entry file or essentially the main
file instead of our application for you and I.
That was the index file.
The bundler then very clearly read through all the code inside that file.
It passed all the code and found all the different import and export statements that we wrote into it.
Then whenever we wrote an import or require statement, the bundler then found the module that we were
looking for on our hard drives.
In our case, that was the message file.
So the bundler not only automatically read all the code inside of our file and also found the files
that we were actually looking for.
Once it found all these files and then took all the contents of these different files, join them all
together and made sure that all the different values that we were importing and exporting were correctly
linked up between these different modules.
So that kind of summarizes what the bundler was doing.
But this still doesn't really kind of solve or answer how we're going to address big challenge number
three over here.
Well, it almost kind of does.
Let me show you one little change we can make to the behavior of a bundler and have it kind of solve
big challenge number three for us.
So if we somehow got a bundler that did all the same kind of stuff but did one step just slightly differently,
then we would be able to perfectly solve big problem number three.
So rather than trying to find some model on our hard drive, whenever a user writes out an important
statement, we want to make sure that our slightly different bundler will attempt to instead find a
module that a user imports directly from NPM.
Because remember, inside of our application, we want to allow user to just import react or Lodish
or Axios or any arbitrary module.
So we want a Bandler where instead of trying to find a model on our hard drive, we want the bundler
to reach out to NPM directly and try to get the source code for that module and include it inside of
our output bundle.
That's it.
That's all we really have to do.
If we can find a bundler or somehow change a bundler to do this step right here, then we will have
solved problem number three, with one very small exception of it.
Won't quite handle CSFs just yet.
So that's our next big challenge or kind of a sub challenge, I guess, of number three.
We need to figure out how we can take some existing bundler like Watpac or something similar and just
change out.
This one single step right here, if we can figure that out, will be in really good shape.
So let's take a look at a couple of options or a couple of different ways we can implement this slightly
different change right here in just a moment.