Use of NPM tools, NVM and NPX tools

Time:2021-9-17

Use of NPM commands

Functions of NPM:

  • Allows users to download other people’s written from the NPM serverThird party packageTo local use.
  • Allows users to download and install other written from the NPM serverCommand line programTo local use.
  • Allows users to upload their own packages or command-line programs to the NPM server for others to use.

NPM Download

NPM comes with it after node.v10. No additional download is required.

LTS version: long term support

Note: for some known reasons, it needs to be replaced with a domestic image

Of course, you can view the currently used image first:npm config get registry

The images I currently use are:https://registry.npmjs.org/

have access tonpm config set registry https://registry.npm.taobao.orgChange the image address. Of course, you can also use this method to change back to the original address.

Install cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org

After installation, you can use cnpm to replace all commands of NPM

npm -vUsed to detect whether NPM is successfully installed

Difference between package and module

  • As long as the module can passrequire('')Introduction is a module
  • The package must be described through package.json

Version control of NPM plug-in

Semantic version control: in short, all versions have three numbers

  • The first number is the motherboard. When making incompatible API changes, upgrade the motherboard.
  • The second number is the secondary version. When making incompatible API changes, upgrade the motherboard.
  • The third number is the patch version. When backward compatible defects are repaired, the patch version is upgraded

NPM command

Installation command of NPM package

  • Local installation packages: Usingnpm install <package-name>Install and place on the node_ Modules folder
  • Global installation package:npm install <package-name> -gInstall globally and place in a fixed position.

Typically, all software packages should be installed locally, you can ensure that there are dozens of applications on your computer, and each application can run a different version if necessary. When updating the global installation package, all projects use the new version, which may lead to maintenance nightmares and destroy the original dependencies and compatibility.

Detailed explanation of installation command

Example: NPM install [email protected]  --save-dev
Function: install version 3.9.1 of gulp using NPM
--Save means that it is installed in the current folder. Versions after NPM 5 can be omitted and can be abbreviated as - s as a whole
-Dev saves the installation information in package.json, which is abbreviated as: - D
--Save dev will treat it as a development dependency and add it to the devdependences list
[email protected] It means downloading gulp of version 3.9.1
npm install  [email protected] --Abbreviation of Sava dev: NPM I [email protected]  -S-D

Uninstall command

npm uninstall <package-name>Uninstall the package specified by node.js

npm uninstall <package-name> -gUninstall the global module -g after installing it

If – S (i.e. — save) is used during installation, you must add – s during uninstall and remove the reference in package.json

Similarly, when using – D (- – save DEV), you must add – D when uninstalling

Other commands

Commands (common commands) function
npm list Lists the modules installed in the current workspace
npm list -g View all modules installed globally and find only the main modules
npm list -g --depth=0
npm root -g View the installation path of the global module
If you use the NVM management tool, the location may be different
npm init Create a JSON file and initialize the local development environment
npm update Upgrade all modules of the project in the current directory
npm search <key-word> Search for modules on the network according to keywords
npm view <package-name> View the details of the plug-in on the network
npm view <package-name> version View the latest version of the software
npm view <package-name> versions View all versions of the plug-in
npm publish Release module

NPM plug-in installation

PostCSS

npm install postcss-cli -g

Postcss is a runtime environment for changing the CSS environment using JavaScript

Official explanation: a tool for transforming CSS with JavaScript

postcss-sprites

cnpm i postcss-sprites

Automatically synthesize multiple pictures into one picture (sprite | sprites)

const sprites = require('postcss-sprites');
module.exports = {
    plugins :[
        cssnext,
        stylelint({
            "rules" : {
            "color-no-invalid-hex" true;
            }
        }),
        sprites({
        spritePath : './dist'
        })
    ]
}

postcss-cssnext

cnpm i postcss-cssnext

Downgrade CSS to support earlier browser versions

const cssnext = require('postcss-cssnext');
module.exports = {
    plugins :[
        cssnext
    ]
}

postcss-import

cnpm i postcss-import

Merge multiple CSS files

const postcss = require('postcss-import');
module.exports = {
    plugins :[
        postcss
    ]
}

autoprefixer

cnpm i autoprefixer

Automatically add browser prefix for browser compatibility

//Import in configuration file
const autoprefixer = require('autoprefixer');
module.exports = {
    plugins :[
        autoprefixer({
            Browsers: [0% '] // compatible with all browsers
        })
    ]
}

stylelint

Command line installationcnpm i stylelint

Error correction of CSS text

const cssnext = require('postcss-cssnext');
module.exports = {
    plugins :[
        cssnext,
        stylelint({
            "rules" : {
            "color-no-invalid-hex" true;
            }
        })
    ]
}

Animate.css

npm install animate.css --save

Animation.css is an integration of some CSS animations

cssnano

cnpm i cssnano

Compress CSS

const postcss = require('postcss-import');
module.exports = {
    plugins :[
        cssnano
    ]
}

Use of NVM commands

What is NVM

NVM is used toTools for version control of node

NVM on windows and Linux & NVM tools on MacOS are not a project, they are made by two teams.

Installation of NVM (Linux, UNIX, OS X)

https://github.com/creationix…

nvm(Windows)Installation:https://github.com/coreybutle…

Common commands

NVM install node & NVM install latest

NVM list & the current NPM version of NVM ls

NVM use Taobao switch to Taobao image

Cnpm install – G NVM global install NVM command

NVM – V the version of the current NVM tool

NVM use 8.4.0 uses node version 8.4.0

NVM uninstall version number uninstall node.js of this version

NPX tools

NPX is a tool that can automatically find the executable plug-ins under the current folder (node_modules), correctly reference and execute them. Moreover, if the executable plug-in is not downloaded in the current folder, it will be downloaded and run after searching in the network, and deleted after running successfully. Using this feature, the installation of global modules can be avoided.

The use of the command is similar to the execution method of the original plug-in, but NPM installation is not required:

npx cowsay hello world

It can be combined with a specific version of node,npx [email protected] -v #10.18.1

npx uglify- [email protected] //As with NPM, you can specify the version to be used through @

Parameters that can be added

--no-installForce use of local modules

--ignore-existingIgnore locally existing modules

NPX -- no install HTTP server // force the use of local modules
 NPX -- ignore existing create react app my react app // ignore local modules and generate react app

-pSpecify the module to install

npx -p [email protected] node -v 
NPX - P lolcatjs - P cowsay "hello" // you can specify multiple different commands through - P

-cAll commands can be interpreted in NPX,

NPX - P lolcatjs - P cowsay 'cowsay Hello | lolcatjs' // an error is reported
//By default, only the first executable will use the NPX installed module, and the subsequent executable will still be explained by the shell.
NPX - P lolcatjs - P cowsay - C 'cowsay Hello | lolcatjs' // after adding - C, explain all commands to NPX and run normally

Bring environment variables into the command to be executed

npm run env | grep npm_ //  You can use this command to view some environment variables that provide the current project.
NPX - C 'echo "$npm_package_name" // this code will output the project name of the current project

Execute remote code

NPX can specify to directly execute the code above git, provided that the remote code must be a module and contain package.json and entry script.

Using live server with NPX

usenpx http-server

Recommended Today

Seven Python code review tools recommended

althoughPythonLanguage is one of the most flexible development languages at present, but developers often abuse its flexibility and even violate relevant standards. So PythoncodeThe following common quality problems often occur: Some unused modules have been imported Function is missing arguments in various calls The appropriate format indentation is missing Missing appropriate spaces before and after […]