1 nvm

1.1 简介

　　nvm（Node Version Manager）是一个非常有用的工具，可以让您在同一台机器上安装和管理多个 Node.js 版本

　　为什么需要 nvm？

  • 不同项目可能需要不同版本的 Node.js
  • 测试应用在不同 Node.js 版本下的兼容性
  • 方便升级和降级 Node.js 版本

069ba8a7129aa9187252d0c8086089d7_1_20ffnM3_eVpgVGGAbpuDjg

 

1.2 安装 nvm

1）在 macOS/Linux 上安装 nvm

# 使用 curl 安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# 或使用 wget 安装
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# 重新加载 shell 配置
source ~/.bashrc
# 或
source ~/.zshrc

 

2）在 Windows 上安装 nvm-windows：

  1. 下载 nvm-windows：https://github.com/coreybutler/nvm-windows/releases
  2. 下载 nvm-setup.zip
  3. 解压并运行安装程序

3）nvm常用命令

# 查看 nvm 版本
nvm --version

# 列出所有可安装的 Node.js 版本
nvm list-remote
# Windows 上使用
nvm list available

# 安装最新的 LTS 版本
nvm install --lts

# 安装特定版本
nvm install 18.17.0
nvm install 16.20.1

# 列出已安装的版本
nvm list
# 或
nvm ls

# 切换到特定版本
nvm use 18.17.0

# 设置默认版本
nvm alias default 18.17.0

# 查看当前使用的版本
nvm current

# 卸载特定版本
nvm uninstall 16.20.1

 

1.3 实际使用示例

# 场景：为不同项目使用不同 Node.js 版本

# 项目 A 使用 Node.js 18
cd project-a
nvm use 18.17.0
node --version  # v18.17.0

# 项目 B 使用 Node.js 16
cd ../project-b
nvm use 16.20.1
node --version  # v16.20.1

# 为项目指定 Node.js 版本
echo "18.17.0" > .nvmrc
nvm use  # 自动使用 .nvmrc 中指定的版本

 

1.4 查看nodejs安装路径

1） linux

which node

 

2）Windows 

node -p process.execPath

 

1.5 nvm安装nodejs版本问题

1）简介

　　在项目切换的时候遇见的，有的项目需要的node版本较高，有的项目需要的node版本较低，所以一般都是使用 nvm 进行node的动态切换，在一个项目的启动中需要用到较低的node-v14.21.3，在安装时遇见：“ error installing 14.21.3: open …zip: The system cannot find the file specified. ”

C:\Users\...>nvm install 14.21.3
Downloading node.js version 14.21.3 (64-bit)...
Complete
Downloading npm...
Creating C:\Users\...\AppData\Local\Temp\nvm-install-4259417032\temp
 
Downloading npm version 6.14.18... Complete
Installing npm v6.14.18...
error installing 14.21.3: open C:\Users\...\AppData\Local\Temp\nvm-npm-1939299427\npm-v6.14.18.zip: The system cannot find the file specified.

 

2）原因

　　把nvm升级到最新的1.2.2后，就不能支持node-v18.0以下的版本了，所以需要将版本降低到1.1.10。

 

3）解决方法

　　卸载nvm

　　找到nvm安装路径，双击unins000.exe，进行卸载。

2d70519d1bcf113213bafefb8db9fbd1_2025052610364217

 　　安装低版本nvm
　　到nvm官网下载安装程序：https://nvm.uihtm.com/download.html

03d928ae011aad9da7a2e753ed848217_2025052610364218

 

 

 

2 npm

　　https://www.runoob.com/nodejs/nodejs-npm.html

2.1 简介

　　NPM（Node Package Manager）是一个 JavaScript 包管理工具，也是 Node.js 的默认包管理器。

　　NPM 允许开发者轻松地下载、安装、共享、管理项目的依赖库和工具。

　　NPM 是 Node.js 自带的包管理工具，因此，通常你只需安装 Node.js，NPM 就会自动安装在系统中。

 

2.2 主要功能

  • 包管理：NPM 可以帮助你安装并管理项目所需的各种第三方库（包）。例如，可以通过简单的命令来安装、更新、或删除依赖。

  • 版本管理：NPM 支持版本控制，允许你锁定某个特定版本的依赖，或根据需求选择最新的版本。

  • 包发布：NPM 允许开发者将自己的库发布到 NPM 仓库中，其他开发者可以通过 NPM 下载并使用这些库。

  • 命令行工具：NPM 提供了强大的命令行工具，可以用于安装包、运行脚本、初始化项目等多种操作。

 

2.3 常用命令

1）查看npm版本

npm -v

 

2）升级到npm最新版本

