一杯茶时间,听我再讲一次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
相关推荐
子兮曰17 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
吴仰晖17 小时前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神17 小时前
github发布pages的几种状态记录
前端
朝朝暮暮an19 小时前
Day 3|Node.js 异步模型 & Promise / async-await(Part 1)
node.js
不像程序员的程序媛19 小时前
Nginx日志切分
服务器·前端·nginx
北原_春希19 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
尽意啊19 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜19 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive19 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…19 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts