Node.js安装和环境配置，pnpm安装和项目依赖安装

Vue和React项目都需要Node.js环境。使用 Vite 或 create-vue 创建 Vue 3 项目时，默认采用 pnpm 管理依赖。 ‌React 项目也可采用 pnpm 管理依赖。

这里记录一下Windows环境下Node.js安装和环境配置，pnpm安装和项目依赖安装的步骤。

一、安装Node.js

1、访问Node.js官方网站: https://nodejs.org/

2、下载LTS版本的Node.js安装程序(Windows Installer .msi)

3、运行下载的安装程序

4、在安装向导中，勾选"Add to PATH"选项

5、点击"Next"完成安装

6、验证安装是否成功

打开命令提示符(CMD)或PowerShell，运行以下命令:

 node -v
 npm -v

如果显示版本号，则安装成功。

 二、Node.js环境配置

Node.js安装包自带了npm，但安装时不会自动给npm配置全局安装包路径的环境变量（不配的话运行js程序时可能会报找不到包的错误）。

1. 打开Node.js的安装目录

2. 在该目录中新增node_global和node_cache文件夹

 3、文件夹创建完成之后，打开cmd窗口，输入以下命令。

npm config set prefix "{Node.js安装目录}\node_global"
npm config set cache "{Node.js安装目录}\node_cache"

注意把上面命令中的{Node.js安装目录}替换成你的真实绝对安装路径，比如我安装在D盘，就是

npm config set prefix "D:\SoftWare\nodejs\node_global"
npm config set cache "D:\SoftWare\nodejs\node_cache"

当时运行完没截图，就不放截图了，按照这个命令来一般不会出问题。

4、鼠标点击右键选择属性，在弹出的界面中依次选择高级系统设置、高级、环境变量打开环境变量设置界面，添加系统变量和用户变量Path。

系统变量里加　　NODE_PATH　　D:\SoftWare\nodejs\node_global\node_modules

系统变量Path后面加　　D:\SoftWare\nodejs\

注意：这里要替换成你们自己的安装路径。

 到这里，Node.js安装和环境配置就完成了。

 

三、安装pnpm（Performant npm）

1、pnpm（Performant npm）是新一代 JavaScript包管理器，优势包括：

• 节省磁盘空间：通过硬链接和符号链接实现高效存储
• 安装速度更快：比 npm/yarn 快 2-3 倍
• 内置工作区支持：天然适配 Monorepo 项目
• 安全隔离：默认严格模式防止依赖污染

2、使用npm全局安装pnpm，打开命令提示符(CMD)或PowerShell，运行以下命令:

#安装pnpm
npm install -g pnpm

#验证安装:
pnpm -v

3、另外也记录下其他命令：

升级pnpm

# 通过 pnpm 自身升级
pnpm add -g pnpm
 
# 或使用 npm
npm update -g pnpm

卸载pnpm

# 通过 npm 卸载
npm uninstall -g pnpm
 
# 彻底删除全局存储（谨慎操作）
rm -rf ~/.pnpm-store

验证安装

# 检查版本
pnpm -v
 
# 查看配置
pnpm config list
 
# 测试安装依赖
pnpm create vite@latest my-project --template react
cd my-project && pnpm install

四、安装项目依赖

在项目根目录下的地址栏输入CMD进入命令窗口，运行以下命令来安装项目依赖：

pnpm install

这个命令会读取 package.json 文件中的 dependencies 和 devDependencies 部分，并安装所有列出的依赖项。

在安装使用pnpm管理Node.js项目依赖时，遇到“Ignored build scripts: esbuild”的警告不是一个大问题，通常是因为pnpm在处理某些包时忽略了构建脚本。这通常是因为pnpm默认使用node_modules中的包，而非全局安装的包来执行构建脚本，这可能会导致一些依赖问题。

解决方案：明确指定使用esbuild
确保你的package.json中正确引用了esbuild，并且它在dependencies或devDependencies中被正确列出。例如：

{
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/bundle.js"
  }
}

其他命令：

#更新依赖，如果你需要更新依赖到最新版本，可以使用以下命令
pnpm update
#例如，要添加 lodash 库，你可以运行：
pnpm add lodash

#添加新依赖
pnpm add <package-name>

6、运行项目

# 运行项目
pnpm dev

项目启动后，在浏览器中访问: http://localhost:****。