npm install npm -g

 

3）使用npm安装模块

npm install <Module Name>

如安装常用的 Node.js web框架模块 express

$ npm install express

 

4）查看所有全局安装的模块

npm list -g

 

5）查看某个模块的版本

 npm list grunt

 

6）查看安装的模块

npm list

 

7）更新模块

npm update express

 

8）卸载模块

npm uninstall express

 

9）查看 npm 全局包安装路径

npm config get prefix

 

10）查看 npm 配置

npm config list

 

2.4 更多命令

命令说明
npm init 初始化一个新的 package.json 文件，交互式输入信息。
npm init -y 快速创建带有默认设置的 package.json 文件。
npm install package-name 本地安装指定包。
npm install -g package-name 全局安装指定包，使其在系统范围内可用。
npm install 安装 package.json 中列出的所有依赖。
npm install package-name --save-dev 安装包并添加到 devDependencies。
npm update package-name 更新指定的依赖包。
npm uninstall package-name 卸载指定的依赖包。
npm uninstall -g package-name 全局卸载指定的包。
npm list 查看当前项目的已安装依赖包列表。
npm list -g --depth=0 查看全局已安装的依赖包列表（不展开依赖树）。
npm info package-name 查看包的详细信息，包括版本和依赖等。
npm login 登录到 NPM 账号。
npm publish 发布当前包到 NPM 注册表。
npm unpublish package-name 从 NPM 注册表中撤销发布的包（一般限 24 小时内）。
npm cache clean --force 清理 NPM 缓存。
npm audit 检查项目依赖中的安全漏洞。
npm audit fix 自动修复已知的漏洞。
npm run script-name 运行 package.json 中定义的脚本，例如 npm run start。
npm start 运行 start 脚本（等同于 npm run start）。
npm test 运行 test 脚本。
npm build 运行 build 脚本。
npm outdated 列出项目中有可更新版本的依赖包。
npm version patch/minor/major 更新 package.json 中的版本号，自动更新版本。
npm ci 使用 package-lock.json 快速安装依赖，适用于 CI/CD 环境。

 

2.5 全局安装与本地安装

     npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有 -g 参数。

 

1）本地安装：将包安装到 node_modules 目录，并将信息保存到 package.json 的 dependencies 中。

npm install express          # 本地安装

  • 作用范围：默认情况下，npm 会将包安装在当前项目的 node_modules 文件夹中。这意味着每个使用该包的项目都会有自己的包副本。

  • 用途：本地安装通常用于项目依赖。每个项目可以有自己的依赖版本，这有助于确保项目的稳定性和可复现性。

  • 安装命令：在项目目录中运行 npm install <package-name> 会将包安装在 node_modules 文件夹中，并在 package.json 文件中添加依赖项。

  • 版本管理：通过 package.json 和 package-lock.json 文件管理依赖的版本，确保项目在不同环境中的一致性。

 

2）全局安装：用于安装命令行工具或需要在多个项目中使用的包。

npm install express -g   # 全局安装

  • 作用范围：全局安装会将包安装在系统级别的目录中，通常是 /usr/local/bin（在 Unix-like 系统上）或 %AppData%\npm（在 Windows 上）。

  • 用途：全局安装用于那些不需要在每个项目中重复安装的工具或命令行实用程序。例如，安装一个全局的 create-react-app 可以用于创建新的 React 项目。

  • 安装命令：使用 -g 标志来全局安装包，例如 npm install -g <package-name>。

  • 版本管理：全局安装的包版本由 npm 管理，但不会在项目的 package.json 中体现。这意味着全局安装的包可能在不同项目之间共享，但也可能因为版本冲突而导致问题。

 

3）区别

image

 

2.6 使用淘宝 NPM 镜像

　　由于国内直接使用 npm 的官方镜像是非常慢的，为了解决这个问题，我们可以使用淘宝提供的镜像（cnpm 或通过配置 NPM）来加速包的下载和安装。

　　淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

　　你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

　　注意cnpm和node也有版本适应，安装前可以先百度下需要安装的版本

$ npm install -g cnpm --registry=https://registry.npmmirror.com

　　安装指定版本：7.1.1

$ npm install -g cnpm@7.1.1 --registry=https://registry.npmmirror.com

 

　　接下来我们就可以使用 cnpm 来替代 npm 进行包的安装和管理

$ cnpm install [name]

 

2.7 package.json 的说明与使用

1）说明

　　package.json 是 Node.js 项目中的一个核心文件，包含了项目的元数据、依赖、脚本等信息。

　　package.json 文件用于描述项目的元数据和依赖关系，它通常位于项目的根目录中，并且是项目的配置文件。

 

