必须掌握的 npm 知识

前端项目包管理工具 - npm

提到前端项目包管理工具，我们最熟悉的就是 npm（node package manager），即 node 包管理工具。

npm 的功能：

• 管理前端项目依赖的包。

npm 的安装

• 安装：npm 属于 Node 包的一个管理工具，所以我们需要首先安装 Node，安装 Node 的过程中会自动安装 npm 工具，无需手动安装。
• 测试是否可用：在命令行键入 npm -v 显示出 npm 版本号，就说明工具能用
• 更新 npm 版本：在命令行键入 npm install npm -g
• 查询当前镜像：在命令行键入 npm get registry
• 切换淘宝镜像：在命令行键入 npm config set registry http://registry.npm.taobao.org/
• 切回默认镜像：在命令行键入 npm config set registry https://registry.npmjs.org/

npm 的使用：

• 初始化 package.json 文件（这个文件记录项目依赖的所有包信息）
  1. 如何获取这个文件
     • 手动创建项目时，通过 npm init -y生成
     • 通过脚手架创建项目时，脚手架会帮助我们生成，并且在这个文件中添加相关的配置
  2. 我们所需要的模块和依赖都被写入 package.json 文件中
  3. package-lock.json 文件：npm在5.0之后增加的，用来固定包的版本、包的源地址等信息，保证在不同的用户开发环境中加载的是相同的包。
  4. 最后一键安装所有依赖：npm install，简写：npm i
• 下载模块
  1. 下载包时，会自动创建node_modules和package.json文件，但是我们也可以先创建和配置好所要下载的包，然后别人拿到这个文件，只需要执行npm i命令，就可以将项目依赖的包，都一键下载下来
  2. 局部安装：（安装包将自动放在 ./node_modules 下）
     • npm install 模块名称
     • npm i 模块名称
  3. 全局安装：安装包放在 /usr/local 下或者你的 node 安装目录
     • npm install --global 模块名称
     • npm i -g 模块名称
  4. 下载指定版本：
     • npm i 模块名称@版本
  5. 下载多个模块（可以同时下载多个包，多个包名中间用空格隔开）：
     • npm i 模块名1 模块名2
  6. 区分环境安装依赖安装：
     • 生产环境依赖[--save或-S]：
       • 将加入安装包信息到package.json文件dependencies对象中
       • npm install 模块名 --save 或 npm install 模块名 -S
     • 开发环境依赖[--save-dev或-D]:
       • 将加入安装包信息到package.json文件devDependencies对象中
       • npm install 模块名 --save-dev 或 npm install 模块名 -D
     • 可选阶段的依赖[--save-optional或-O]
       • 将加入安装包信息到package.json文件optionalDependencies对象中
       • npm install 模块名 --save-optional 或 npm install 模块名 -O
  7. 指定源安装包
     • 安装全部:
       npm install --registry=https://registry.npm.taobao.org
     • 安装单个包：
       npm install -g 模块名 --registry=https://registry.npm.taobao.org
• npm i 与 npm ci 的区别及使用场景
  • npm i：
    • npm i 将安装所有 package.json 中的依赖。
    • 如果使用^或 ~ 标识依赖的版本，npm i 将精准安装所标识的版本。
    • npm i 会更新 package-lock.json 文件。
    • 适用场景：安装新依赖或者升级已有依赖。
  • npm ci
    • npm ci 会先删除 node_modules 文件夹以确保干净的环境。
    • npm ci 会依照 package-lock.json 里的依赖版本精准安装。
    • npm ci 不会更改 package.json 或是 package-lock.json 文件，整个安装过程是锁死的
    • npm ci 强依赖于 package-lock.json，如果 package-lock.json 不存在，npm ci 将不会工作。
    • 适用场景：在 CI/CD 场景中使用 npm ci 更为合适，一方面，由于 npm ci 依赖于 package-lock.json，依赖版本确保一致，不会出现线上版本和开发版本不一致而引发的问题；另一方面，首次安装时，使用 npm ci 将比 npm i 更快，原因是由于 package-lock.json 的存在，不需要做依赖的版本检查以及梳理各依赖之间的关系。
• 卸载模块
  • npm uninstall 模块名
• 更新模块
  • npm update 模块名
• 检查模块
  • npm outdated
  • 此命令会列出所有已经过时的包
• 查看模块：
  • npm ls
  • 查看所有安装的模块及依赖
• 清理缓存
  1. 验证缓存数据的有效性和完整性，清理垃圾数据。
     键入命令：npm cache verify
  2. 删除缓存目录下的所有数据。从 npm@5 开始，为了保证缓存数据的有效性和完整性，需要加上 --force 参数。
     键入命令：npm cache clean --force（简写：npm cache clean -f）
  3. 特别注意：有的时候，有些包下载到一半，因为各种原因失败了（比如突然没有网了），那么这个下载了一半的包 有可能 会被缓存下来，那么以后你再次下载的时候，就都是失败的状态，那么我们就要清除掉缓存以后，在重新下载，或者在执行完命令再删除缓存文件夹。