Usage and scenario analysis of npx command in Node.js

npx usage tutorial

Tonight, when I was learning Vue-Cli , I suddenly wanted to try the latest @4.xx version, but the scaffolding version installed locally was @2.xx . Because I didn't want to pollute the global environment, I thought of using the npx command. I encountered many problems along the way. In order to better use npx and distinguish its instructions from npm in the future, I have this note.

Starting from version 5.2, npm added (comes with) the npx command. If it is not installed, please install it manually:

npm i -g npx

The concept of npm and npx

• NPM (Node Package Manager) is a package manager provided by Node.js. You can use NPM to install node.js packages.
• NPX (Node Package Executed) can be understood as a tool for temporarily installing and executing a package

In summary:

• npm focuses on installing packages
• npx focuses on executing packages and is a special execution
  

Usage scenarios of npx (some advantages compared to npm)

Starting from several usage scenarios, I hope there will be a scenario that corresponds to your current scenario, so that you can apply it directly

Use scenario 1: You want to use a package that has already been installed in the project, but you cannot execute it directly (because it is not installed globally, which involves the problem of environment variables)

For this scenario, there are some stupid methods:

• Go to the root directory of the project and execute: node-modules/.bin/包對應的腳本
• Configure npm script : Add方法1 to the scripts in package.json , and then you can execute "npm run custom instructions" for quick execution when needed. This is essentially just an improvement on方法1

A more elegant way is to use npx命令啦:

npx <command corresponding to the package>

# Take less compilation as an example:
npx lessc -v # View the version of the less compiler in the current project

Use scenario 2: A package has been installed globally, and a different version of a package has been installed in the project. You want to use the version of the project

Taking my pitfall tonight as the second usage scenario, I have already installed the @2.xx version of Vue scaffolding globally locally, but I Want to use and have installed the latest @4.xx version in the local project file directory, that is:

# npm i -g vue-cli@2 has been executed
vue -V # [email protected]
# cd my-project has already been executed
npm i -D @vue/cli@4
vue -V # [email protected]

At this time, if you use vue -V you will find that the global version is used, because npm will execute the global package by default. If you want to use the version that the project has already installed, just execute the following command:

npx <command corresponding to the package>

# Take vue-cli as an example:
npx vue create my-project

Usage scenario 3: Do not want to install a package globally or in a project, just want to use it temporarily

For this scenario, npx is a necessary choice. npx will download the files to a temporary directory and automatically delete them after use. Let's take Vue-Cli as an example: This time I suddenly wanted to take a look at the project file structure of React腳手架. Since I haven't learned it yet, I haven't installed it locally or globally (I just want to create a React project with scaffolding temporarily)

npx create-react-app my-react-project #The react scaffolding will be automatically deleted after the project is built

Usage scenario 4: Temporarily use a specific version of the package (not installed locally)

As the title suggests, here I suddenly want to use the @3.xx version of Vue scaffolding, but I have already installed the @2.xx version globally

cd my-vue-project # Enter my vue project npx @vue/cli@3 create big-project # Use the 3.x version of vue-cli to create a project called big-project

Some parameters about npx

1. Install and use a specific version: npx 包@版本號包對應的命令
2. --no-install forces the use of local packages. If the local package is not installed, an error will be reported: npx --no-install vue create my-project
3. --ignore-existing Force installation to use remote modules: npx --ignore-existing vue create my-project
4. -p To install multiple packages at once, use the parameter -p : npx -p @vue/cli -p less Remember: Be sure to use -p when installing multiple packages
5. -c the scenario where multiple packages are installed and used at one time: When executing the npx -p vue-cli -p less lessc -v & vue -V command in an earlier version, it is possible that only the first command item can be executed normally, that is, only the version of the less editor is printed. The -c parameter of npx is to tell npx to execute the specified range of all commands: npx -p vue-cli -p less -c "lessc -v & vue -V" , which can ensure absolute safety. Note: & means both commands are executed, | means the first command is executed successfully and the second command is not executed

The most commonly used and important point in this section is point 5. Based on this summary: No matter how many packages and commands are installed (even if only one package is installed), strictly follow npx -p 包1 -p 包2 -p 包n -c "命令1 & 命令2 & 命令n"

This concludes this article about the usage and scenarios of the npx command in Node.js. For more information on the usage of the Node.js npx command, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!