NodeJS (npm) 学习笔记

前端包管理器 npm、yarn、pnpm 对比

npm是nodeJS的包管理器，下载nodeJS后会自动安装好npm。推荐使用pnpm（performant npm），性能和速度和磁盘空间管理更优。

现代前端包管理器终极对决：npm vs Yarn vs pnpm vs Bun
npm是官方自带，安装node 自动安装npm，前期问题较多，所以出现了yarn，但是现在npm已经优化了很多，和yarn基本差别不大了。
yarn是为了解决npm的问题而诞生的。但是现在npm已经优化了很多，npm和yarn基本差别不大了。
pnpm比npm和yarn都晚，是现代大型前端项目首选包管理器。pnpm使用“中央仓库”的依赖管理方法，大大节省了磁盘空间。

pnpm

通过 npm 安装 pnpm: npm install -g pnpm

pnpm self-update // 升级pnpm

类似于 npm init，pnpm init 可以用来初始化项目并创建 package.json 文件。

快速创建一个带有默认值的 package.json：pnpm init -y

pnpm 的安装命令是 pnpm add/install <package-name>，相当于 npm install <package-name>。

安装所有依赖 pnpm install
添加依赖包 pnpm add/install <package-name>
添加开发依赖 pnpm add/install -D <package-name>
添加全局包 pnpm add/install -g <package-name>
安装指定版本 pnpm add/install <package-name>@<version>

卸载：

pnpm remove/rm/uninstall -g <package-name> // 注意不要带版本号
- pnpm remove -g @anthropic-ai/claude-code

pnpm常用命令：

查看当前镜像源：pnpm get registry
设置淘宝镜像：pnpm config set registry https://registry.npmmirror.com/
还原为官方镜像源：pnpm config set registry https://registry.npmjs.org/
pnpm list --global // 查看所有已安装的全局包以及其所在的目录
- pnpm ls -g
- pnpm ls -g --depth 0
pnpm store path / pnpm config get store-dir # 查看当前 store-dir 路径
pnpm store prune # 清掉 store 里没人硬链的孤儿文件
pnpm root -g # 全局包的 node_modules 根目录
pnpm bin -g # 看全局 bin 实际目录

pnpm的store-dir和global-dir的区别是什么？

store-dir 和 global-dir 在 pnpm 里是两套完全不同的东西：前者是"所有项目依赖的实体仓库"，后者是"全局 CLI 工具的工作目录"。

🌼 store-dir：内容寻址的"中央仓库"

pnpm 安装依赖时分三层：

registry 下载 tarball → 解压后按内容写进 store

store（store-dir） 存"实体文件"，用内容寻址（content-addressable），同内容只存一份，目录按版本号分（如 v10/v11）

项目 node_modules/.pnpm 是"虚拟 store"，里面的文件硬链接回 store；项目根 node_modules/xxx 再软链到 .pnpm/xxx

所以 100 个项目用同一个 react@18.3.1，磁盘上 store 里只存一份实体，各项目 .pnpm 里是硬链接，不占额外空间。改文件内容会影响所有硬链接指向同一 inode——这是 pnpm 省空间的核心。

查看当前 store 路径：

pnpm store path

pnpm config get store-dir

默认位置（按优先级）：

设了 XDG_DATA_HOME → $XDG_DATA_HOME/pnpm/store

Linux → ~/.local/share/pnpm/store

macOS → ~/Library/pnpm/store

Windows → %LOCALAPPDATA%\pnpm\store

🌼 global-dir：全局安装包的"工作根"

pnpm add -g @anthropic-ai/claude-code@latest 这种全局工具，不走项目 store 的虚拟 store 逻辑，而是装到 global-dir。它干两件事：

存全局包的源码和依赖树（global-dir）

存全局包的 bin 可执行文件（global-bin-dir，独立配置项）

global-dir 默认值：

设了 XDG_DATA_HOME → $XDG_DATA_HOME/pnpm/global

Linux → ~/.local/share/pnpm/global

macOS → ~/Library/pnpm/global

Windows → %LOCALAPPDATA%\pnpm\global

global-bin-dir 默认值：

