All right, my friends, we've now put in a lot of work on on this path resolutions up to now, in theory,
we should be able to require in real modules off of NPM modules like React, Axios, React and so on.
So we're going to spend this video trying to change out the code inside of our hardcoded index, such
as file to requiring some real modules and just make sure they work as expected.
Now, this should work.
Everything we have should work for a lot of modules, but it's not going to work for 100 percent of
all modules hosted on NPM.
They're going to be some modules that are designed only to work inside of a node environment.
They're going to be some other modules that might attempt to require in excess file or maybe a font
file or something like that.
And right now, our code is not set up to work with those different kinds of files.
So in other words, we tibble to require in a lot of different packages off of NPM and have them work
correctly, but not necessarily 100 percent of every last package you can ever possibly think of.
OK, so let's give this a shot.
Remember our indexed outguess file right here.
This is in theory, the code that a user is going to write into our code editor.
It's going to replace that require right there with a required for react and then going to save that
look back over to the browser.
Refresh and submit.
Hey, now that looks good, we do have a couple of warnings inside of here that we find we will fix
those up in just a moment.
But if you take a look, this is all the source code for react bundled into our output.
This is all everything for react.
And if we scroll down all the way to the very bottom.
We'll eventually see the code for our next guest file right there.
For all these logs, these are the different require statements internally inside of reactor itself.
So when we try to just get, say, react, we're going to get the main react entry file.
So something like react index and then that react index file in turn attempts to require other files.
We actually saw this a little bit ago when we were working directly with Westpac.
If I go to unpackaged dot com react, remember we saw this file a little bit ago, so internally react
itself attempts to require in some other file.
So we are seeing that require statement and resolving the require correctly.
So all of these different kinds of blogs right here, these are all the kind of nested requires inside
of reactor itself, you will notice that we are fetching a pretty good number of files here that might
eventually have a pretty big performance impact on our application.
So we might need to figure out some way to maybe reduce the number of requests that we're making over
to Unpackaged at some point in time.
But for before that, let's go back over to our editor and try requiring in some other modules as well.
I'm going to try to get, say, react dumb.
We'll save that.
Refresh Zimet.
You got click submit to zoom out.
There we go.
OK, looks like I was able to bundle, react on.
I'm going to try.
Axios.
Save that refresh.
Yep, looks like we can bundle Axios, there's all the source code for Axios itself.
Maybe just one more, let's try to get, say, Lodish.
We'll save that.
But over.
Simit.
And here's all the source code for Lodish as well.
Well, I'd say this is working pretty darn well now in theory, if we took the output of this bundle
and we were to somehow execute it, we would see.
For example, a console log of Lodish, and we could work with a load library if we were requiring react
or react, Dom or Axios we would be able to work directly with those libraries.
But right now, of course, we are not actually executing the output of this bundle just yet.
One other thing I wanted to test out really quickly.
I just want to make sure that we can actually require in or bundle multiple different modules.
So let's try updating this code.
I'll say contract is require react.
And react, Dom, is react, Dom.
What's going to remove that console will see what lets console react and react, Dom, I believe that
if you do not actually make use of these variables, yes, build might try to strip them out for you
automatically, which we definitely don't want.
So I'm going to put in the console log right here just to make sure that Bill doesn't try to strip these
things out.
Let's go back over Simit.
And after a pretty solid number of requests, yep, we eventually get both react and react together.
All right.
Well, this is looking pretty good.
Last thing I want to test very quickly, just make sure that we can do bundling even if we are using.
Yes.
Module's syntax as well.
So right now we're using --'s.
I'm going to update this to just be about import react.
From React.
I'll update the council log as well.
Save that.
Click, refresh, submit, yep, yes, module Syntex works.
And if we also try to get stuff like, say, a U.S. state hook and I try to console log that as well.
Refresh simit.
Keep on clicking, submit too quickly.
There we go.
Yeah, looks like everything around us module and common JS modules works just fine.
Well, this is a really good step forward.
I'm very pleased, but you will notice that we are getting a couple of little warnings inside of here.
So let's take a quick pause right here.
Figure out how to deal with these warnings.
We're going to make a couple of other improvements to our project to make sure that we're not fetching
a ton of files nonstop from unpackaged.
So we're going to put in a caching layer, essentially.
And after that, I think the last thing we really need to do is figure out how to execute this code.
And it will be just about set.