Vanilla JavaScript Projects

Creating a Node Package

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Vanilla JavaScript Projects

Check out a free preview of the full Vanilla JavaScript Projects course

The "Creating a Node Package" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Anjana creates a new npm package using the npm command line tool. A default package.json file contains the details about the module and scripts available for running, testing, and building the project.

Preview
Close

Transcript from the "Creating a Node Package" Lesson

[00:00:00]
>> How did all of these packages get there? How is a package born? And that is what we're gonna do right now, is we are going to birth a new package, bring out of nothingness an npm package into existence. We're not gonna publish it to the interwebs for everyone to see the amazing three lines of JavaScript of node that we wrote [LAUGH].

[00:00:21]
But just to get used to what is an npm package, we're gonna do this. So we're gonna make a new directory, and you don't have to do this at the command line. You can also do this in your file explorer or your finder or whatever it is. We're gonna make a directory.

[00:00:36]
You can call it whatever you want. I very creatively called it where am I. And for some reason there is a convention to use hyphens in the name of packages if we notice, [LAUGH] but I'm honestly not sure if that's enforced or just really a cultural thing. But then we also tend to use camel case for stuff in JavaScript a lot.

[00:00:58]
So it's all over the place, but we're going to create a new directory. We're going to move our beautiful node script that tells us where we are into that directory. Again, you can do this graphically, whatever. And then we're going to move into that directory, change directories in there, and run the command npm init.

[00:01:20]
So now that I have set all of that, let me do it [LAUGH], okay? Did I already have, yes, okay? So I've already got a where am I? And so if we run no, you know what? Start a new. Okay, so if we run, we make a directory.

[00:01:49]
This is not relevant, but whatever. We make our new directory. Where am I? We go into it. We copy. And now is where the fun begins. We run npm init and a whole bunch of stuff comes out. So it is helpfully telling us that essentially npm init is a command we can use to start a fresh new npm project.

[00:02:16]
Yeah, package, and what this is going to do is actually in the end pretty simple. But it is helpful, especially if we're new to npm packages and know ecosystem and everything, to know what's going on. So let's go through it. It's gonna ask me for a name. Sure, the default is fine.

[00:02:38]
Version. Okay, I'm not gonna publish this. A very helpful program is super helpful [LAUGH] tells you which dir you're in. Okay, so I'm gonna give it a description, which were all those things we saw on the npm page. An entry point is gonna be basically what Is the script that you want me to run when somebody tries to run your package.

[00:03:06]
So, there's only one file in here. Test command is something we'll get to in a second. I'm just gonna leave it blank. There's no git repository for this yet. I'm not gonna bother with the keywords. The author is me, but we would put something thing [LAUGH] more useful in there.

[00:03:22]
And we would think about what license we want if we're developing open source. And now, npm is asking us all right, this is what you said. Does that look correct? And if I say yes. Nothing happens. No, something did happen, and what happened is what it just told me it was about to do, it wrote a file called package.json.

[00:03:43]
And this little JSON file, which again, JSON is JavaScript Object Notation. It's just a bunch of keys and a bunch of values. And that is what a npm package essentially is defined by is its package.json. This is like a manifest for what is this package doing? What can you do with it?

[00:04:07]
Where does its code live? Who is it by? What version? Is it all of this stuff, which then npm and all of the information, all the metadata that we saw on the npm website is using to understand this as a usable, wrapped up with a little bow JavaScript program.

[00:04:26]
All right, so this is review for those of us who've been working with No js for a while, but what we now have, if I look in my directory, is I have two files. So exciting. The package.json, that it just wrote with all of these keys and values that look exactly the same as my command line prompts that I filled out.

[00:04:49]
And the only thing that's interesting here is that when it asked me about that test command, it was asking me for a script as we call in here, that would be what happens when I run the test script. Which is defined just in this JSON file by a string called test with some other string of commands that I want to come after node at that at the command line or anything else like echoing stuff.

[00:05:23]
And this is where we end up doing a lot of our developer workflow stuff is some tools, and also ourselves. We'll write little scripts for ourselves that make those repetitive tasks and those really long commands, and lots of flags and stuff easier for us to run from within node.

[00:05:41]
So we'll look at some other options for that later. But the way that these scripts work is if I now run well, okay, so the way that the package now works is that I could run the where am I file directly like we did before, but I can also run this as a program.

[00:06:00]
So, dot representing the current directory. Node now thanks to its buddy MBM knows, thanks to my entry point or main script here. If I'm just running this whole package, what am I running and that's gonna be the same code as if I run node whereAmI.js directly in this case.

[00:06:24]
But in a more complex project, there might be an entry point that then does a whole bunch of other stuff and figures out things, and it looks at different values of the process and bla bla and doesn't just print out a string. But still, this is the basic idea.

[00:06:38]
Now about these scripts, how do I run that? If I do node test, is it that? Module not found. No, that didn't work. So this is looking for something like a file called test, and that's not a thing. This test word is literally just a definition of a key with a value in this JSON file.

[00:07:01]
And so there's a little bit of a different ergonomic thing for this, which is that we run npm run. And then the name of the script that is within the package.json that is in the place where I am currently running npm. Let's just see what that means. So if I run npm run tests, now this is telling me which package is actually I'm executing a script from, this is, where am I version 1.0.0.0, and version 0.0 will probably be more appropriate.

[00:07:41]
And it's the which script I'm running. It's called test. What is the actual value of that script? Well, it was this command to basically print error no test specified to the console and then exit. And that is exactly what it did after that. So, this is just about the most basic script we could do, and it's important to note that like this echo thing, all right?

[00:08:05]
We're not in JavaScript land. We're talking about, in this shell, executing as if I had typed it right here at the command line. Wait, hello, so basically there is a difference between running a JavaScript script that may or may not be exposed as the entry point or the main scripter of your package and a package script.

[00:08:44]
We could think of it, which is essentially useful for doing things that we, as the developer, will need to do while we're working on or in this package. It's not usually something that the end user is gonna be worried about. It's things related to our developer workflow. So that's why test is a very common one.

[00:09:04]
And in the ideal JavaScript world, we would not just be logging like, you forgot to write tests to the console. We would be, to the terminal rather, we would be running a test suite that actually tests that our code does what it says it's gonna do. Which, if I had done, might have caught many of the errors that we have been learning so much from.

[00:09:24]
So good that I didn't do that. But so this is where we're starting to get into the world of like, now we're out of writing JavaScript and we're into like dealing with JavaScript packages and tooling. And so we're gonna look at some other ways that these scripts come into use often, but things like npm run test are very common in a lot of projects.

[00:09:49]
And a lot of the time if you are looking at it a complex code base, and there will be, for example, a script to build it for yourself or a script to run a different version of it or things like that. So there can be whatever script you want.

[00:10:08]
It's arbitrarily defined by the package creator, and it's really just key values, string in your JSON. So that's the magic. That is all of the magic, basically. Now, there's some more magic going on under the hood. And we're gonna take advantage of some of that magic in a bit.

[00:10:27]
So yes, so we've seen this package JSON, I guess it is helpful to have a little coloration. And this is basically whatever words we define as keys and that script file we can then put after npm run.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now