Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Avoid Duplicate Commands by Calling one NPM Script from Another

    Andy Van SlaarsAndy Van Slaars
    npmnpm

    We can get a lot of utility through CLI tools invoked via npm scripts. Many of these tools have APIs with many flags and options, meaning we will frequently find ourselves using the same CLI tool in multiple npm scripts, often with only minor differences. In this lesson, we'll take two very similar npm scripts and see how to remove the duplication by calling one script from another and passing in additional flags.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 If we look at the scripts in our package.json file, we have a dev and a dev:hotscript. If we look at those, we'll notice that those are pretty much identical.

    00:08 We're calling webpack-dev-server. We're passing at the open flag. We're doing that in both. Then we're specifying a config. We're using the same config for both. We're using our dev-config.

    00:19 The only difference is, the hot option passes in this --hot flag. If we ever wanted to make an additional change that applied to both, we'd have to do that in two scripts. That's just going to get cumbersome, and we're likely to leave something out.

    00:35 Let's see how we can remove this duplication. Good news is, we can call npm scripts from npm scripts. I'm going to come into this dev-hot, because this is the one where I'm basically using everything the dev has, and I'm adding a flag.

    00:49 I'm going to take this entire script and remove that. Then in here, I'm just going to do an npm run dev. The only difference is, I needed to pass that hot flag in. I'm going to pass in a double dash, followed by my flag. This is going to tell npm to pass that flag through to the CLI that's run in the other command.

    01:12 We can save this. Now I can come down into the terminal. I can just confirm that this works by doing an npm run dev --hot. That's going to run webpack-dev-server with the open flag, which is why we got a new browser tab. It's going to use our dev-config.

    01:32 We just need to verify that it's passing in that hot flag and everything's still working properly. I'll come in here and I'll make a change to this. We'll just make sure that our browser reflects the change without a full reload.

    01:45 After I make a change to my local state, we'll save the file. We'll see that our exclamation mark has gone away, but our local state remained the same. Our hot flag is successfully being passed in, and everything's working as it was before.

    Discuss

    Discuss