All language subtitles for 006 The NPM Package Manager and Installing External Node Modules_en

Now, in the last lesson, we looked at how to use some of the native node modules, But in this lesson

we're going to expand our horizons and we're going to learn about the Node package manager or otherwise

known as NPM in order to get access to the world of open source node packages.

So what exactly is the node package manager also known as NPM?

Well, it's basically a place which collects modules that people have built for Node and it's created

by the GitHub organization and it's a really great place to find code that other people have written

where the utilities and tools to help you with writing your node applications.

Now if we think of the native node modules as the toolbox that we have at home, then the NPM or the

node package manager is the place where you'll find all the weird and wonderful tools that you never

thought you would need, but then all of a sudden you realize that your bathtub is leaking and you actually

need to silicone the edges, which, by the way, is not an easy job.

And as a non-professional, you should not take it on.

Don't ask me how I know this is kind of like a community tool library.

So there are people who own weird stuff like Sanders and silicone guns and all sorts of different clippers,

whatever it may be.

And together they've put it into a library so that everyone from the neighborhood can share and use

these tools.

And NPM is kind of like the code equivalent of that.

It's open source and you can search to find all the packages that other developers have created, little

tools that they've written the code for that they think might be useful for other developers in the

future so that you don't have to duplicate the work and to write everything from scratch.

So it's our shared code library, if you will.

NPM comes pre bundled with Node, so if you have Node installed, you will also have installed.

Let's initialize our first project and see how we can configure our project.

Go ahead and download the starting project folder 2.3 NPM, extract it and open it inside vs code in

the index.js.

Again, we have a blank file, but the first thing we're going to do to add to this project is to initialize

NPM.

And to do that we first have to change directory over to this project folder 2.3 NPM, and then we're

going to use the NPM command and then we're going to add the word init.

Now you can go ahead and hit enter and this brings up the initialization utility, which is going to

help us create our configuration file, which is called the Package.json.

It's going to ask us a bunch of questions and we just have to type the answers.

So first it wants to know what is the package name?

We will call it learning NPM, and then it's going to ask us the version which I'll leave as the 1.0

0.0.

So just hit Enter Description.

I'm learning about NPM entry point is the Index.js test command.

We'll leave as empty git repository, empty key empty.

And maybe put your own name as the author the license.

We'll leave it as is.

And then finally you can see it's generated our Json, which is the configuration file for our project.

And then it's asking us whether if this is okay, we can type Y for yes and hit enter.

So now if there is a new file that has been created in our folder and it's the package dot Json, so

this is a way of representing our data, the JavaScript object notation.

And you can see it's very similar to the way that JavaScript objects are structured and it's just key

value pairs describing all of the things that we've entered just now.

This is just a configuration file, nothing magical about it.

Where the magic comes in is when we start installing and using NPM packages and to install an NPM package,

we use the NPM install command and then we add in the name of the package.

So where are these packages?

Well, you can find them by going to MJ.

JS and here you can search for the entire world of package.

Catches, but you would kind of need to know what it is you want to do.

So I want to show you a package that I found earlier, which is called Silly Name.

And all it is, is just a random name generator so you can give yourself a new name that is pretty silly,

like salt, follow a pickle or roto ginger.

But we're going to use this silly package in order to learn some really important concepts like how

to find a package, how to install the package, and then how to use it to install any of the NPM packages.

You'll see the command over here.

So let's copy it and let's go back to our terminal and paste that command in.

Once you've pasted it in, you can see it's actually a shorthand.

NPM.

I is short for NPM install and because you'll be using this command very frequently when you're using

Node, you can simply shorten it down to.

Now in this case we're just installing one NPM package, but if you wanted more packages then you can

enter the names of all the packages you want in one go with a space in between and you'll see me doing

this in our later projects as well.

But in our case, we just want to install this one package and let's go ahead and hit enter.

And once it's installed, if you check the package.json again, you can see it's inserted a new section

called dependencies.

So it's saying now our project, our learning NPM, which is access through the Index.js and now depends

on this NPM package called silly name.

And in addition we've got a folder called Node Modules that's downloaded all of this code from the NPM

repositories for this silly name.

And you can see the code this creator wrote so that we can use this functionality in our project without

having to write all of this code.

Pretty neat.

Now let's collapse those folders, go back into our index.js and take a look at the documentation to

see how we can use this package As usual on the NPM package homepage, you'll see some examples for

how you can use it, and the first thing you can do is to require that package.

So let's paste that in.

At the top, we're creating a variable called generate name that requires this module.

Don't worry too much about the Var.

We're going to come back to that in a minute.

The next step is to use the method called generate name that comes from this module.

Let's copy this as well and paste it in.

Now, in order to actually console.log it, we'll need our console log.

And I'm going to say something like, My name is and I'm using the string interpolation from JavaScript

