包管理工具——npm

Node Package Manager，也就是Node包管理器。在前端项目中，经常使用它来管理依赖的包。

安装npm

npm属于node的一个管理工具，所以我们需要先安装Node。Node自带有npm。
Node下载链接

查看、搜索npm包

npm官网在该网站上可以搜索相关的npm包。 :::info 发布包的时候其实就是上传到registry，下载的时候就是从registry中下载。 :::

npm配置文件——package.json

我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目 （Node）。这个配置文件会记录着项目的名称、版本号、描述信息以及依赖库的信息和版本号等。

获得package.json

npm init [-y] # 手动从零创建项目，-y的意思就是所有选项默认yes

:::info 通过框架的脚手架创建项目时，会帮助我们生成package.json，并且里面具有相关的配置。 :::

package.json中常见的属性

• name：名称（必填）
• version：版本号（必填）
• description：描述信息
• author：作者（发布时会用到）
• license：开源协议（发布时用到）
• private：记录当前项目是否私有的，为true时，将无法发布出去。

• main：设置程序的入口 :::warning 这个入口和webpack的入口并不冲突，它是发布一个模块时会用到。
  比如const axios = require("axios")。实际上是找对应的main属性查找文件 :::

• scripts：用于配置一些脚本命令，以键值对的形式存在。配置后我们可以通过npm run <key>来运行脚本。 :::info 对于常用的脚本（start、test、stop、restart）可以省略run，直接通过npm start等方式运行。 :::

• dependencies：指定项目依赖的包（无论是开发时还是生产环境时）。

• devDependencies：指定开发环境需要，生产环境不需要的依赖。

• peerDependencenies：指定该项目所需要的宿主包。

  element-plus是依赖于Vue3的，Ant Design依赖于react、react-dom。

• engines：用于指定Node和npm的版本号。在安装过程中，会检查相应的引擎版本，如果不符合就报错。

• browserslist：打包工具（如webpack）的辅助属性。用于配置JS浏览器的兼容情况。

  依赖的版本管理

  npm包通常需要遵循semver版本规范：
  ^和~的区别：

• ^x.y.z：表示x保持不变，y和z永远保持最新版本。

• ~x.y.z：表示x和y保持不变，z永远保持最新版本。

  npm install

  npm包安装分两种情况：

• 全局安装 npm install <package> -g

• 局部安装 npm install <package>

  全局安装

  全局安装是直接将某个包安装到全局。通常使用npm全局安装的包是一些工具包，比如webpack、yarn等。类似于axios等库文件，全局安装后，并不能让我们在所有项目中使用。

  局部安装

• 安装开发和生产时依赖：

  • npm install <package>
  • npm i <package>

• 安装开发时的依赖：

  • npm install <package> --save-dev
  • npm install <package> -D
  • npm i <package> --save-dev
  • npm i <package> -D

    根据package.json中的依赖安装

    npm install

    npm install的安装过程

    npm5之后：
    

    package-lock.json文件说明

• name：项目名称

• version：版本
• lockfileVersion：lock文件的版本
• requires：跟踪模块的依赖关系

• dependencies：项目的依赖。以键值对形式存在，每个依赖名对应为键，值为对象

  • version：依赖实际
  • resolved：下载的地址，对应registry仓库的位置。
  • requires：当前依赖的依赖。
  • integrity：缓存索引，通过索引可以去获取对应的压缩包文件。

    npm其他命令

• 卸载某个包

  • npm uninstall <package>
  • npm uninstall <package> --save-dev
  • npm uninstall <package> -D
• 强制重新build
  • npm rebuild
• 清除缓存
  • npm cache clean
• 其他相关命令
  • https://docs.npmjs.com/cli/v7/commands

    包管理工具——yarn

    yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具； yarn 是为了弥补 npm 的一些缺陷而出现的； 早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题； 早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题；

    npm和yarn命令对比

    | npm | yarn | | —- | —- | | npm install | yarn install | | npm install <package> | yarn add <package> | | npm install <package> --save | yarn add <package> | | npm install <package> -D | yarn add <package> --dev / -D | | npm rebuild | yarn install --force | | npm uninstall <package> | yarn remove <package> | | npm uninstall <package> --save | yarn remove <package> | | npm uninstall <package> --save-dev | yarn remove <package> | | npm uninstall <package> --save-optional | yarn remove <package> | | npm cache clean | yarn cache clean | | rm -rf node_modules
npm install | yarn upgrade |

cnpm

由于一些特殊的原因，某些情况下没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。

设置npm镜像

此方法不推荐

# 获取当前npm仓库的地址
npm config get registry 
# 设置npm镜像设置成淘宝镜像
npm config set registry https://registry.npm.taobao.org

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
# 或者
npm install -g cnpm
cnpm config set registry https://registry.npm.taobao.org

npx工具

npx是npm5.2之后自带的一个命令。 npx的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。
npx工具的作用就是运行当前文件夹下node_modules/.bin的命令

局部命令的执行

局部命令执行有三种方式：

• 定位到node_modules下执行命令，但此方式太麻烦（不推荐）
• 在package.json中定义script脚本（推荐）
• 使用npx（推荐）

  发布自己的包

  发布包

1. 在官网注册npm账号

2. 在命令行登录

   npm login

3. 修改package.json（设置发布所需要的信息）

4. 发布

   npm publish

   更新包

5. 修改版本号（最好符合semver规范）

6. 重新发布

   删除包

   npm unpublish

   让发布的包过期

   npm deprecate