2）package.json基本字段

name：项目的名称，应该是唯一的，通常使用小写字母和连字符。
version：项目的版本号，遵循语义化版本控制（Semantic Versioning）。
description：项目的简短描述。
main：项目的入口文件，通常是应用程序的启动文件。
scripts：定义了一系列的命令行脚本，可以在项目中执行特定的任务。
dependencies：列出了项目运行所需的所有依赖包及其版本。
devDependencies：列出了只在开发过程中需要的依赖包及其版本。
peerDependencies：列出了项目期望其依赖包也依赖的包。
optionalDependencies：列出了可选的依赖包。
engines：指定了项目兼容的 Node.js 版本。
repository：项目的代码仓库信息，如 GitHub 仓库的 URL。
keywords：项目的关键词，有助于在 npm 搜索中找到项目。
author：项目的作者信息。
license：项目的许可证信息。

 

3）使用方法

1、初始化项目：在项目目录中运行 npm init 命令，npm 会引导你创建一个 package.json 文件，或者自动生成一个包含默认值的 package.json。
2、安装依赖：使用 npm install <package-name> 命令安装依赖，npm 会自动将依赖添加到 package.json 文件的 dependencies 或 devDependencies 中，
   并创建 package-lock.json 文件以锁定依赖的版本。
3、管理脚本：在 scripts 字段中定义命令，例如 "start": "node app.js"，然后可以通过 npm start 命令来运行这些脚本。
4、版本控制：使用 npm version 命令来管理项目的版本号，npm 会自动更新 package.json 中的版本号，并生成一个新的 Git 标签。
5、发布包：当项目准备好发布到 npm 时，可以使用 npm publish 命令，npm 会读取 package.json 中的信息来发布包。
6、依赖管理：package.json 和 package-lock.json 文件一起工作，确保项目在不同环境中的依赖版本一致。

 

4）package.json实例

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A simple Node.js project",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  },
  "keywords": ["node", "npm", "example"],
  "author": "Your Name",
  "license": "MIT"
}

image

 

2.8 使用 package.json 的好处

  • 依赖管理：集中管理项目的依赖项及其版本。
  • 自动化任务：通过 scripts 字段可以方便地运行常见的任务。
  • 版本控制：确保项目及其依赖版本的一致性，便于团队协作。
  • 描述项目：为项目提供元数据信息，便于发布和共享。

 

1）依赖管理

dependencies：存储项目运行所需的依赖。

"dependencies": {
  "express": "^4.17.1"
}

安装依赖时使用

npm install express

devDependencies：存储项目开发期间需要的依赖。

"devDependencies": {
  "nodemon": "^2.0.20"
}

安装依赖时使用

npm install nodemon --save-dev

 

2）scripts 字段

     scripts 字段用于定义可通过 npm run <script> 执行的命令。常见的脚本包括：

"scripts": {
  "start": "node app.js",
  "test": "jest",
  "build": "webpack --mode production",
  "dev": "nodemon app.js"
}

     运行脚本示例

npm run dev   # 执行 "nodemon app.js"
npm start     # 等同于 "node app.js"，可以直接用 npm start 运行

 

3）版本号中的符号说明

  • ^（插入符）：表示安装与当前主版本兼容的最新版本。例如，^4.17.1 会安装 4.x.x 中的最新版本。
  • ~（波浪号）：表示安装与当前次版本兼容的最新版本。例如，~4.17.1 会安装 4.17.x 中的最新版本。

 

4） 常用命令

　　初始化 package.json 文件：

npm init

　　使用 npm init -y 可以快速生成默认的 package.json 文件。

　　查看项目依赖：

npm list --depth=0
 

5）注意事项

  • 保持 package.json 文件的简洁和准确，避免不必要的字段。
  • 使用 package-lock.json 来锁定依赖的版本，以确保项目在不同环境中的一致性。
  • 定期更新依赖，以利用最新的功能和安全修复。

 

2.9 nodejs和npm版本对应

bb7c5be630241b3a2901a4254f49c1e8_261bc5795035609efb46ee457d780d4f

 

3 webpack

3.1 简介

　　Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

cadc595a82c86bd8d1c3b2b16dc697cc_32af52ff9594b121517ecdd932644da4

 

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

接下来我们简单为大家介绍 Webpack 的安装与使用。

 

3.2 安装

npm install webpack -g

安装指定版本

npm install webpack@4.0.0 -g

 

3.3 Webpack 和node版本关系

‌　　Webpack 5+‌：需 Node.js 16 或更高版本
　　‌低于 Webpack 5‌：通常兼容 Node.js 14-15 版本

 

yarn cache clean

yarn install 

yarn serve