Cause: a project that hasn’t moved for two months is pulled down from Git and suddenly stopped running? After the operation, it is found that the incompatibility is caused by the dependency update, and the loss of a modifier……
I. Introduction to the environment
1. nvm
Scenario introduction: When we were developing a project, we had an old project with node 4x installed, and then a new project with Node 8x installed, so we had to switch between the two versions, so how do we manage the node version? This is where NVM comes in…
1). What is NVM
- NVM (Node.js Version Manager) is a command line application that helps you quickly update, install, use, and uninstall the local global Node.js version
2). Install
- To access Github, click on the latest version of nVM-setup. zip to download it locally and install it
- Open CMD and enter NVM -v to check the NVM version number and ensure that the installation is successful
- Set the address of node and NPM image, go to the NVM installation directory (NVM root can view the NVM installation directory), find setting. TXT and add the following two lines
node_mirror: https://npm.taobao.org/mirrors/node/ node_mirror: https://npm.taobao.org/mirrors/node/ Copy the code
- Install the nodeJS version you want, both NPM and nodeJS must be successful
- The NVM list available command displays the available NodeJS versions
- NVM install Version Number Installs node of a specified version
- NVM ls View the installed Node version
3). Common commands
| The command | meaning |
|---|---|
| nvm -v | View the NVM version number |
| nvm list available | Check the versions that can be installed on the network |
| nvm list/ls | View the installed version |
| NVM install (uninstall) Version number | Installs (uninstalls) the specified version |
| nvm use | Switch to the specified version of Node |
| nvm use | Switch to the specified version of Node |
| nvm alias | Add aliases to different version numbers |
| nvm unalias | Delete a defined alias |
| nvm root [path] | Set and view the root path |
2. nrm
1). What is NRM
- NRM Full name NPM Registry Manager is the mirror source management tool for NPM. Sometimes foreign resources are too slow to use this tool to quickly switch between NPM sources.
- NPM config set Registry registry.npm.taobao.org
2). Install
- We can install NPM directly: NPM install -g NRM
- Run the NRM -v command to check the version and check whether the installation is successful
3). Common commands
| The command | meaning |
|---|---|
| nrm -V | View the NRM version |
| nrm ls | View all sources on this machine (where * is the source currently in use) |
| nrm use [name] | Switch the source |
| nrm add [registry] [url] | Add a source (where reigstry is the source name and URL is the source path) |
| nrm del [name] | Delete source (name = source name) |
| nrm current | View the source currently in use |
| nrm test [npm] | Test speed (test the response time of the corresponding source), source name optional |
The NRM switch source can be used not only for NPM, but also for YARN, and of course we can use CNPM (sometimes with some weird problems).
Second, NPM foundation
1.npm
1). What is NPM
- NPM, fully known as Node Package Manager, is a Node.js-based Package Manager, which is the most popular and supports the most third-party modules in the entire Node.js community
- NPM is designed to make it easier for developers to share and reuse code
- Basic concepts of notice
- Package: describes a file or directory that may or may not depend on other packages
- Package manager: a tool for managing packages. You can view information about package versions, dependencies, and authors
NPM has a built-in NPX tool in version 5.2, which can also be manually installed using NPM install -g NPX, mainly used to call the project locally installed modules in the terminal, thus avoiding the installation of some global packages.
- Call the package installed in the project: If we have Webpack installed in our project and want to execute webpack-related commands, if we execute them directly in the project directory, it will go to the global package lookup. To avoid this, we can only define the commands in package.json scripts and run them through NPM run. If you use NPX, you avoid this situation because it looks locally in the project first.
npx webpack --v
- Avoid global installation modules: when using some scaffolds, you need to install them globally before using them, not if using NPX.
npx vue create demo
Package manager 3). NPM common command
| The command | meaning | extension |
|---|---|---|
| npm init | Initialize to generate a new package.json file | NPM init -y(yes) Default setting, skip the question |
| NPM search < search term > | Search the NPM repository, which can be followed by strings or regular expressions | If you change the image source of NPM, you need to switch to the official SOURCE of NPM when searching for packages |
| NPM install | Install (can be abbreviated as I) | -g (global installation), -s (production dependency), -d (development dependency) |
| NPM uninstall < package name > | Uninstall packages | |
| NPM update < package name > [configuration] | Update package | |
| npm list | Lists all modules installed for the current project and the modules they depend on | NPM list-global Lists globally installed modules |
| NPM info < package name > | View details about each module | |
| npm set xxx | Setting environment Variables (Basic information) | NPM set init-author-name ‘Your name’, NPM set init-author-email ‘Your email’ etc |
| NPM publish [configure] | Publish a package | -tag beta: specifies the tag. The default is the version number, for example, NPM publish –tag beta |
| npm cache clean –force | Clear the cache | To speed up the installation of packages, NPM will cache them locally during the installation and copy them directly from the cache when they are installed again. Using this command, you can clear the cache. |
2.yarn
1). What is it about Yarn that Facebook, Google, Exponent and Tilde have teamed up to create a new JS package management tool that, as the official documentation says, is meant to remedy some of NPM’s shortcomings
- Install too slow
- There is a security risk because NPM allows packages to run code at install time
Advantages of YARN:
- High speed and concurrent installation: Both NPM and Yarn perform a series of tasks during package installation. NPM executes each package in a queue, meaning it must wait until the installation of the current package is complete before further installations can proceed. Yarn synchronizes all tasks to improve performance
- More concise output: The output information of NPM is verbose. When NPM install is executed, all installed dependencies are continuously printed from the command line. Yarn, by contrast, is much cleaner: by default, it combines emoji to print the necessary information visually and directly, and also provides commands for developers to query additional installation information.
- Better semantics: Yarn has changed the names of some NPM commands, such as YARN add/remove, to feel cleaner than NPM’s original install/uninstall.
See the difference between NPM and YARN. How do we choose? 2). Yarn and NPM command list
| npm | yarn | meaning |
|---|---|---|
| npm install(npm i) | yarn install(yarn) | Install all dependencies according to package.json |
| npm i [package] –save | yarn add [package] | Add the dependency package to Dependencies |
| NPM I [package] – – save – dev | Yarn add [package] – dev | Add the dependency package to devDependencies |
| npm i -g [package] | arn global add [package] | Install global dependencies |
| npm update –save | yarn upgrade [package] | Upgrading dependency packages |
| npm uninstall [package] | yarn remove [package] | Removing dependency packages |
Same operation command
| npm | yarn | meaning |
|---|---|---|
| npm run | yarn run | Run the predefined scripts in package.json |
| npm config list | yarn config list | Viewing Configuration Information |
| npm config set registry url | yarn config set registry url | Set the source |
| npm init | yarn init | Class to create a package.json file |
| npm list | yarn list | View the installed Node packages in the current directory |
| npm login | yarn login | Login (save your username, email) |
| npm logout | yarn logout | Logout (delete your username, email) |
| npm outdated | yarn outdated | Check for obsolete dependency packages |
| npm link | yarn link | Link dependency packages at development time for use in other projects |
| npm unlink | yarn unlink | Unlink dependent packages |
| npm publish | yarn publish | Publish packages to NPM |
| npm test | yarn test | Test response speed |
| yarn info | yarn info | Displays package information |
Reference article: Reference article: [front-end engineering] Article two white flaws – package manager
Iii. NPM progression
1. NPM version solidification (lock dependent version)
Due to this, the framework group updated a dependency that was incompatible with the main project, causing my project to suddenly die… So, to start with, is it necessary to lock the version? 1).npm version management
- Version format:
- Major version Number. This version number. Revision number
- Version control character:
"Test", "1.0.0-2.9.7", / / in between the version of the "test" : "> = 1.0.0 < 2.9.7", / / operator version control among (between) "test" : "1.0.1", / / fixed version "test" : "1.0.3 | | 1.0.8", and/or operations "test" : "http://www.baid.com", / / the specified version download address instead of "test", "^" 1.2.0, / / the same major version number "test" : "~ 1.2.3", / / the same major version number and version number "test" : "2 x", / / 2.0.0 above all can "test" : "2.2 x", / / 2.2.0 above all can "test", "the latest", / / the latest version of the "file" : ".. // Download it locallyCopy the code - NPM default
- NPM uses ^ by default, which locks the major version number
2). Version curing method:
- NPM – shrinkwrap. Json:
- Json is similar to package-lock.json. The difference is that the NPM package can be published when it is released.
- Package-lock. json will be ignored if both package-lock.json and NPM-shrinkwrap.
- Usage:
NPM shrinkwrap // generates dependencies that do not include dev dependencies by defaultCopy the code
- package-lock.json:
- Shrinkwrap is not published to NPM as opposed to NPM-Shrinkwrap
- If package.json is changed after nPM5.4.2 and package.json is different from lock file, then NPM will download the latest package according to the version number and semantic meaning in package and update it to Lock when executing NPM I. If the two are in the same state, then NPM I is downloaded according to lock, regardless of whether the actual package version is new.
- Note the different processing when executing NPM I prior to NPM 5.4.2…
- yarn.lcok:
- After all, YARN is designed for the disadvantages of NPM, so it has version control. By default, yarn.lock file is generated, which is determined by package name and version.
- Yran. lock is still recommended for curing, NPM lock in different versions of the difference is a headache.
3). Should the version be locked:
- In my opinion, self-maintained, backward compatible dependencies can be unlocked. If they are dependent on a third party, the version can be locked to ensure that the program is executable. As for the level of locking, it depends on the situation. What do you think?
Reference article: Yarn or NPM version cure how to choose