设了 XDG_DATA_HOME → $XDG_DATA_HOME/pnpm/rc（官方文档原值，实际 bin 常以 PNPM_HOME/bin 为准）

Linux → ~/.local/share/pnpm/bin

macOS → ~/Library/pnpm/bin

Windows → %LOCALAPPDATA%\pnpm

新版本更推荐看 PNPM_HOME：pnpm bin -g 看 bin 目录，pnpm list -g 看全局包。v11 后全局 bin 实际在 $PNPM_HOME/bin。

🌼 两者关系图
registry
   │ download
   ▼
store-dir (内容寻址，全机共享)
   │ 硬链接
   ├─→ 项目A/node_modules/.pnpm/*   (虚拟store)
   ├─→ 项目B/node_modules/.pnpm/*
   └─→ global-dir/.../node_modules/.pnpm/*   (全局包也复用store)
            │
            ▼
global-bin-dir / $PNPM_HOME/bin  ── 软链/ shim ──▶ 全局命令(tsc/prettier)
关键点：全局包的代码在 global-dir，实体文件仍去 store-dir 取（硬链），bin 入口在 global-bin-dir。改 store-dir 不影响全局 bin 位置；改 global-dir 才影响全局源码布局。

pnpm 支持通过npm的配置文件 .npmrc 文件进行配置。可以通过：pnpm config set <key> <value> 设置配置项。

pnpm config set store-dir "D:\software\node24_14_1\pnpm-store\store"
- 默认是：C:\Users\sungrow\AppData\Local\pnpm\store\v10。修改后位置为：D:\software\node24_14_1\pnpm-store\store\v10。
- pnpm 中最核心、最能节省磁盘空间的配置命令。它的作用是告诉 pnpm 把下载的所有依赖包实体（源代码），统一存放到你指定的那个文件夹里。
- store-dir 是 pnpm 最核心的“黑科技”所在。是所有项目依赖的“中央仓库”（只读/共享），存放所有项目依赖包的实体文件（源代码），所有项目共享。100个项目用同一个包，磁盘上只存一份。
- global-dir 是你全局安装工具的“工作间”（私有/独立），存放全局安装 (pnpm add -g) 的包及其 node_modules。全局独享。仅用于全局命令工具（如 typescript, yrm）。
pnpm config set global-dir "D:\software\node24_14_1\pnpm-store\global"
- 含义：设置全局依赖存储目录。
- 作用：这里存放全局安装包的源代码和依赖树（即 node_modules 内容）。
- 区别：
  - global-bin-dir 存的是可执行文件（入口）。
  - global-dir 存的是实际代码文件（内容）。
  - 当你全局安装一个包时，它的代码会被放在 global-dir，而它的启动命令快捷方式会被链接到 global-bin-dir。
pnpm config set global-bin-dir "D:\software\node24_14_1\pnpm-store"
- 含义：设置全局安装包的二进制文件目录。
- 作用：当你使用 pnpm install -g <包名>（例如安装 yrm, pnpm, typescript 等命令行工具）时，这些包的可执行文件（.exe, .cmd, .ps1 等）会被存放在这个目录下。
- 关键注意：
  - 配置完这个路径后，你通常需要将该路径添加到系统的 PATH 环境变量中，否则在全局安装工具后，你在命令行输入工具名可能会提示“找不到命令”。
  - 这也是 pnpm setup 命令主要做的事情之一。
pnpm config set cache-dir "D:\software\node24_14_1\pnpm-store\cache"
- 含义：设置包元数据缓存目录。
- 作用：pnpm 在下载包之前，会先检查元数据（如包的版本号、依赖关系、文件哈希等）。这个目录用于存储这些元数据的缓存副本。
- 好处：设置缓存目录可以减少网络请求，加快 pnpm install 的解析速度。如果不清理，这里会积累大量关于包信息的索引文件。
pnpm config set state-dir "D:\software\node24_14_1\pnpm-store\state"
- 含义：设置pnpm 内部状态文件目录。
- 作用：pnpm 会在该目录下维护一些内部状态文件，例如 pnpm-state.json。这些文件用于记录更新检查器的状态或其他运行时产生的临时状态信息。
- 重要性：虽然这个目录占用的空间通常很小，但它是 pnpm 正常运行和追踪自身状态所必需的。

npm

IDEA的terminal下运行npm install不成功或速度很慢时，打开cmd窗口以管理员身份重新运行npm install 可能会有惊喜........

npm 配置文件层级。优先级从高到底依次是：

项目根目录下的 .npmrc 中的配置优先级最高；
其次是用户下的 .npmrc 中的配置（如windows下：C:\Users\everest\.npmrc）
最后是全局安装目录下的 npmrc 中的配置，即 D:\software\node24_14_1\node_modules\npm\npmrc
npm config ls 查看简要配置信息
npm config ls -l 查看详细配置信息

npm list -g --depth 0: 查看所有已安装的全局包以及其所在的目录。 npm list -g typescript@3.1.3 查看typescript的信息。

npm root -g //查看全局包位置

npm start 执行的是package.json 中的scripts.start的值。npm start 是 npm run start的简写。npm只有start/stop/restart/test可以简写，其他的脚本指令都必须使用npm run xxx。

npm view typescript version 查看 typescript 的最新稳定版本；npm view typescript versions 查看所有可用版本

npm cache clean --force //清缓存

npm install -g npm --registry=https://registry.npmmirror.com/ //升级npm

npx

npx= Node Package Execute，npm 5.2+（Node 8.2+）自带，用来"执行 npm 包里的二进制文件"，核心卖点是不用全局安装就能跑 CLI 工具。

★，npx的关键设计：先找再用，找不到才下。npx运行命令时查找此命令的顺序链如下：

① 项目的（也就是运行npx时所在的目录） node_modules/.bin/  ← 本地优先（保证项目一致性）
② 全局 node_modules/.bin/          ← npm root -g 拼 .bin
③ ~/.npm/_npx/<hash>/node_modules/.bin/   ← 之前缓存过就复用
④ 都没有 → 下载到 _npx 缓存，再走 ③

★，npx几个重要参数

-p, --package <pkg>提前指定要装进 PATH 的包。-p指定的包所在的目录会被放在PATH的最前部。
- 可以使用多个-p参数，此时这几个-p参数指定的包会放在同一个npx缓存下的同一个hash目录下。
-c '<cmd>'执行一段命令字符串，配合 -p用。
--no-install只在本地/全局已有时才跑，不自动下载

★，查找npx运行的包的具体路径：

npx -p <pkg> -c 'which <pkg>'
npx -p <pkg> which <pkg> // 这里的 which 是 bash 命令，而不是npx命令。其实就是-c'<cmd>'的另一种形式。
==== -c和直接写 command 的区别
- -c 'shell字符串'：整个字符串丢给 sh -c跑，所以能写管道、变量、能写多个命令、能用 -p装进来的多个 bin 互调
- 直接写 command：就是单次 exec。
npx -p which -p <pkg> -- which <pkg> // 装个跨平台的 npm which包，-- 后的 which 是npm安装的包。

★，删除npx缓存的包（也就是非项目非全局的包）：

npm cache npx是 npm 官方给 npx 缓存专门管的子命令，ls / rm / info都支持，比手动 rm 稳，不会误伤其他 npm 缓存。也可以手动删除相关文件夹。

npm cache npx ls // 先查看npx缓存里都有什么
npm cache npx rm <hash>

# 删除示例
$ npm cache npx ls
3ffa2296ba5838e7: which, hello
9b71d224bd62f378: hello
a2c0cadc3f27b8f8: (empty/invalid)
ac0ed6aa23b37c1e: skills
e41f203b7505f1fb: playwright

$ npm cache npx rm 3ffa2296ba5838e7
Removing npx key at D:\software\node24_14_1\npm-cache\_npx\3ffa2296ba5838e7

★，npx 运行包中命令说明

首先npm包分为“作用域包”和“非作用域包”。作用域包表示为：@<scope>/<package-name>，比如微软的playwright团队的域名@playwright，有个包名为：@playwright/mcp。非作用域包直接用名称表示，如 skills 包。

npx 运行包实际上是运行包中指定的bin命令（package-lock.json）中的bin字段指定的命令。npx 的运行命令格式实际上是: npx <作用域包名或非作用域包名>@版本号 args，npx会推断出bin命令到底是什么，

首先将作用域去掉，获取到basename。比如运行 npx @playwright@mcp@lastest这个命令时，包名的basename是mcp。再比如npx skills add xxx这个命令的包名的basename就是skills。
然后查看这个包的package-lock.json中的bin字段，bin字段可以配置多个命令。
- 如果有一个命令的key和basename是一样的，就直接使用这个命令；如果没有则判断bin字段是否只有一个key，如果只有一个key就直接使用这个key。如果都不满足则报错。

skills包中的bin字段配置了2个key，其中一个和basename相同（即skills），所以npx skills <command> 执行的就是skills这个bin。❣️但如果想执行add-skill这个key怎么办呢❓？可以使用-p参数：npx -p skills -- add-skill xxx。原理其实很简单：-p作用就是把skills包的.bin目录放在PATH环境变量的最前面然后执行 -- 后面的命令(即add-skill xxx)。

      "bin": {
        "add-skill": "bin/cli.mjs",
        "skills": "bin/cli.mjs"
      },

node安装及配置

一，windows下安装 nodeJS并配置(以及angular安装相关问题)

※，下载安装 https://nodejs.org/en/download/ 安装路径为 D:\nodejs。安装过程中不需要勾选安装 chocolatey。

https://nodejs.org/zh-cn/download/current

※，将 D:\nodejs① 配置到环境变量Path中。然后打开cmd输入 node -v 和 npm -v 检查安装是否成功.

※，默认的安装下，npm的本地仓库建立在了C盘：C:\Users\admin\AppData\Roaming，现在将其移动至 nodeJS的安装目录：D:\nodejs

注意，仓库地址迁移后，需要修改环境变量，参考下面的环境变量的说明。

1，运行如下命令可以将仓库地址移至D盘
npm config set prefix "D:\nodejs\npm_global"   //这里配置的全局模块存储位置
npm config set cache "D:\nodejs\npm_cache"   //这里配置cache路径

2，这个步骤也可以通过如下方式：打开 D:\nodejs\node_modules\npm\npmrc文件，配置如下路径：
prefix=D:\nodejs\node_global  //这里配置的全局模块存储位置
cache=D:\nodejs\node_cache //这里配置cache路径
+ 注意，这个是直接在文件里添加的，如果使用 3.1.1 中的命令:npm config set prefix "D:\nodejs\npm_global" , 
  npm config set cache "D:\nodejs\npm_cache"，则配置信息并不是写到上面那个npmrc中，而是写入到 C盘下用户
  路径下的npmrc中去了。如果此文件里的内容格式不对，将导致npm命令无任何响应...npm -v等等。
  
3， 输入npm prefix -g 查看npm的本地全局仓库的位置，发现已经移至D盘。
4，npm config ls(list也行) 输出中的prefix 也是指全局仓库目录。
5，查看全局安装过的模块：
+ npm list -g
+ npm list -g --depth 0

※，配置npm国内镜像源：输入命令：npm config set registry=https://registry.npmmirror.com/，提升速度(配置后可通过 npm get registry 查看)。此命令执行后会被写入用户目录下的 .npmrc 配置文件中。

官方npm镜像地址：https://registry.npmjs.org/
淘宝npm镜像原来地址是：http://registry.npm.taobao.org
如果只是临时安装某个包，可以在命令中加 --registry：npm install express --registry=https://registry.npmmirror.com/

※， npm install -g express 将会将express模块下载至全局仓库中 D:\nodejs\node_global\node_modules，此时如果在node命令行中require("express")则会报错，找不到express模块。此时需要再②添加一个环境变量：NODE_PATH,其值为 D:\nodejs\node_global\node_modules 【因为原来存放模块的目录 D:\nodejs\node_modules 变为了 D:\nodejs\node_global\node_modules 】，另外注意 npm install -g express-generator才是express项目的骨架生成器（脚手架). express myExpressApp 命令会生成express项目文件夹。然后进入myExpressApp文件夹运行npm install 安装项目依赖。

★，安装typescript： npm install -g typescript ，(tsc -v命令现在还无效，需添加环境变量，下面有说明)然后在 idea Intellij 中配置typescript编译选项

※，安装angular脚手架：` npm install -g @angular/cli` ，然后运行`ng -v`查看angular版本，发现报错，此时需要将 D:\nodejs\node_global ③添加到环境变量中。因为 typescript 和 angular安装之后ng,tsc在D:\nodejs\node_global 文件夹下都有一个启动命令文件，所以将此路径加入环境变量才会启动，实际上启动的就是这里的文件。

※，安装cnpm以及@angular/cli时一直卡在 checking status 处，自己的解决方法是：进入C盘/用户/appdata/roaming文件夹，将node_global和node_cache文件夹删除，同时将自己在D盘的npmrc中设置的node_cache和node_global 两个文件夹中的内容清空。重新打开控制台安装就好了。

※，总结一下win7下node所有的环境变量配置：(都可以直接在系统环境变量下配置，不用管用户环境变量，假设nodejs安装在 D:\nodejs 文件夹)：

将【D:\nodejs】加入Path，否则node -v 和 npm -v提示不是内部命令
将在npmrc中配置的全局模块路径【D:\nodejs\node_global ,默认是C盘 C:\Users\admin\AppData\Roaming，改为了D盘】添加到Path，否则安装的模块，如ng -v,tsc -v, pnpm -v 会提示不是内部命令
- 安装ng,tsc,npm这类模块之后，在D:\nodejs\node_global 文件夹下都有一个启动命令文件，所以将此路径加入环境变量才会启动，实际上启动的就是这里的文件。但是安装express这类模块不会有启动命令文件。
将在npmrc中配置的全局模块路径【D:\nodejs\node_global\node_modules】添加到NODE_PATH，否则node加载模块时（require("express")）提示找不到模块。

※， Intellij Idea(或phpstorm)配置ts文件(或js文件)运行(调试)：

　　首先要安装插件，如下图，然后新建一个nodejs配置，然后选择ts对应的js文件(直接选ts运行会报错)，然后就可以调试ts(js)文件了。

、

※， npm 安装yarn

-- 安装
npm install -g yarn --registry=https://registry.npm.taobao.org
-- 配置
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
-- yarn 常用命令
yarn global dir // 查看全局模块位置
yarn global add [modulename]

※， npm install 出现需要Python2而电脑装的Python3问题解决

不需要装python2，只需要用管理员打开cmd控制台窗口运行npm install 即可。

※， `npm 安装cnpm`

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

※，

二, ubuntu16.04 node 8.11.3安装

官网下载 https://nodejs.org/zh-cn/包，解压到某个目录,注意是xz压缩格式，用参数J

tar xvJf node-v8.11.3-linux-x64.tar.xz -C xx/

然后进入xx/bin中运行 ./node -v即可，同样 ./npm -v。

建立软连接可以使node， npm命令全局使用：

ln -s path/to/xx/bin/node /usr/local/bin/node

ln -s path/to/xx/bin/npm /usr/local/bin/npm

※，

※

发布和删除自己的npm包

点我查看官方教程。

进入待发布包的目录下，输入 npm init ，然后按照提示输入用于生成package.json的信息。
输入 npm adduser命令，添加并登录自己的npm账号。(everest33 y......33 y..t...@126.com)。如果没有这一步，输入npm publish时会报权限错误： errno -4048
输入npm publish 即可发布自己的包到npm 仓库中。可以通过 npm 官网 https://www.npmjs.com/ 查询查看自己的包。
如果npm publish命令报错：publish Failed PUT 403。出现原因：使用的是淘宝源cnpm,登陆到的是cnpm。解决方法：切换到npmjs的网址，代码如下：npm config set registry http://registry.npmjs.org/。切换后需要npm adduser再次添加并登陆自己的npm账号。
如果想换回淘宝源： http://registry.npm.taobao.org/
如果想删除仓库中的包：进入发布包目录，输入 npm unpublish --force

posted on 2018-07-09 01:02 everest33 阅读(676) 评论(0) 收藏举报

刷新页面返回顶部

everest33

导航

公告

NodeJS (npm) 学习笔记

前端包管理器 npm、yarn、pnpm 对比

pnpm

npm

npx

node安装及配置

发布和删除自己的npm包