一杯茶时间,听我再讲一次npm link原理!

在开始了解npm link知识之前,我们都知道它就是一个命令,它是什么命令?这个命令有什么作用?这个命令原理又是什么?一连串问题呈现在我们脑海中...😶‍🌫️,下面我带大家一步步来了解这个命令!

下面将分别三步去了解它:它是什么 => 怎么用它 => 它的应用场景

npm link 的作用是创建本地包的软链接到全局node_modules。

本质上是利用操作系统的符号链接功能,在本地开发环境中创建一个"活"的、指向你源代码目录的快捷方式。有点类似我们电脑上桌面软件快捷方式,软件软链接指向软件安装目录下的exe文件。而这个命令的作用跟这个快捷方式,它也是提供一个指向作用。下面举个例子:

在项目根目录下执行npm link:

在项目create-init-cli根目录下

执行这个命令后,我们在全局node_modules下可以看到create-init-cli的快捷方式:

我的npm全局是安装在D:\basic_install\nodejs\node_global

细心的你可能会发现一个明显区别,create-init-cli是一个快捷方式,而rimraf确实一个实实在在的文件夹。我们可能会想它们有什么区别?

  • npm install -g rimraf : 执行后会将一个已发布的包安装到全局,也就是上图中的rimraf文件夹
  • npm link:执行后将一个本地未发布的项目添加一个软链接,也就是上图快捷方式create-init-cli(它不是一个文件夹)

npm link的常见应用场景:

  • 命令行工具开发调试:在命令行封装项目根目录下执行npm link后,npm 会读取package.json中的bin字段配置
json 复制代码
  "bin": {
    "cptc": "bin/cli.js",
  },

然后会在全局node_modules生成项目软链接快捷方式,还会在全局目录下生成全局命令cptc.cmd

  • 本地包开发与实时联调:开发一个独立npm包,需在真实项目中测试效果。

    • 包根目录执行npm link创建全局软连接,这样其他项目可以通过包名找到它。
    • 项目根目录下执行npm link local-package(本地npm包package.json的name字段值)。在该项目的node_modules中创建一个指向全局链接(指向本地包)的符号链接
    • 上面两步完成后,就可以在本地项目中调试npm包了
perl 复制代码
# 包目录
cd local-package
npm link

# 项目目录
cd local-project
npm link local-package # pkg里的name字段值

到这里,我们也大概了解了npm link的用法、作用、原理,既然npm link创建一个软链接,那么取消也必定要掌握啦。取消软链接,只需在对应包或项目下执行:

bash 复制代码
npm unlink
相关推荐
weixin_3823952314 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__14 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.15 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~16 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华17 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
孟陬18 小时前
Node.js 测试报告格式一览和自定义 json 格式 `--test-reporter=spec | tap | dot | junit | lcov`
node.js
做前端的娜娜子19 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅19 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni20 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法