跳到主要内容

JavaScript

框架​

框架带来以下特性:

  1. 工具
    • 测试
    • linting
  2. 组件化
    • 状态
    • 事件
    • 属性
  3. 领域特定语言 (DSL)
    • JSX
  4. 依赖
    • 组件嵌套
    • 依赖注入
  5. 路由
    • 服务端路由
      • URL前进/后退
    • 客户端路由
      • sigle page app
      • 伪网页view
  6. 生命周期
  7. 渲染
    • 虚拟DOM (diff)
    • 增量DOM

在 Windows 11 上把 Node.js、npm 全局包、pnpm、以及项目依赖全部放到 D 盘的完整教程。照着顺序执行即可。

下面假设你的目标根目录是 D:\dev,你可以换成自己喜欢的路径(但路径里不要有中文和空格)。

第 0 步:备份与确认(重装前)​

打开 PowerShell,先备份和确认:

# 确认 Claude 配置目录还在(重装不会动它,但确认一下安心)
dir $env:USERPROFILE\.claude

# 如果有自定义镜像配置,备份 .npmrc
copy $env:USERPROFILE\.npmrc D:\npmrc_backup.txt

如果第二条报错说找不到文件,说明你没有自定义配置,跳过即可。

第 1 步:彻底卸载旧 Node.js​

  1. 打开「设置 → 应用 → 已安装的应用」,找到 Node.js,卸载。
  2. 卸载后,手动删除以下残留目录(存在才删):
Remove-Item -Recurse -Force "C:\Program Files\nodejs" -ErrorAction SilentlyContinue
Remove-Item -Recurse -Force "$env:APPDATA\npm" -ErrorAction SilentlyContinue
Remove-Item -Recurse -Force "$env:APPDATA\npm-cache" -ErrorAction SilentlyContinue
Remove-Item -Force "$env:USERPROFILE\.npmrc" -ErrorAction SilentlyContinue

  1. 清理环境变量里的残留路径:

    • Win + R 输入 sysdm.cpl → 高级 → 环境变量
    • 在「用户变量」和「系统变量」的 Path 里,删掉任何含 nodejs 或 npm 的条目
    • 顺便看看有没有旧的 NODE_PATH、npm_config_prefix 之类,有就删掉

  2. 重启电脑(让环境变量彻底刷新,强烈建议)。

重启后验证已卸载干净:

node -v    # 应该报错:无法识别
npm -v     # 应该报错:无法识别

第 2 步:创建 D 盘目录结构​

mkdir D:\dev
mkdir D:\dev\nodejs          # Node.js 本体装这里
mkdir D:\dev\npm-global      # npm 全局包(含 Claude CLI)
mkdir D:\dev\npm-cache       # npm 缓存
mkdir D:\dev\pnpm-home       # pnpm 本体和全局包
mkdir D:\dev\pnpm-store      # pnpm 内容寻址存储(所有项目依赖共享)
mkdir D:\dev\projects        # 以后你的项目都放这里

第 3 步:安装 Node.js LTS 到 D 盘​

  1. 去 https://nodejs.org 下载 LTS 版本的 .msi 安装包。

  2. 运行安装包,关键的一步:走到 "Destination Folder"(安装路径)界面时,点 Change,改成:

    D:\dev\nodejs\

  3. 后面的 "Tools for Native Modules"(自动装编译工具链)那个勾不用勾,除非你确定要编译原生模块,否则会拖慢安装。

  4. 完成安装。打开新的 PowerShell 窗口验证:

node -v    # 显示版本号,如 v22.x.x
npm -v     # 显示 npm 版本号
where.exe node   # 应显示 D:\dev\nodejs\node.exe

第 4 步:把 npm 全局包和缓存重定向到 D 盘​

默认 npm 全局包会装回 C 盘的 AppData,需要改:

npm config set prefix "D:\dev\npm-global"
npm config set cache "D:\dev\npm-cache"

验证:

npm config get prefix    # D:\dev\npm-global
npm config get cache     # D:\dev\npm-cache

然后把 D:\dev\npm-global 加进用户环境变量 Path(否则全局装的命令找不到):

  • sysdm.cpl → 高级 → 环境变量 → 用户变量 → Path → 编辑 → 新建 → 填入 D:\dev\npm-global → 一路确定。

重开一个 PowerShell 窗口(改 Path 后必须重开)。

第 5 步:用 Corepack 安装 pnpm 并指向 D 盘​

Node LTS 自带 Corepack。先设置 pnpm 的目录环境变量,再启用。

设置两个用户环境变量(用命令行设,永久生效):

setx PNPM_HOME "D:\dev\pnpm-home"

然后手动把 pnpm 的全局存储位置也配好(下面第 6 步用配置文件设,更可靠)。

把 D:\dev\pnpm-home 也加进用户 Path(同第 4 步方法)。

重开 PowerShell,然后启用 pnpm:

# 指定 corepack 安装目录到你可控的地方
corepack enable --install-directory "D:\dev\pnpm-home"
corepack prepare pnpm@latest --activate

第 6 步:配置 pnpm 把所有项目依赖放 D 盘​

这是「项目依赖也放 D 盘」的关键。pnpm 用一个全局 store(内容寻址存储),所有项目共享,设到 D 盘后,无论你项目在哪个盘,真实依赖文件都存在 D 盘的 store 里:

pnpm config set store-dir "D:\dev\pnpm-store"
pnpm config set global-dir "D:\dev\pnpm-home\global"
pnpm config set global-bin-dir "D:\dev\pnpm-home"

验证:

pnpm config get store-dir       # D:\dev\pnpm-store
pnpm store path                 # 应指向 D:\dev\pnpm-store

注意:pnpm 的 store 必须和项目在同一个盘才能用硬链接(最省空间、最快)。所以你的项目也要放在 D 盘(D:\dev\projects),store 在 D 盘,二者同盘,完美。如果项目放 C 盘而 store 在 D 盘,pnpm 会退化成复制文件,变慢且占空间。所以务必把项目建在 D 盘。

第 7 步:给 pnpm 配置淘宝镜像源​

# 1. 换镜像源
pnpm config set registry https://registry.npmmirror.com

验证:

npm config get registry    # https://registry.npmmirror.com

顺手提高超时容忍度,应对慢网络:

# 2. 加大超时和重试容忍(应对不稳定网络)
pnpm config set fetch-timeout 60000
pnpm config set fetch-retries 5

# 3. 重新安装(会复用已下载的,只补缺的)
pnpm install

总结:哪些东西去了 D 盘​

内容位置
Node.js 本体D:\dev\nodejs
npm 全局包(含 Claude CLI)D:\dev\npm-global
npm 缓存D:\dev\npm-cache
pnpm 本体/全局 binD:\dev\pnpm-home
项目依赖共享存储D:\dev\pnpm-store
你的项目D:\dev\projects