包管理工具 | 任先生的笔记库

# 安装vue2的最新版本
npm vue@2

# 查看包版本列表
npm view vue versions

# 一、包管理

# 1、npm 工具

Node.js 下载好的同时其实也安装了 npm(包下载工具),我们可以使用 npm 在包共享平台下载包(例：npm registry (opens new window))

其中，下面的i是install的简写，un是uninstall的简写，-S是--save的简写，-D是--save-dev的简写。

npm 5.0.0 之前，有 --save 参数才会把模块写入到 packages.json

# 1、下载【🚩 全局包】【在电脑本地上】
npm i [包名] -g
# （例如：nrm、nodemon、cnpm、yarn）

# 2、下载开发依赖包【开发环境】【devDependencies节点下】
npm i [包名] -D
# （例如：webpack、babel、vue-loader）

# 3、下载核心依赖包【生产环境】【dependencies节点下】
npm i [包名] [包名] [包名] -S
# （例如：md5、vue、dayjs）

其他命令

官网：https://docs.npmjs.com/cli/v9/commands

# 下载所有包
npm i

# 卸载包
npm un [包名] [-g]

# 升级包
npm update [包名]@<版本号>

# =================

# 查看全局包在本地电脑的位置
npm root -g

# 查看已安装的npm包（及其依赖包）
npm list [-g]

npm list [包名]

# =================

# 查看缓存在本地电脑的位置
npm config get cache

# 清除缓存🎈
npm cache clean --force

registry 切换

# 1、手动切换
npm config get registry
npm config set registry https://registry.npmmirror.com/

# 2、通过 nrm 自动切换
npm i nrm -g
nrm ls
nrm use taobao

npm i

npm install 原理

package.json 为较宽松的版本管理
package-lock.json 为较具体的版本管理

npm 5 开始，npm 支持缓存策略

npx 工具

npx 是 npm5.2 之后自带的一个命令

# 2、cnpm 工具

cnpm 相当于中国的一个 npm 镜像。Node.js 没有自带，要单独下载。

# 1、下载cnpm
npm i -g cnpm --registry=https://registry.npm.taobao.org

# 2、使用cnpm
cnpm i [包名]
# 【使用时其命令和npm一样】

但如果使用 cnpm 的时，一定明确 cnpm 的缺陷，再使用它：

缺陷

包管理策略：它可能会默认安装一个旧版本的包
依赖管理方式：有时我们使用 cnpm 案例一个包 A 是，它可能会安装一个旧版本的依赖包 B
缓存机制：如果你在使用 npm 安装了一个包的最新版本，但在使用 cnpm 安装同一个包时，cnpm 可能会在缓存中使用 npm 下载的包，这可能会导致 cnpm 无法正确更新包的版本

一般情况下不要使用 cnpm，更不要使用 cnpm install 命令。

所谓的 cnpm 可以提高下载速度只不过是一个幌子（前面我们已经提到了使用 nrm 也可以切换 npm 安装镜像），现在其主要的作用是：

一些包由于版本问题或者其他原因，npm 安装时可能会出现依赖冲突或者无法解析的问题；

但 cnpm 可以使用更灵活的依赖解析方式来避免这些问题，并且在出现依赖冲突时，会尝试自动解决依赖冲突并安装正确的版本

所以使用 cnpm 通常用于解决某些包安装不成功的问题。但这又会导致一个问题：一个项目中同时使用了 npm 和 cnpm（这是我们不想看到的）：

npm 与 cnpm 冲突

使用 npm 报错

npm cache clean --force
rm -rf node_modules
npm install

使用 cnpm 报错

cnpm cache clean --force
rm -rf node_modules
cnpm install xxx

# 3、yarn 工具

-yarn (opens new window)是最近流行的新的包下载工具，其特点是下载包速度 🍗 超快、超安全。同理，Node.js 没有自带，要单独下载。

yarn 是 Facebook、Google 等联推出的新的 js 包管理工具，并且 react 默认采用的就是 yarn

注意

记得把：C:\nvm\v18.14.0\node_modules\yarn\bin 添加到环境变量中。

# 初始化项目
yarn init

# 查看当前yarn源
yarn config get registry

# 修改yarn源（此处为淘宝的源）
yarn config set registry https://registry.npm.taobao.org

# 1、安装yarn
npm i yarn -g
yarn --version

# 2、使用yarn
# 全局包（不推荐）
yarn global add [包名]

# 开发依赖包
yarn add [包名] -D

# 核心依赖包
yarn add [包名]

其他命令

# 下载所有
yarn [install]

# 卸载包
yarn remove <包名>

# 升级包
yarn upgrade [包名]@<版本号>

# 查看当前yarn的全局安装位置
yarn global dir

# 查看已安装的包
yarn [global/cache] list

有时，我们在使用 Yarn 时，一些可能出现的问题：

问题描述

