On NPM, cnpm and yarn

NPM is node JS standard package manager, this article will focus onnpmThe mechanism is discussed and comparednpmAndcnpm、yarnThe difference.

How to install a single NPM package

The difference between dependencies and dev dependencies is not obvious in ordinary front-end projects.

In common front-end projects, such asvueIn the framework, these two mainly specify which dependent packages are actually used in the project code.

Only by installing the two can the program run (because devdependences generally include the running environment dependencies of the program).

In purenodeThe project is different. You can see the dependency configuration of a node project below.

thisnodeProject, install onlydependenciesThe project is ready to run (viaNODE_ENV=production npm i）。 And installeddevDependenciesAfter that, it will let the editoreslintThe detection plug-in starts working, or it can be usedjestConduct unit tests.

This is the real separation of development environment and production environment.

NPM install installs all modules in the dependencies field and devdependencies field of the dependency package by default.

NODE_ When env = production NPM I, only the dependencies module in the dependency package will be installed.

When developing some third packages, we need to pay attention to this and put all the packages on which the project dependsdependenciesYes.

Don’t put some messy bags in, so your bag will become big.

How to use or execute NPM installed packages

such aseslint, if it is executed globally, a global command will be generated.

However, there are some command packages that I only want to install and use in a project. What should I do.

addnpxJust, for examplenpx eslint，npxFirst, it will look for the installed packages in the project, and then look for the globally installed packages. If they are not found,npxThe package will be installed before executing the command.

package. JSON and package lock json

Version system and package json

npmFollow semantic version control standards.

1. What is a semantic version control standard?

Simply put:

1.5.4Is the version number, where

• 1 is the major version number, which represents incompatible API modifications
• 5 is the minor version number, which represents the downward compatible functional addition
• 4 is the revision number, which represents the downward compatibility problem correction

Case 1:

If in1.0.0In, providesmain.anyMethod, and this method is deleted in the new version, then you should publish it2.0.0edition.

If a package often releases large versions that are incompatible with the original version, the library should reflect, otherwise it will be cool soon.

Case 2:

If in1.0.0In, providesmain.anyMethod, which has been added in the new versionmainMethod, effect andmain.anySame, then you should publish1.1.0edition,mainIt is a new method in the next version.

Case 3:

If in1.0.0In, providesmain.anyMethod, which has been fixed in some scenarios of this method in the new versionbugAnd make sure that the unit test has covered all scenarios, then you should release1.0.1Version, fix the problem.

If you are not sure to modify thisbugAfter, whether it will cause inconsistent behavior in some scenes, then you should publish it1.1.0, some of them did not encounter the original scenebugAnd users who only update the revision number can avoid this problem.

2. staypackage.jsonHow to configure the version of a third-party package?

Semverstandard:

• If 〜 0.13.0 is written, only the patch version will be updated: 0.13.1 is OK, but 0.14.0 is not.
• If you write ^ 0.13.0, update the patch version and minor version: 0.13.1, 0.14.0, and so on.
• If 0.13.0 is written, the exact version is always used.
• There are more rules, such as:>、>=、||However, it should not be used very often, so I won’t introduce it.

withvueTaking scaffolding as an example, the generated project dependencies are as follows:

It can be seen that scaffolding related libraries use the mode of only updating patches; Other packages choose to update the minor version number, so as to introduce some downward compatible latest features or optimization functions.

Therefore, only throughpackage.jsonIn this case, the original project and the newly initialized project (with great probability) are actually different.

Even if a patch or minor version should not introduce significant changes, it may introduce defects (you can’t be sure what the updates of each third-party package you use do).

Locked version and package lock json

[email protected] After the release, it was launchedpackage-lock.jsonMechanism.

package-lock.jsonThe versions of each currently installed package will be solidified. When NPM install is run, NPM will use these exact versions.

withvueFor example, inpackage.jsonMedium is^2.6.11Version, while in the actual installation process, the2.6.14Version, and inpackage-lock.jsonIn the file, the version is locked in2.6.14。

staypackage-lock.jsonAfter locking the version, leave this file in thegitIn the warehouse, you can ensure that the dependencies of the original project and the newly initialized project installation are consistent.

If you want to updatepackage-lockVersion locked in, usenpm updateCommand (this command does not update the major version), which can be followedsemverUnder the premise of standard, update the dependent package, and updatepackage-lockThe locked version to the latest version (still locked).

Why?package-lock.jsonFile ratiopackage.jsonHow big is the bag?

becausepackage-lock.jsonIt not only locks the dependent packages in the project, but also locks the dependencies of the dependent packages in the form of dolls, so the whole file will be very large.

There’s another problem here, and that’snpm updateThe dependencies of dependent packages will be upgraded. For a project that has been running stably for a long time, the risk is still high. It is recommended to upgrade a specific package（npm i [email protected]）。

Yespackage-lock.jsonAfter,package.jsonThe version update rule of will not take effect and will be read firstpackage-lock.jsonInstall the package version locked in to ensure that your code base can run smoothly and will not cause problems frequently due to frequent package updates.

If you want to know how many versions of your package are different from the latest package, enternpm outdatedCommand:

LatestIt’s the latest version of this package,WantedThis is the latest minor version of the package under the current major version.

Want to know the actual installed package version

1. Stupid way: gonode_modulesLook inside.
2. Be smart: gopackage-lock.jsonFind it inside, because the actually installed version has been locked inside.
3. usenpm list --depth=0Look at the dependent package version of the whole project.
4. npm view [package_name] version

In practical use, the commands of 3 and 4 are easy to forget if they are not often used. I used to use the first stupid method, and I will use the second method in the future, which is obviously more convenient.

Yarn and NPM

1. Dependent version

In the early daysyarnhaveyarn.lockTo lock the version, which is better thanpackage.jsonMuch better, and the backnpmAlso launchedpackage-lock.json, so there’s not much difference at this point.

2. Installation speed

yarnIt feels better thannpmMuch faster becauseyarnParallel installation dependency is adopted, andnpmIt’s serial.

At present, there is not much difference in the caching mechanism, and the local cache will be read.

3. Which one?

At present, in 2021,yarnThe installation speed is still faster thannpmFast, the difference in other places is not big. It can be basically ignored. You can use any one.

It’s not necessarily good to install too fast. Sometimes, if the installation speed is slow, you can have a cup of tea, a cigarette and have a rest.

In design,yarnYour input will be better thannpmMore ergonomic.

But judging from the company’s network, many people will use itcnpm。

Cnpm and NPM

1. Cnpm is much faster than NPM

Because the image warehouse of cnpm is in China (Taobao computer room), it is more expensive thannpmOf course, much faster. But nownpmWith the addition of caching mechanism, the speed also keeps up. (exceptnode-sass(this thing)

And there are some dependent packages, which are called internallynpm install, so Still slow.

You can alsonpmThe mirror source for is set toTaobao image, it will be a lot faster.

npm config set registry http://registry.npm.taobao.org

2. Cnpm does not have package lock json

This could be a very bad place,cnpmThere will be no problems during installationpackage-lock.jsonAnd even if there arepackage-lock.json，cnpmIt doesn’t matter, just readpackage.json。

This mechanism may cause the dependent libraries in your code to need to bepackage.jsonLock it in, otherwise One day,cnpmYou might be in trouble.

This estimate is usedcnpmThe biggest hidden danger.

3. On the second point, the author’s response

On this point,cnpmThe author’s response is that he does not support it now and will not consider supporting it in the future.

The author mentioned that if the version is locked, many hiddenbugIt may be difficult to repair and may become a problembugVictims of.

For the dependent version may be inconsistent in multiple environments, the author’s reply is to adjust the whole operation and maintenance release system, such as in multiple environmentscnpmAfter verification, it is released to production. (for the author’s scheme, I don’t think it is reliable, mainly because the cost is not proportional to the income, and not every front end has such a large amount of energy)

The author also said that if there isbugIf it is not repaired, roll back the version directly to reduce the impact scope of the fault. （…）

Many people do not agree with the author’s point of view that the risk of locking the version will be much smaller.

In fact, there is a hidden danger that the package you use may not followSemverSpecification, he may send a patch version, make a major change directly, or there is no unit test at all (especially when you use some unpopular packages).

Even the more famous bags, such as chestnuts and Christmas eggs:

stayantdPackage, where3.9.3、3.10.0 ~ 3.10.9、3.11.0 ~ 3.11.5The version includes a Christmas egg.

On Christmas day, allButtonComponents have been added with snowflakes.

If you lock the version at that time, you have a certain probability to avoid this problem.

If you don’t have a locked version, you have a high probability of winning.

4. Some dependency packages don’t work

Some dependency packages cannot be installed with cnpm, but can be installed with NPM. This problem is estimated and solvedcnpmThe way packages use soft links is related (not sure).

The mixed use of cnpm and NPM causes the package to hang. It can be determined thatcnpmThe problem of using soft links. So, try not to mix it up.

5. summary

NPM is the best way to use NPM, which is internal to the companyPrivate mirror sourceIt is also recommended to make itnpm, after allcnpmThere are still some hidden dangers.

Pnpm and NPM

Look at many people Amway, the characteristic is fast.

I feel that this fast or not is not an advantage in the usual development process, and it is not bad for this time.

Consider this when installing dependencies in production containers.

summary

Now?npmIt’s also very useful. It’s better to use itnpm。

If there is a problem with the installation speed, you can build a private servernpmImage source: store some installed packages on the image source.

One last thing

If you’ve seen here, I hope you’d better give me a like before you go~

Your praise is the greatest encouragement to the author, and can also let more people see this article!

If you think this article is helpful to you, please help ingithubUpper lightstarEncourage!