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
with 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. NPM 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 NPM 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 the 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.
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, keywords: empty,
and maybe put your own name as the author, the license
we'll leave it as ISC,
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 NPM folder, and it's the package.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 npm.js
and here you can search for the entire world of packages,
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 sillyname.
And all it is, is just a random name generator so you can give yourself a new name that is pretty silly,
like Saltfollower Pickle or Roadtoe 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 npm i.
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 accessed through the Index.js, and now depends
on this NPM package called sillyname.
And in addition, we've got a folder called node_modules that's downloaded all of this code from the NPM
repositories for this sillyname.
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, generateName 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 generateName() 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 sillyname
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.
Waxthunder Foot.
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 CJS.
CJS 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 NPM 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
that "import" 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 ES 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 sillyname.
So that's where it's going to be from.
And I like to use this format where I write import (space space) from module, and then now when I go back
in here and I look for that generateName function, it gets auto-suggested to me.
Whereas if I do it this way, where I write generateName, 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 an 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 sillyname,
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.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. *error*
All right.
Now this is super important.
If you at this point see this error, "SyntaxError: 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.