一杯茶时间,听我再讲一次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
相关推荐
骥龙4 小时前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户433845375694 小时前
Promise深度解析,以及简易版的手写实现
前端
梦之云4 小时前
state 状态相关
前端
梦之云4 小时前
effect 副作用相关
前端
golang学习记4 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia5 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace5 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits5 小时前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台
阿珊和她的猫5 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
IT_陈寒6 小时前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端