Run Local DevDependencies from the Command Line with npx
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.
[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.