一杯茶时间,听我再讲一次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
相关推荐
前端小张同学2 分钟前
前端行情好起来了,但是我依然没拿到offer
前端
程序员小续5 分钟前
React 官方严令禁止:Hook 不能写在 if/else,真相竟然是…
前端·javascript·程序员
懒得不想起名字5 分钟前
flutter_riverpod: ^2.6.1 应用笔记
前端
CrabXin5 分钟前
让网页在 PC 缩放时“纹丝不动”的 4 个技巧
前端·react.js
Juchecar15 分钟前
Naive UI 学习指南 - Vue3 初学者完全教程
前端·vue.js
用户81686947472516 分钟前
从0到1教你开发一个Mini-ESLint
前端·开源
coding随想17 分钟前
JavaScript中的DOM事件对象Event全解析
前端
专研狂17 分钟前
React 的闭包陷阱 + 状态异步更新机制
前端
zabr22 分钟前
AI黑箱解密:开发者必须了解的AI内部机制真相,原来我们一直被忽悠了
前端·aigc·ai编程
Sokach38634 分钟前
vue3引入tailwindcss 4.1
前端·css