What is NPX?<\/h4>\n\n\n\n
NPX<\/a>\u00a0is an NPM package executor. Initially, NPX was launched in July 2017<\/strong>.<\/p>\n\n\n\n NPX was just an NPM package that could be installed like other NPM packages. Currently, NPX is bundled with NPM when you install the NPM version 5.2.0 or higher.<\/strong><\/em><\/p>\n\n\n\n It sets up modules such that Node.js can locate the packages and manage the dependencies of that application.<\/p>\n\n\n\n When using NPM, there are two ways to install a package into your local computer.<\/p>\n\n\n\n When you install executables using NPM, Node.js links them either from the local or global path. NPM does not execute a package directly.<\/strong><\/em><\/p>\n\n\n\n To use and run an NPM installed package, you should specify the package in the\u00a0 To execute a locally installed package, it should be specified in the\u00a0 Then, you can execute the package with:<\/p>\n\n\n\n Alternativaly,<\/strong><\/span><\/em> you can execute the same package by typing the local path in a command-line tool.<\/p>\n\n\n\n <\/p>\n\n\n\n Let\u2019s say you have installed\u00a0Eslint<\/a>, a tool for identifying and reporting on patterns found in ECMAScript\/JavaScript code.<\/p>\n\n\n\n To execute the package binaries, you have to point to the package path.<\/p>\n\n\n\n You should provide the file name as the argument to execute for the ESlint package.<\/p>\n\n\n\n NPX comes in to save a couple of keystrokes to make it easier to execute Node.js modules. It makes it easier to run and interact with executables hosted in the NPM registry and to execute NPM local binaries. It also comes with many added features.<\/p><\/blockquote>\n\n\n\n With NPX, you can run and execute packages without having to install them locally or globally.<\/p>\n\n\n\n When running NPM executables with NPX, if a package is installed, NPX will search for the package binaries (either locally or globally) and then run the package.<\/p>\n\n\n\n If the package was not previously installed, NPX will not install the package in your system; instead, it will create a temporary cache that will hold the package binaries. Once the execution is over, NPX will remove the installed cache binaries from the system.<\/p>\n\n\n\n This way, your globals stays clean. This saves disk space and allows you to run a package only when it\u2019s needed. It also gives you the advantage of testing packages without having to install them.<\/p>\n\n\n\n When using NPM, you have to remember to type the path of the package in the command, as explained in the Eslint case.<\/p>\n\n\n\n With NPX, you can have your local packages installed and use NPX commands (instead of adding the whole path) to execute the package binaries.<\/p>\n\n\n\n \u00a0let\u2019s take a Node.js project, for instance where\u00a0Webpack<\/a>\u00a0is installed globally, and the currently installed version is 4.40.3. Webpack is used for bundling project assets. Check out this\u00a0guide<\/a>\u00a0to learn more about configuring Webpack with your project.<\/p>\n\n\n\n When configured, run\u00a0 Let\u2019s try using NPX and run the webpack at version 5.11.1 to see what the difference would look like on the project. Run\u00a0 Here, the results show that the new version will help you buddle your project further with a couple of KBs.<\/p>\n","protected":false},"excerpt":{"rendered":" What is NPM? NPM stands for Node Package Manager. It comes pre-installed with Node.js. NPM is used to install Node.js packages to use them in our application. It makes it easier for developers to share and reuse open source code by enabling them to be installed as modules. Modules are JavaScript packages that you can […]<\/p>\n","protected":false},"author":1,"featured_media":1456,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[145],"tags":[184,406],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1453"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1453"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1453\/revisions"}],"predecessor-version":[{"id":1457,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1453\/revisions\/1457"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1456"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}How does NPM treat Node.js packages?<\/h4>\n\n\n\n
\".\/node_modules\/.bin\/\"<\/code>\u00a0<\/span> of the local project directory.<\/li>\/usr\/local\/bin<\/code>“<\/span>\u00a0for Linux and\u00a0“AppData%\/npm<\/code>“<\/span>\u00a0for Windows.<\/li><\/ul>\n\n\n\npackage.json<\/span><\/code>\u00a0file. The\u00a0package.json<\/code>\u00a0file is created automatically when you initialize your Node.js project with\u00a0npm init -y<\/code> <\/strong><\/em><\/span>(the option -y , automatically answer “yes” to any prompts that npm might print on the command line..)<\/p>\n\n\n\npackage.json<\/code>\u00a0scripts block as shown below.<\/p>\n\n\n\n{\r\n \"name\": \"Your app\",\r\n \"versiuon\": \"1.0.0\",\r\n \"scripts\": {\r\n \"your-package\": \"your-package-name\"\r\n }\r\n}<\/code><\/pre>\n\n\n\nnpm run your-package-name<\/code><\/pre>\n\n\n\n.\/node_modules\/.bin\/your-package-name<\/code><\/pre>\n\n\n\n\u00a0Example<\/strong><\/span><\/h5>\n\n\n\n
npm install eslint<\/code><\/pre>\n\n\n\n.\/node_modules\/.bin\/eslint --init<\/code><\/pre>\n\n\n\n.\/node_modules\/.bin\/eslint yourfile.js<\/code><\/pre>\n\n\n\nUsing NPX<\/h4>\n\n\n\n
.\/node_modules\/.bin\/eslint yourfile.js<\/code><\/pre>\n\n\n\nnpx eslint yourfile.js<\/code><\/pre>\n\n\n\nWhy NPX over NPM scripts?<\/h4>\n\n\n\n
package.json<\/code>\u00a0file with\u00a0node_modules<\/code>\u00a0paths.<\/li>Example:<\/h5>\n\n\n\n
webpack<\/code>\u00a0<\/span><\/em>to get the command results.<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/11\/image-14.png\")
<\/figure>\n\n\n\nnpx webpack@5.11.1<\/code><\/span><\/em>.<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/11\/image-15.png\")
<\/figure>\n\n\n\n