Package JSON Demystified - The 'Workspaces' Keyword

greetings friends welcome today we're looking at the workspace keyword in your package.json so this is typically used when you're having a mono repo set up so you've got a few projects that you're you're running with um and they're they're they're all being used in your main project and rather than have them as separate repositories which which can can get problematic in terms of pull requests and changes and getting those updates into your project what you can do is set up one project um and then but then that comes with its own issues as well and this is where the workspace keyword uh can help us out um before we jump in though if you find yourself enjoying the video feel free to click that subscribe below change the alert icon to all and you'll get updates for future videos okay let's let's jump in and have a look at the scenario where that we're considering here so i've got i just got a directory here i'll just do an npm in it so say we've got a project and we're using a couple of our own packages within that project um so if i open up a visual studio code here and we create a new file here this would be our main project um and then and then and we've got one that we've created and we want to use as well so rather than doing an npm install from another repository we've actually we're going to consider that we've got this within the same repository now the standard for this would be to have a packages folder in here and you would place these inside here so say say we had a cli project that we created it was in here let's give it a just give it a file in there and we'll create a package.json for it as well so we could do an npm init in there all right so that there's this sort of scenario we're looking at and then like for this to be useful you would you would have quite a few you know one two three four five ten to a hundred whatever but you'd have you'd have a few um sub packages in there that you're working with so one way to work with that now in this package would be to do an npm link against this package if you don't know how npm link works i've got a video for that here worth checking that out and that would work and and workspaces pretty much that is what it's going to do for us but it's going to do it for multiple packages so we could do it for this one i know we had a few others we could do it for those as well um but then if if someone else is working on this a collaborator is working and they pull it down from github they've got to go and run five or so npm links and they're not necessarily gonna know which one should be linked um so workspaces provides a way to manage this for us so let's let's add those let's go into our package.json and i'll just get rid of scripts there and we'll add in a a workspaces and it's gonna it takes an array here and in there we can add we've only got what um but we can add as many as we want in so let's put in packages and cli like so all right so that is how we set it up in our top level root project that we're going to be including them so what we'll see now is this npm link in effect so if i come back up to the roots here and i do an npm install so in my root package i'm not referencing i've got no dependencies no depth dependencies um so you wouldn't expect npm install to do anything but i have got workspaces and it's referencing this cli package so if i do an npm install you can see it's added a package so it's aware of this uh this keyword and look i've got a node modules and if i go in there the cli package is in there and available for me to use in my root project um this little arrow yeah this little arrow here shows it's npm linked rather than a local npm install so whenever i make changes to to this package so in here those updates will immediately get reflected without the need to do any npm updates or any other npm installs and so it manages that for you so workspaces provides that it it also then provides the ability to do a couple of other things certainly like to run commands across all of these uh packages so if we had um if we had multiple ones in there let's add another one in so let's go to packages and let's just call it cli2 and we'll add a file in there and let's do an npr and it's in there to give that package.json as well right so say we had some scripts in here that we were running to build these packages or test them um so let's let's just add some details in there so ran cli 2 script so that's in my cli2 package there and then come back up into cli and we can say cli one script like so all right so to run those you could go into each one and do a npm run and and uh test um but workspaces is aware of this as well so if i do an npm uh run test and i specify i want it done in my workspaces and when i run that oh i need to call i need to come back up to the root that would be fair um oh yes so i've added a new package but i haven't specified it in here so this is an array we can add in another one here so this is how this would get built out you'd have all of your sub projects specified in the workspaces here all right let's have one more go at that okay so i got i got cli script one there well i'm doing cli script two scripts test oh did i not save it i just didn't save it that was there's too many of these open all right so that should work for us now i just make this one full screen we'll be able to see a little bit better all right so it ran cli script one and it also ran cli script two um so yeah the the the general commands and um functionality in npm is aware that you've got workspaces set up in this case now it does the basics there you if you're looking then to move this on to be a very a very large model repo you might want to add a package on top like learner which builds on top of workspaces and gives you extra functionality again but for for a simple one you can get away with just using workspaces and the functionality that that provides um so there you go little overview of the workspaces keyword in package.json if you see that now you'll understand what's going on i hope that was interesting give me a thumbs up if you liked it a thumbs up if not catch you next time bye [Music] you

Channel: A shot of code

Views: 119

Rating: 5 out of 5

Keywords:

Id: ZcgmlOaIiN0

Length: 8min 43sec (523 seconds)

Published: Sat Sep 11 2021