Vanilla JavaScript Projects

Creating Custom Scripts

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Vanilla JavaScript Projects

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

The "Creating Custom Scripts" 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 modifies the package.json file to create a new custom npm script. Custom scripts are key-value pairs. The key is the script's name, and the values are the commands to run. Scripts are executed with npm on the command line.

Preview
Close

Transcript from the "Creating Custom Scripts" Lesson

[00:00:00]
>> If I were to, in my package.json, and that is not, it's not square bracket. Wait, yes, it is square brackets. Okay, if I were in my package.json to add a, all right, let's be reasonable Anjana, okay? [LAUGH] All right. So if I were to add a, [LAUGH] so now we're in VS Code and I'm just gonna open here.

[00:00:26]
Can folks see all right? So I have opened, so what I just did with the code dot is open Code in this working directory, which has such an amazing amount of information here. We have a package.json and we have a whereAmI.js. If I were to write my own script, I can do basically whatever I want at the command line.

[00:00:46]
So I could echo stuff. I could, I don't know, change directories on people [LAUGH] I can do, keep in mind, it'll be a different process. So I can do things like run a Node script, say. So if I copy my super handy dandy find-me script here. Now, yeah, no, it's not an array, it's an object.

[00:01:13]
Okay, so this is going to be a new key value pair in this little scripts object that has all of my script definitions. I literally just type it into the package.json and I save. And now let me open the terminal here. Weird shortcut for that. Okay, so now, now that I have this new script, I can run.

[00:01:36]
I still can run test, same as before. And I also can run npm run find-me. And it tells me what it's doing, it's running this whereAmI.js, and it is doing what the script told it to do. So this is basically the thing we end up doing a lot a JavaScript developers is writing those little words npm run a bajillion times a day, and messing with our package.json as needed.

[00:02:10]
Now, sometimes we mess with it manually like I just did. But there's also, like we saw, the npm init created that package.json for us. There's also other tools and other kind of ways of getting started here that are gonna fill out a whole bunch of useful information in your package.json.

[00:02:29]
We've done it the hard way here so that we can make sure we've got the fundamentals of like, what are the important bits of this package.json? How do we run things from within our NPM package? How do we define new scripts for new, hopefully more useful [LAUGH] things we want to do, etc.

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