GitHub GitHub Checkout, 4 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: npm 7 - workspaces, peer dependencies, new package-lock file (demo) - GitHub Checkout

Description

After much anticipation, the npm CLI version 7 is now generally available! Join bdougie and ruyadorno in learning about what has changed.

Please note, npm 7 is now published as latest to the npm registry and will be the default version installed when you run npm install --global npm. If you want to install npm 6, please run npm install --global npm@6.

0:00 - start
0:53 - Developing with workspaces
4:15 - Managing peer dependencies
7:44 - The new package-lock file

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Hey b, dougie back again with another feature for you to check out all right, so if you've been following github and the changelog posts, uh definitely check out the videos that we have here on youtube, but also check out the changelog blog and see all the features we've been shipping and speaking of which today we're going to talk about something new with npm. So here I've got rory senior engineer on the npm team, so roy take it away.

B

Hey thanks midalgi, so yeah, my name is roy adorno, I'm a engineer in the npm cli I'd like to take us for a tour of the exciting new features for npm, 7. cool, so yeah here. Basically, I just have an empty folder here uh and basically what I'm going to do here is start a new, basically a new project here. So I think uh the exciting thing to start with with me, maybe to start with workspaces, yeah I've.

A

Heard a lot about workspaces. I know uh folks have been wanting this for the longest time, so I'm looking forward to seeing what you got.

B

So let me start with that. So workspaces in the context of uh npm seven is uh basically is this uh sugar syntax on top of uh links, so npm supported links for a long time. So now we have a workspaces that will basically automatically recognize anything. You declare as a workspace within your package.json and make sure that the npmcly will properly link that package in the process of an npm install from the from the project level. So I can go ahead and make a quick demo here. So basically what we want.

B

Let's say we have a workspace in this project and just goes from folder name a I'm gonna keep it very short, very simplistic. So it's easy to visualize that the changes here. So basically you go ahead and declare a workspaces uh property in your package json. So here I'll, I'm also going to go ahead, create a directory and make sure it has a valid package.json file inside that.

B

So let me go ahead and create a new package.json file here. For my a.

A

B

Let's so now I have uh this very small workspace here and I can run an npm install from my project top level here and what what it's going to do is make sure uh that a is now installed as a dependency of my top level project. So I can also go ahead and check out the node modules folder and I can see it properly place the same link there from a folder in a project. A package named a into my expected folder. There.

A

Yeah, this is great because I know with maintaining and contributing to a lot of open source packages that are in node modules. It can be challenging trying to create the link between the local environment versus what's on npm, so having workspaces seems like it's gonna make that a breeze to work with in the future.

B

Yeah yeah, so basically with the npm seven uh cli ship now is a very foundational support to it. So it's only making sure the install part gets it right, but we are currently working on adding more features and more capacity capabilities to working with these workspaces, but fundamentally what it enables, which is really really nice. uh I can just do a quick demonstration here. It will enable you to basically come inside your project.

B

You can refer to your workspace, a as uh and require it just by that simple name so, regardless, if you're, installing a from the registry or just using it from your workspace, you can just work as if it's just a package right. So that's the very flexible nature of working with workspaces that people were really excited about.

A

Yeah, this is great because I know with maintaining and contributing to a lot of open source packages that are and node modules uh it can be challenging trying to create the link between the local environment versus what's on npm. So having workspaces seems like it's gonna make that a breeze to work with in the future.

B

Yeah, so maybe we can move on with this uh tutorial here and also show off peer dependency, yeah, so peer dependencies. uh They are now installed by default and uh npm, seven, which is the big biggest change. We had the biggest breaking change for the npm cli, so basically, the way it works is that the the client goes a long way to make sure it can actually work with the ecosystem of packages out there today.

B

So basically, what we have by default is a very loose mode that will try to be uh very permissive with possible errors, you're getting out there from from basically nested dependencies right that you can't really control with within your project. So in this case, it's like you can just declare a pure dependency and an np, simple, npm installer, make sure to put everything in place, uh but you might still run into errors in the case where the peer dependency problem is is actually in your direct dependencies.

B

So these are the cases where you might actually run into a e-resolve error, and uh then the thing where the client is doing here is trying to make it more transparent. How to act on this problem, where I can fix your dependency tree, and I think it's also important to notice uh we're also adding an escape hatch. So basically, we have the legacy peer depth option.

B

You can npm install using a legacy peer gaps, option that basically will ignore anything uh all the all the works, all the peer dependencies, just like npm six would install, and so basically, if you have, if you're phrasing problem, that's a good way to maybe bypass it. While you wait for uh the projects you're depending on to fix their dependency tree.

B

uh But on the other hand, we also have a strict peer adapts uh option that this might be also more helpful to package authors and people like that have more impact on the ecosystem, so that they can make sure their dependency tree like it's perfect and they can quickly act on it or or at least have a more actionable output uh quickly, telling them. Okay, there is a problem within the dependency tree, install yeah.

B

So let me just quickly go ahead here with or our tutorial and let me add a peer dependency to to this workspace right and, let's see how the client takes care of that. So basically, here I'm gonna add a very simplistic package as a peer dependency of a and now, if I run another npm install from my top level, I can see that it's not there.

B

Oh no, it is there. It is there yeah the thing here. I just read into another uh very small, breaking change. We did in uh npm seven, which is uh yeah npm ls. Now it's going to list only the top level dependencies. So this is a more quality of life change. We did because dependency, trees, installs these days are so large right, it's hard to get a usable output out of that.

B

So, if you want to see the entire install tree, you got to use all so npm ls dash dash all will show your entire yeah. That is a very small npm, 7 change, it's more of a quality of life change and it's good that I hit into it, and I could also show it in the demo. So let me go ahead and start with npm 6 install here so that we can get the previous package lock format, and then we can do an npm 7 install and we can compare the changes.

B

So let me run an mpm6 install. uh I got a package log file here. Let me track that.

B

And now let me go here and npm install using my npm7 cli, and then we can run into the differences here yeah. So we can see that there is a warning that we just upgraded uh your package lock version there is this warning here, basically because for very very large projects it might take a while, so it also mentioned that. But basically, if we look at the differences here, uh you can see that we update the log file version.

B

uh So that is just to signal that this is a log file v2 and uh that, but that's still backwards, compatible right to what we had before. So basically, it adds this new package section to it, which is the yeah I was looking for. uh The word is a more deterministic way to reproduce the install tree later yeah. So here we can, you can also see the the dependencies got updated yeah.

B

I think I can also see that the abraf dependency is now part of the package lock, since npm 7 is tracking the peer dependencies now.

A

Yeah well appreciate you walking through these different features for npm 7, also the little hidden feature. You said with the npm ls as well uh good to point that out uh last question: where can folks sort of keep up to date with the changes and track future releases for npm.

B

Right yeah, I think right now the best place to track all the changes would would be the npn cli repo on github right, so that would be github.com npm cli.

B

We have a very good changelog that we keep there in the github releases, so that will definitely be the best way to keep up with uh anything new changing in the cli.

A

If you're interested in keeping up to date with github and checking out new features, definitely keep an eye on this playlist, speaking of which, why don't you watch the next.

A