We might now have a reasonable idea of what's going on, but we need to figure out how to write out
some code to actually solve this.
How do we actually put together the implementation?
Let's just break this down into a series of different steps.
The first thing that very clearly needs to occur, we need to detect whenever we get redirected while
attempting to fetch a file.
So if we attempt to fetch something like nested test package and we get redirected to something like
this right here, how do we detect that and how do we actually get that path?
Let's just try to console log out this redirecting you URL and then maybe move from there.
So for that, I'm going to go back over to my plug in.
I'm going to find my onload function down here.
I'm going to go down to where we make this request to actually fetch a file.
And then in addition to pulling off the data from the response we get back, I'm going to also pull
a property called Request.
And right now, let's do a log of request.
And then going to go back over to my browser, refresh and submit.
So eventually I should see the council log or that request.
Sometimes unpackaged hangs up just a little bit, so request is still hanging, yep, there it is.
There's the response right there.
So here's the console request.
I'm going to expand that.
And then inside of here, you can scroll down a little bit and notice that inside of here there is a
response.
You RL property, this property right here describes where we were redirected to.
And so inside this URL very clearly is that path that we need.
This is the Sarsae.
We've also got the full package name and the version that we're actually getting as well.
So we need to somehow extract that part of the euro right there and then somehow provide that to the
resolution of the next file inside this package.
That's what we really have to do.
Let's first focus on just extracting that one single part of the URL to do so.
I'm going to copy this URL.
You're my counsel, and once again, I'm going to build up a new umbrella object and paste that URL
in like some.
So if I run that as it stands right now, you'll see that I do get out a path name right here that has
just that part portion, but the name also includes the file that I fetched right there at the very
end.
I don't really want to include the file name.
I want to get just the path where we fetch this file that I want to get just that part right there.
So to make sure that we get just that part, we can update this new URL so I can do a little up arrow.
But now, as the first argument to this, I'm going to put in a dot inside of a string like some.
Now, if I were on that.
My path name will now be just the directory that we found the main file of this package at, so just
the nested test package, Sarsae, definitely what we want right there.
Now that we have extracted this very particular part of the URL, we need to figure out how to take
that part and somehow provide it to the resolution of this next file.
Like I mentioned, there is kind of a tool inside of us build for facilitating this back inside my editor.
I'm going to find this object returning and I'm going to add in a Resolve Dir property resolve directory
is going to be provided to the next file that we tried to require.
And it's going to describe where we found this original file.
In other words, where did we find nested test package so we can communicate where we found nested nested
test package at to the next file that we tried to resolve this resolved property right here.
We are using it exactly as intended, essentially, if resolved.
I'm going to put in new U.
RL.
Slash response.
We got to do request dot response well, and then remember, we want only the name property of their.
And then going to your comment at that blog.
OK, let's now save this look back over.
I'm going to do another simit.
Again, it's going to hang here for just a minute, like I said, sometimes unpackaged things ever so
slightly.
We're going to be eventually adding some code to kind of handle that case, so don't sweat it.
All right, there we go.
So now here's the unresolved for our helper's utils file, and you'll notice the result dir property
that is shown up inside of an resolve.
So that is inside of our ED, just to be really clear.
That is unresolved.
We're looking at this council right here for our utils file, and there is on there a resolved property
that describes where we found the last file that we were looking for.
That's exactly what we want.
So we're now being told during the resolution of this process or this file right here, we're being
told where we found the last file.
So now all we have to do is update our generation of the path for this file.
We need to update it to unpackaged outcome, plus where we found the last file, plus the relative directory.
OK, so for that.
Back inside of our Ed.
This if statement right here is where we handled the resolution of relative files, because, remember,
we've got that includes and includes dogs.
So we have to update our generation right here.
We're going to update it to.
Our export path, and then we're going to take as a second argument, I'm going to delete that important
stuff and we'll update it to Boleyn's unpackaged dotcom.
Plus, Argott resolved.
That's where we found the last file or the one that is attempting to require in this current file,
plus a forward slash at the very end.
Let's save this.
Go back over, refresh, submit a it worked.
Take a look at that.
So now we are correctly resolving the path to that utils file so we can see the very last onload, here
is the URL that we're trying to fetch utils at and it correctly has that entire SIRC threshold.
There's utils inside of it.
This looks good.
This is exactly what we want.
We are now bundling and module that has some nested in a file inside of it.
The last very small change that off the top of my head, I think we can make here, I don't quite recall.
I think this will work.
It's kind of nasty to have to put on this trailing forwards right here in that code that we just wrote.
I think we can actually remove that and have it just be unpackaged dotcom plus the result.
Or if we also go down to the very bottom.
And when we get this new URL right here, rather than doing a I think we can do just a dot.
So if we do that and then flip back over, let's try doing this again now, OK, never mind.
Totally wrong.
I was just off the top of my head.
It's going to undo both those changes.
I want to have the slash down here, and I do want the slash right there as well.
Make sure that still works.
Yep.
There we go.
OK, I apologize for that last little digression, I was pretty sure we could do that, but no, I guess
not.
Well, that's pretty much it, we've now got the ability to bundle up some nested package stuff, so
now I think that we're in a pretty good state and we can start to test out possibly some real packages,
like things like react and maybe axios as well.
Let's take a pause right here.
Make sure some other different random packages work as well, and then eventually come back into this
file and do some code cleanup on our plug in as well.