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

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

# 一、包管理

# 1、npm 工具

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

  其中,下面的iinstall的简写,ununinstall的简写,-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]))
}
更新于 : 7/8/2024, 10:21:14 AM