yarn cache clean
rm -rf node_modules
yarn install

# 4、pnpm 工具 🎈

描述：

pnpm (opens new window) - 速度快、节省磁盘空间的软件包管理器

参考：

https://juejin.cn/post/7168871624052047880

硬链接与磁盘

① 节省磁盘空间

node_modules 中的所有文件（依赖包）均克隆或硬链接自统一的存储位置
同一依赖包的不同版本，仅有版本间不同的文件会被存储起来

② 非扁平化处理

pnpm 创建的 node_modules 默认并非扁平结构，因此代码无法对任意软件包进行访问

大量的软链接，大量的嵌套复用，极少的磁盘空间

pnpm 的 store 存储

在 pnpm7.0 之前，统一存储在自己电脑的 ~/.pnpm-score中

当然，我们也可以直接通过命令进行获取路径：

pnpm store path

为了减少 pnpm 的 store 体积，我们可以手动删除一些未被引用的包来释放 store 的空间

pnpm store prune

③ 常用命令

# 初始化项目
pnpm init

# 1、安装yarn
npm i pnpm -g
pnpm --version

# 2、使用yarn
# 下载依赖包
pnpm add [包名]

# 下载所有
pnpm [install]

# 卸载包
pnpm remove <包名>

④ 发展现状

一些较新、较大的开源库已经开始提供 pnpm 方式了，但普及还需时间验证

较为流行的 react 组件库 AntD、MUI 等
最新的 vue 组件库 Element Plus 等
还有 Prettier、vitepress、vue2 源码、等 vue 源码项目

# 二、常见问题

# 1、依赖检查

有时候，我们会发现从其他地方 clone 下来的代码无法运行，或者做在自己电脑上能运行的项目在别人电脑上却不能运行。

这种情况大概了是包依赖问题导致的，此时我们可以使用depcheck (opens new window)来解决这个问题。

# 安装
npm install -g depcheck

# 使用
depcheck [directory] [arguments]

需要注意的是官方说了 Depcheck 只是遍历所有文件，并尝试根据一些预定义的规则查找依赖项。所以这会导致在某些情况下，依赖项正在使用但报告为未使用，或者依赖项未使用但报告为缺失。

解决方案：

.depcheckrc

ignores: ["eslint", "babel-*", "@babel/*", "@vue/*", "prettier"]
skip-missing: true // 表示不呈现项目中使用到但是在package.json里面没有的包，默认为false

# 2、依赖冲突

项目开发中可以先查看：

package.json

{
  "engines": {
    "node": ">= 12.0.0",
    "npm": ">= 6.0.0"
  }
}

然后根据需要升级或降级 Node.js 版本。

为了防止我们使用 Yarn、npm 和 cnpm 时，发生各种冲突问题，我们可以做如下操作：

在项目中只使用一种包管理器

npm install
# 或者
yarn install

使用 lockfile 锁定依赖包的版本

lockfile 文件记录了项目依赖包的精确版本信息，包括依赖关系、版本号、下载地址等

缺陷：当存在 lockfile 的情况下，即使有新的补丁包存在，都可能不会被使用

# package-lock.json
npm ci

# 或者

# yarn.lock
yarn install --frozen-lockfile

# 三、第三方包

Node.js 下载好的同时其实也安装了 npm(包下载工具),我们可以使用 npm 在包共享平台下载包(例：npm 网站 (opens new window))

前面，我们不知不觉的已经接触了许多第三方模块（包），如下：

# 1、辅助类 ✨

@types/node

下载它可以有 node 代码提示

nodemon、node-dev

以 nodemon 为例，可以监听变化

// 1、node原生测试
npm i nodemon -g
// 使用：
nodemon app.js

// 2、express框架中
npm i nodemon -D
// 使用方式1：
nodemon ./bin/www
// 使用方式2：
npm start
// 配置：
{
  "scripts": {
    "start": "nodemon ./bin/www"
  },
}

# 2、应用类

moment、dayjs
cheerio
art-template
mime

// 1、moment、dayjs包
console.log(moment().format('YYYY-MM-DD HH:MM:SS')) //2022-04-15 15:43:22

console.log(dayjs().format('YYYY-MM-DD HH-mm-ss')) // 2022-04-15 15:27:19

// 2、cheerio包
function spider(data) {
  let $ = cheerio.load(data)

  let $moviewlist = $('.column.content')
  let movies = []

  $moviewlist.each((index, value) => {
    movies.push({
      title: $(value).find('.title').text(),
      grade: $(value).find('.grade').text(),
      actor: $(value).find('.actor').text()
    })
  })

  return JSON.stringify(movies)
}

// 3、mime包
function readStaticFile(req, res) {
  const myURL = new URL(req.url, 'http://127.0.0.1:3000')

  console.log(mime.getType(myURL.pathname.split('.')[1]))
}

← Node基础【npm包开发】 →