The difference between NPM and yarn

On Monday , colleagues JJ Let me familiarize myself with the basis of React New projects .
As always , My steps are ：

git clone xxx
npm install
npm run dev

At this time ,JJ Here's the next paragraph for me

git clone xxx
yarn
yarn start

“ Why ,yarn What the hell is it ？ Don't npm More advanced alternatives ？ Why replace npm？ Is there any good place ？”, A series of internal problems emerge . I asked in silence JJ：“yarn with npm The same thing ？”,“ Um. .”JJ Busy typing keyboard , Obviously, this question is not worth asking . I also wrote down a series of questions in my mind just now .

Yarn What is it? ？

“Yarn By Facebook、Google、Exponent and Tilde Joint launch of a new JS Package management tools , just as Official documents Written in ,Yarn To make up for npm Some of the defects of .” This sentence reminds me of using npm It's time ：

• npm install When Great slowness . In particular, it will take half a day for new projects to be pulled down , Delete node_modules, again install It's still the case .
• The same project , During installation There is no consistency . because package.json The characteristics of the version number in the document , The following three version numbers represent different meanings during installation .

"5.0.3",
"~5.0.3",
"^5.0.3"

“5.0.3” Indicates the installation of the specified 5.0.3 edition ,“～5.0.3” Said the installation 5.0.X The latest version of ,“^5.0.3” Said the installation 5.X.X The latest version of . That's the trouble , Often the same project appears , Some colleagues are OK Of , Some colleagues will appear due to different versions installed bug.

• During installation , Packages will be downloaded and installed at the same time , At some point in the way , A package threw an error , however npm Will continue to download and install packages . because npm All logs will be output to the terminal , Error messages about error packets will be in a lot of npm The printed warning is missing , And you'll always You won't notice what actually happened .

With these holes , I began to understand Yarn The advantages of and the problems to be solved .

Yarn The advantages of ？

• Fast . Speed comes from the following two aspects ：

1. Parallel installation ： No matter what npm still Yarn When performing package installation , Will carry out a series of tasks .npm Is to execute each... In a queue package, That is to say, we have to wait until now package After installation , In order to continue with the later installation . and Yarn It's doing all the tasks simultaneously , Improved performance .
2. Offline mode ： If a package has been installed before , use Yarn Get from cache between re installation , No need. npm Then download it from the Internet .

• install Unified version ： To prevent pulling different versions ,Yarn There is a lock file (lock file) It records the version number of the module installed exactly . Every time you add a module ,Yarn Will be created （ Or update ）yarn.lock This file . And that's what guarantees , Every time you pull the same project dependency , The same module version is used .npm In fact, there are ways to use the same version of packages, But it needs to be executed by developers npm shrinkwrap command . This command will generate a lock file , In execution npm install When , The lock file will be read first , and Yarn Read yarn.lock There is a truth in the document .npm and Yarn The difference between the two is ,Yarn By default, a lock file like this is generated , and npm To pass the shrinkwrap Command to generate npm-shrinkwrap.json file , Only when this file exists ,packages The version and information will be recorded .
• More concise output ：npm The output information of is rather lengthy . In execution npm install <package> When , The command line will continuously print out all installed dependencies . by comparison ,Yarn Too much simplicity ： By default , Combined with the emoji Print out the necessary information intuitively and directly , It also provides commands for developers to query additional installation information .
• Multi registration source processing ： All dependency packages , No matter how many times it is indirectly referenced by different libraries , When you install this package , Only from one registered source , Or npm Or bower, To prevent confusion and inconsistency .
• Better semantics ： yarn Changed a little bit npm Name of the command , such as yarn add/remove, It feels better than npm The original install/uninstall To be clearer .

Yarn and npm Command comparison

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	yarn upgrade

npm The future of ：npm5.0

With yarn After the pressure of ,npm Some similar improvements have been made .

1. By default, it adds something like yarn.lock Of package-lock.json;
2. git Rely on Support Optimization ： This feature requires a large number of internal projects to be installed （ For example, in the Intranet development without self built source ）, Or when you need to use unpublished versions of certain dependencies . Before that, you may need to specify commit_id To control the version .
3. File dependency optimization ： Previous versions , If you install a local directory as a dependency , The file directory will be copied as a copy to node_modules in . And in the npm5 in , Will be used instead to create symlinks The way to achieve （ Use local tarball Except for bags ）, Instead of copying files . This will speed up the installation . at present yarn Not yet .

summary

stay npm5.0 Before ,yarn The advantages are particularly obvious . But in npm after , Through the above series of comparisons , We can see npm5 There has been a big improvement in speed and usage , It's worth trying , But not more than yarn.

To sum up, my personal advice is if you have already used yarn, And there are no more problems , It can still be used at present . But if there's compatibility npm Scene , Or being in use npm,cnpm,tnpm The team , And not yet cut to yarn Project , Then you can try it now npm5 了 .