with the Backticks either side and then the dollar sign and the curly brackets to insert the silly name

that is generated.

Let's add a full stop and add the closing semicolon hit save.

Now we are ready.

We've completed our project going back into our terminal.

Let's use Node to run our index.js.

Hit enter and you can see my name is Spot Runner Bison, which is not too bad actually.

Wax Thunderfoot.

That is a good name.

Now you can see how easy it was to grab a package, download it, insert it into our project, and instantaneously

gain this upgrade and be able to use the code that somebody else created for our purposes in our project.

In a way, it's kind of like playing with Lego.

There's all of these different Lego pieces out there which other people have created or the Node team

has created, and all you have to do is just to plug it into your project.

And by playing and constructing all of these different Lego packages together, you can actually create

something really massive and really impressive and really useful with not a lot of hard work and writing

code from scratch yourself.

Now, this is a good point to mention the Ecmascript modules.

Remember in the last lesson when we learned about the native node modules and I showed you the file

system when we looked at the example code for how to get hold of the package, you can see there is

this toggle ESM or Cjrs.

Cjrs stands for Commonjs and this was the method using require that we used to use to get hold of node

modules, native node modules or even modules.

It was always using that require keyword.

However, since version 12 of Node we've moved on a little bit and Node is now enabled to use Ecmascript

modules.

So instead of using require, we can use the import keyword.

And this basically provides a standardized way of using JavaScript to be consistent on the front end

and the back end.

It also improves things through tree shaking and a whole bunch of crazy things behind the scenes, which

we don't need to get into.

But all it means for us is we can use.

Use that input keyword in order to upgrade our project.

To be able to use Ecmascript with Node, we actually need to go into the Package.json.

Remember I told you that this Package.json comes from NPM but effectively acts as a configuration file

for our project.

So what we can do in here is we can find a location.

So I normally like to go below this comma for main and we can add in a string which is called type.

The type of project we're going to use is going to be module based so that we can use our imports and

use modules instead of using the default, which as of yet right now is the default value, which is

commonjs.

So let's change that to module and let's hit save and let me show you how we can convert this line to

use the new format.

Let's go ahead and write the import keyword.

And then the next thing we add here is the method or object that we want to import, and then we add

the from keyword and a string in order to specify which package or module we want to get hold of this

thing from.

So in our case, our package is called silly name.

So that's where it's going to be from.

And I like to use this format where I write import space base from module, and then now when I go back

in here and I look for that generate name function, it gets auto suggested to me.

Whereas if I do it this way where I write generate name vs code, doesn't actually know what the name

of this method is because we haven't specified the module that it's coming from.

This is just a little bit of a tip for when you need to do this.

So now we can go ahead and get rid of this line and everything still works as perfect.

So now I have a bit of a challenge for you and I want you to bring out the superhero in you.

What do I mean?

Well, we're going to go and find a NPM package called superheroes.

Don't worry if you can't find it.

I've linked to it in the course resources.

And here we've got a package that will allow us to generate a random superhero name.

So your task is to install this package into your project, into that same index.js that we used before

to generate the silly name.

But this time I want you to console.log something like I am and then it's your superhero name and maybe

an exclamation mark just to make it more dramatic.

So that has to come out in the console log using this package, pause the video and see if you can complete

this challenge.

All right.

So firstly, we're going to need to install this package.

So going into our terminal, making sure we're in the right folder, let's install that module and then

once that's done, let's check our package.json to make sure that that dependency got added.

Perfect.

And then let's go back to our code and I'm just going to comment out all the previous code and now I'm

going to use the import to get hold of this superheroes package import from.

And then remember, it's a string called superheroes.

It has to be an S, It has to match the name of your package.

Precisely.

So very often I like to just paste it in and then we need the superheroes object from that package.

Import superheroes from superheroes.

And then we're going to use the superheroes.

Dot random method in order to generate a random name.

So let's create a const and let's set that to our name.

And then we can console log.

I am so and so, which is going to be the name inserted here.

Add an exclamation mark.

Close off the line.

Now I am done.

Let's hit save.

Let's run our code using node.

All right.

Now this is super important.

If you at this point see this error syntax error cannot use import statement outside a module.

This is because you might have skipped over the earlier part of this lesson where we talked about Ecmascript

and how to enable it in our project.

Remember, you have to go into the package.json and add this extra key value pair to set the type of

your project to module based to allow us to use the ES modules.

So let's try this again.

Hopefully.

Now you've added this and now if I go ahead and do Node Index.js, you can see it now works.

I am John Wraith, I am Gertrude Yorkes, I am Piledriver.

That's a much better one.

All right.

So hope you had fun in this lesson.

And we learned about NPM packages and how to install and use them.

In the next lesson, we're going to be building a project that's going to create a QR code from a URL.

So for all of that and more, I'll see you there.