Trainspotting is working correctly, so now we need to start thinking about bundling as well.
Let's first begin by taking a look at the easy build documentation and see if it gives us any hints
on how we can bundle inside the browser.
All right, so over at the spill documentation, which you can find that it's billed GitHub, I I'm
going to find the API section on the left hand side and go to transform API.
This is what we are currently using, no chance for means transpired.
The documentation here says this works great.
If you have a single string of code without access to a file system and you probably want to use this
function if you're in a files or environment without a file system such as a browser.
So the documentation is very clear that you really only want to use this transform API if you're in
the browser.
But we're saying, hey, you know what, it's build.
I don't care.
I want to use the entire build API.
Inside the browser, but this build API very much relies upon there being a file system present.
Let me show you why.
OK, so at some point in time, we're going to be running Eskild inside the browser, we're going to
feed us, build some code like this right here, something that says import react from react.
We're going to feed it into s build and tell it that we want it to both transpire and bundle that code.
S build, in theory, is going to turn right back around to us and say, hey, sure, I can transport
and bundle this thing.
It's going to start to look at this code.
It's going to say, oh, we're trying to import something called react.
I better look at the file system and try to find some dependancy installed called react.
So at some point in time, the default implementation of a build during this bundling process, whenever
it sees an important statement like this, it's going to try to look at the file system and find whatever
dependencies we are looking for.
But remember, we are operating inside the browser.
Your browser has no file system and it has no access to the underlying file system on your computer.
It kind of has access.
You can drag and drop files into the browser.
You can save files to your file system.
But we can't write out JavaScript code that just starts to look around to into random files on a user's
hard drive from the browser.
So as soon as this build starts to look around for this react module, it's immediately going to throw
an error and say, hey, there's no file system here, how am I supposed to find react?
So as it stands right now, we cannot use e build to do any bundling.
Now, we did kind of discuss this a little bit ago, remember, we looked at a diagram just like this,
we had said and we looked at this diagram when we were still considering Webberley.
In the scenario when we were saying that we going to try running everything inside of a reactor application,
we had said that we would have some code, throw it into WABAC or Eskild or whatever.
It would then find an import statement.
And at that point in time, we would try to write a plugin or something like that to fetch the individual
file that we were looking for from the NPM registry directly.
We would feed that back into our bundler.
At the time, it was Web.
Now we're saying it's Eskild and it could use that to build up the bundle.
So that's essentially what you and I need to do here.
We need to kind of hijack this entire process of allowing Eskild to look up dependencies.
We don't want us built to look up dependencies.
We don't want it to try to look at a file system and find stuff like react instead.
We want to intercept that and tell it you're wait.
Yes.
Build.
No, no, no.
Don't try to look at the file system.
We will take care of this for you.
We are going to reach out to NPM.
We're going to find the file you're looking for and give it right back to you.
So don't look at the file system.
Let's take a look at this entire process in a little bit more involved diagram.
So this is what we really want to have happen.
Whenever we tried to what transpired and bundle something like this right here, yes, Bill is going
to start to say, OK, I can definitely transport and bundle this.
And the first thing it's going to do is try to figure out what path on the file system it should look
at to find react.
In a typical application, if we are running this on our actual filesystem or inside of a kind of node
environment, it might first try to find this react module by looking inside the node modules directory.
So we want to, again, just intercept that entire process.
So we're going to jump in there.
We're going to say, hey, let's build.
You're doing the bundling.
We know you're busy.
Let us figure out what path you should look at to find react.
So we're going to write a plug in that just hijacks that process.
Whenever SBL tries to find a path for react, you and I are going to reach out to the NPM registry or
something similar.
And we're going to say, hey, NPM, how do we find the URL for react?
How do we get at the source code for react?
Because our bundler needs it.
NPM hopefully is going to respond to us with a URL where we can find the source code for react.
We're going to take that URL and just provide it directly back into us, build and say, you know what,
instead of the file system, look at this URL and use that URL to try and find the source code for react.
That's it, that's what we need to do.
Now, I know this all is quite complicated, it really is, but just, you know, doing bundling inside
the browser is actually kind of notoriously difficult.
There are not really any off the shelf solutions right now to make bundling in the browser a very easy
process.
Any time that you use a lot of online tools like, say, Code Sandbox, which actually used to do bundling
inside the browser, there is a tremendous amount of custom code that went into that directly getting
off kind of easy here by being able to use its build and just write a relatively small amount of code.
You implement this process here.
So even though this might seem really crazy, trust me, things could be way worse when it comes to
bundling in the browser.
OK, so I think we've now got a slightly better idea of what we need to do.
So I think it's pretty obvious that the next big challenge here is figuring out how we are going to
somehow reach out to the NPM registry and get the URL or some address of where to find any or just about
any dependency that is hosted on NPM.
So start to figure that out in the next video.