Recently, the package management tool npmhas changed from one to another yarn. Although it has been used before yarn, it is a relatively simple command, such as
yarn add: I thought it was similar beforenpm install, but I kept reporting errors when I used it. Baidu found that it was not.yarn addIt installed a specific package, followed by the specific package name, for exampleyarn add xxx. Install all packages in package.json, useyarn installyarn serve: run the project
Introduction
yarnAnd npmsimilarly, the package management tool is mainly package.jsonto install the packages described in. yarnThe emergence of the solution solves npmthe current problems. For example, npm installthe latest package is installed. Different people will have many problems when installing. yarnIt will not, he will install dependenciesthe devDependenciespackage version stated in .
Advantages of yarn over npm
yarnIt is an asynchronous installation andnpma synchronous installation. Only after installing this dependency can the next one be installedyarnInstall fasternpmthanyarnYou can lock the installation version and generate ityarn.lock, so there will be no strange problems, andnpm5this problem is also solved. The generated ispackage-lock.jsonyarnOffline caching is possible,npmbut not
Note: yarn, npmthe projects can be switched between each other. Generally, the problem is not big, but there are also a few cases npmand yarnare not compatible with each other
Comparison of yarn and npm commands
| effect | yarn | npm |
|---|---|---|
| Initialize the package.json file | yarn init | npm init |
| Install all dependencies | yarn install | npm install |
| Install specific dependencies | yarn add [package] | npm install [package] --save |
| Remove specific dependencies | yarn remove [package] | npm uninstall [package] |
| Install dependent packages to the development environment (dev), and so on for other environments (–optional, etc.) | yarn add [package] --dev | npm install --save-dev |
| refactor dependencies | yarn add --force | npm rebuild |
| run project | yarn serve | npm run serve |
| Install dependencies globally | yarn global add [package] | npm install [package] -g |
| Upgrade dependent package versions within a specified range | yarn global upgrade | npm update --global |
| Upgrade dependent package versions within a specified range | yarn upgrade | rm -rf node_modules && npm install |
| clear cache | yarn cache clean [package] | npm cache clean |
| Install dependencies that don't lock versions | yarn add --no-lockfile | npm install --no-package-lock |
Install the yarn tool
It can be installed with commands, or it can be downloaded and installed directly from the official website
// -g 安装到全局环境下
npm install yarn -g
Install all dependent packages in package.json
- yarn install
- yarn
will generate yarn.lockthe file
Commonly used commands
- yarn add xxx: install a specific package
- yarn serve: run the project
- yarn build: Compile the project
- yarn -v: yarn version
- yarn init: Initialize the project
Commands installed in different locations
Generally, dependent packages will be installed into different categories according to different situations, such as the dependent packages required to build the project, the dependent packages required to run the project, etc., see the following structure for details (provided by yarn official website)
{
"name": "my-project",
"dependencies": {
"package-a": "^1.0.0"
},
"devDependencies": {
"package-b": "^1.2.1"
},
"peerDependencies": {
"package-c": "^2.5.4"
},
"optionalDependencies": {
"package-d": "^3.1.0"
}
}
The following is the package structure of my project
{
"name": "ACTVSOC",
"description": "VSOC",
"version": "1.0.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@casl/ability": "^5.3.1",
"@casl/vue": "1.x",
"@mdi/font": "^6.6.96",
"@mdi/js": "^5.9.55",
"@vue/composition-api": "1.6.3",
"@vuetify/cli-plugin-utils": "^0.0.9",
"@vueuse/core": "^4.8.1",
"apexcharts-clevision": "^3.28.3",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"compression-webpack-plugin": "1.1.2",
"core-js": "^3.6.5",
"echarts": "^5.3.2",
"chart.js": "3.5.1",
"element-ui": "^2.15.7",
"json-bigint": "^1.0.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"nprogress": "^0.2.0",
"prismjs": "^1.23.0",
"vue": "2.6.14",
"vue-apexcharts": "^1.6.1",
"vue-baidu-map": "^0.21.22",
"vue-clipboard2": "^0.3.3",
"vue-i18n": "^8.24.5",
"vue-prism-component": "1",
"vue-router": "^3.5.2",
"vue2-perfect-scrollbar": "^1.5.0",
"vuetify": "^2.6.7",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^7.23.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "2.6.14",
"vuetify-loader": "^1.7.0"
}
}
Note: It can be seen that the most used in the project is dependenciesthe devDependenciescategory
installed in dependencies****
Normal dependencies, or dependencies that are required to run the code
yarn add [package]
installed devDependenciesin
Development dependencies, such as dependencies needed during development
yarn add [package] --dev
installed peerDependenciesin
Peer dependencies, generally only useful if you publish your own package
yarn add [package] --peer
installed optionalDependenciesin
Optional dependencies are dispensable dependencies. If the installation fails, it will prompt that the installation is successful.
yarn add [package] --optional
Upgrade dependency package command
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
remove dependencies
yarn remove [package]