npm、yarn、npx工具说明

npm

Node Package Manager, Node包管理器。

npm是node的一个管理工具，所以安装Node就自动安装了npm
node官网

package.json文件说明

scripts属性

scripts属性用于配置一些脚本命令。格式：key: value
配置后可以通过npm run 命令的key来执行这个命令
npm start 和 npm run start的区别是什么？

• 等价
• 对于常用的start、test、stop、restart、可以省略run直接运行

dependencies属性

存放开发环境和生产环境都需要依赖的包。比如：vue、vuex、react等

devDependencies属性

存放开发环境才需要的包。比如：webpack，babel、eslint等
安装格式：

npm install webpack --save-dev
npm install webpack -D

peerDependencies属性

对等依赖：你依赖一个包，它必须是以另一个包为前提的。比如：
element-plus是依赖于vue3的，ant design是依赖于react、react-dom

版本号说明

安装的版本出现：^2.0.3或~2.0.3，代表什么意思呢？
npm的包通常需要遵从semver版本规范：X.Y.Z

• X主版本号：比较大的更新。比如：不兼容API的修改
• Y次版本号：新功能增加，但是兼容之前的版本
• Z修订号：没有啥新功能，修复了之前的bug

^和~的区别：

• x.y.z： 表示一个明确的版本
• ^x.y.z：表示x是保持不变的，y和z永远安装最新的版本
• ~x.y.z：表示x和y保持不变的，z永远安装最新的版本

常见命令

初始化项目

npm init -y
// 生成package.json文件 记录项目的名称、版本号、描述、依赖库等信息

安装

默认安装开发和生产依赖

npm install xxx
npm i xxx

开发依赖

npm install xxx --save-dev
npm install xxx -D

根据package.json中的依赖包

npm install

卸载

npm uninstall xxx
npm uninstall xxx --save-dev
npm uninstall xxx -D

强制重新build

npm rebuild

清除缓存

npm从版本5开始就支持缓存了

npm cache clean

查看缓存文件：

npm cinfig get cache

更多命令

中文官网
英文官网

yarn

yarn是一个快速、安全且可靠的js包管理工具。

• 快速：yarn本地缓存了每个下载过的包，所以使用时无需重复下载。
• 可靠：使用详细、简介的锁文件格式和明确的安装。配置文件yarn.lock
• 安全：检查每个安装包的完整性

常见命令

yarn中文官网

全局安装

npm install -g yarn

卸载

npm uninstall -g yarn

切换镜像

yarn config set registry https://registry.npm.taobao.org

显示命令列表

yarn help

初始化项目

yarn init

安装所有依赖

yarn
yarn install

添加依赖项

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
npm install [package]

将依赖项添加到不同的依赖类别中

yarn add [package] --dev # dev dependencies
yarn add [package] --peer # peer dependencies

更新依赖项

yarn update [package]
yarn up [package]
yarn up [package]@[version]
yarn up [package]@[tag]

删除依赖项

yarn remove [package]
npm uninstall [package]

更新 Yarn 本体

yarn set version latest
yarn set version from sources

清除缓存

yarn cache clean
npm cache clean

npx

npx是npm5.2之后自带的一个命令。
用处：
全局和局部都安装了webpack。在任意一个目录下输入命令 webpack --version 优先执行的是全局的。
解决方法：npx webpack --version 优先执行局部
上述问题，npm已解决，大概了解一下就行了。