最近包管理工具从npm转为yarn ，虽然之前用过yarn ，但都是比较简单的命令，比如
yarn add：之前以为类似于npm install，但是使用其一直报错，百度发现其实不是，yarn add是安装具体的包，后面接的是具体的包名，比如yarn add xxx。安装package.json里面的所有包，要用yarn installyarn serve：运行项目
简介
yarn 和npm类似，包管理工具，主要是对package.json中写明的包进行安装。yarn的出现解决了npm目前面临的问题，比如npm install安装的是最新的包，不同的人不同的时候安装会出现很多问题，yarn就不会，他会安装dependencies、devDependencies中写明的包版本
yarn相较于npm的优点
yarn是异步安装，npm是同步安装，安装完这一个依赖才能安装下一个yarn安装速度比npm快yarn可以锁定安装版本，生成yarn.lock，不会出现奇奇怪怪的问题，npm5也解决了这个问题，生成的是package-lock.jsonyarn可以实现离线缓存，npm不可以
注：yarn，npm项目可以相互切换，一般情况下问题不大，但也存在少数情况npm和yarn不相互兼容
yarn和npm命令对比
| 作用 | yarn | npm |
|---|---|---|
| 初始化package.json文件 | yarn init | npm init |
| 安装所有依赖包 | yarn install | npm install |
| 安装具体依赖包 | yarn add [package] | npm install [package] --save |
| 删除具体依赖包 | yarn remove [package] | npm uninstall [package] |
| 安装依赖包到开发环境（dev）,其他环境依次类推（–optional等等） | yarn add [package] --dev | npm install --save-dev |
| 重构依赖 | yarn add --force | npm rebuild |
| 运行项目 | yarn serve | npm run serve |
| 全局安装依赖包 | yarn global add [package] | npm install [package] -g |
| 在指定范围内升级依赖包版本 | yarn global upgrade | npm update --global |
| 在指定范围内升级依赖包版本 | yarn upgrade | rm -rf node_modules && npm install |
| 清除缓存 | yarn cache clean [package] | npm cache clean |
| 安装不锁定版本的依赖包 | yarn add --no-lockfile | npm install --no-package-lock |
安装yarn工具
可以用命令安装，也可以当官网直接下载安装
// -g 安装到全局环境下
npm install yarn -g
安装package.json中的所有依赖包
- yarn install
- yarn
会生成yarn.lock文件
常见的使用命令
- yarn add xxx：安装具体的某个包
- yarn serve：运行项目
- yarn build：编译项目
- yarn -v：yarn版本
- yarn init：初始化项目
安装在不同位置的命令
一般依赖包根据不同的情况会安装到不同的类别中去，比如构建项目需要的依赖包，运行项目需要的依赖包等等，具体见下面的结构（yarn官网提供）
{
"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"
}
}
下面是我的项目的package结构
{
"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"
}
}
注：由此可见，项目中用的比较多的是dependencies、devDependencies类别
安装在****dependencies 中**
正常依赖项，或者说是运行代码时需要的依赖项
yarn add [package]
安装在devDependencies中
开发依赖项，比如开发过程中需要的依赖项
yarn add [package] --dev
安装在peerDependencies中
对等依赖项，一般只有你发布自己的包才会有用
yarn add [package] --peer
安装在optionalDependencies中
可选依赖，就是可有可无的依赖，安装失败也会提示安装成功
yarn add [package] --optional
升级依赖包命令
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
删除依赖包
yarn remove [package]