preface

I believe that most of the students who have just started the front-end will be accustomed to using NPM or CNPM as the package management tool of our project. I was still using NPM last month. However, while they bring convenience to our daily development, they also come with some problems, such as: Yarn is a direct competitor of NPM. This article will introduce Yarn from what it is, what its advantages are, and how to use it.

I. Yarn’s past and present lives

What is the package management tool?

In years ago the front end of the project, the front-end engineers began to use third-party JS classic tools such as jQuery library, this greatly increased our front end development speed of the project, the front-end engineers method is usually to use it, in official website to download the related versions of JS static files, and then on our own projects, Or use CDN introduction and other methods.

But there are some problems with this approach:

  • If we quotea.jsIt also depends onb.jsandc.jsSo we’re downloadinga.jsAt the same time, downloadb.jsandc.jsFile, and in the file they are referred to in order, if the order is not correct, there will be all kinds of problems.
  • The third-party JS tool library will be updated frequently. As developers, we should pay close attention to the dynamics of the third-party library. If there is an update, we need to download the file again and replace the file in the original project.

After these problems were discovered, a group of pioneering programmers came up with new ideas and ideas, and the NPM package management tool put an end to these problems.

Introduction of NPM

NPM is officially provided by Node.js, and it comes along with some package management specifications:

  • All third party dependency packages are locatednode_modulesIn this file directory, we’re adding, deleting, and upgrading dependencies and just updating dependencies in this file.
  • package.jsonThis project and its dependency and version information are stored in the file, so that we can know what is used in this project and what version it is. There is no need to look for it in many places, as shown in the picture below:

Thanks to NPM, JavaScript has evolved from a poorly typed language to one capable of developing large front-end projects, stabilizing the idea of separating the front end from the back end. However, the NPM installation package has installation speed issues and version issues, and Yarn is used to solve these problems.

2. Yarn Introduction

Yarn is a fast, secure, and reliable package management tool published by Facebook as a project.

  • Speed is fast:YarnEach downloaded package is cached, so there is no need to download it again. It’s also parallel, so it’s faster to install.
  • security: Before executing code,YarnThe integrity of each installation package is verified through algorithms.
  • reliable: Use detailed concise lock file format and clear installation algorithm, soYarnAbility to work on different systems without differences

Yarn contrast NPM

  • contrastnpmInstall dependent speed,yarnYou could say it was completely crushed
  • About the error message,yarnDo more humanized, usenpmIf an error occurs while installing a dependency,npmThe installation log will continue to be printed, and it will be difficult for developers to notice exactly where the installation error occurred

Yarn and NPM can be used at the same time

NPM can be used at the same time. Yarn installs and promotes NPM, and implements most of the commands and functions of NPM. Both follow the package.json file, so you do not need to worry about compatibility issues.

The installation of the Yarn

We recommend you to use the following installation:

npm i yarn -g
Copy the code

3. The Yarn command

We have started Yarn. This section lists and explains common commands used in Yarn development.

Yarn Common commands are summarized

The command explain
yarn create Creating a Yarn Project
yarn init Initialize the project and create a package.json file
yarn add Add the dependent
yarn install All dependencies used to install the project
yarn list Lists installed dependencies
yarn outdated Lists the version information for all dependencies
yarn owner Show dependent author
yarn autoclean Removes and removes unnecessary files from package dependencies
yarn bin Displays the location of the dependency bin folder
yarn versions Display all dependency version information
yarn upgrade Upgrade the specified dependency to the latest version
yarn cache Used to manage user cache dependencies
yarn config Used to manage dependency configuration information
yarn info View information about a dependency, which may not have been installed
yarn depute Delete duplicate dependencies
yarn remove Delete rely on
yarn why Help you find dependencies on this item

The last

⚽ I believe that you have already felt the advantages of YARN, and I hope that you can have the opportunity to try and summarize more in daily development. In addition, other mainstream package management tools include Brower, CNPM, PNPM. I will not introduce them here. Interested students can consult information to understand ~ ⚾ if you are interested in this article welcome to praise attention + collection, more wonderful knowledge is waiting for you! 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript