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

Already subscribed? Sign In

Autoplay

    Run Local DevDependencies from the Command Line with npx

    John LindquistJohn Lindquist

    In the past, you've needed to either write a package.json script or use the node_modules/.bin directory to access binaries installed in your node_modules. npx enables you to access the binaries much more easily and try out options before you settle on what you want to add to your package.json scripts.

    npmnpm
    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

    00:00 We'll start by npm init in our project and accept all the defaults. That created our package JSON for us. We can go ahead and npm install lodash, and npm install -- as a dev dependency -- webpack.

    00:17 Usually, at this point, you'd end up writing a script, something like build, and then webpack, and then some options, and then the options you want to test out. With npx, we can test that first by saying npx webpack. That'll access the Node binary, which is bundled in webpack.

    00:35 Lets' create a file, call it index.js. No import and underscore from lodash. Then we'll log out something obvious like _ is array, and pass in an array, so that should be true.

    00:51 To use webpack on this file -- our locally installed webpack -- I can say npx webpack index.js, and then bundle.js or whatever the output file will be named. You can see that ran fine and created our bundle. At this point, you know that our webpack command ran fine and made that bundle.

    01:10 You could go ahead and add that to a script. If you wanted to test out other arguments like npx webpack--optimize-minimize index.js, unbundle that JS, hit enter there. You'll now see that we have a optimized and minimized version of our bundle.

    01:32 I'll go ahead and run our bundle, and you'll see true because this array is an array. Then we can take our command here, copy and paste it as a script, and we know exactly how that will work.

    Discuss

    Discuss