一文搞懂npm link原理

4,361 阅读2分钟

背景

npm install可以把发布在npmjs平台上的模块包下载到本地,npm install -g在下载包的同时,还帮助我们配好全局变量,让我们可以直接使用命令而无需通过node来执行,或着配置package.json里的script脚本来run。

但这仅限于已经发布的包,对于未发布的包,我们如何测试使用呢?难道要把一个未经测试的包发布到平台上再install下来测试吗?当然不可以这么做。npm官方早已考虑到了这一点,给我们提供了测试本地的包的工具指令npm link

前言

npm link可以帮助我们模拟包安装后的状态,它会在系统中做一个快捷方式映射,让本地的包就好像install过一样,可以直接使用。在MAC中,我们在终端可以直接敲命令,其实是在执行/usr/local/bin目录下的脚本,这个目录可以认为是我们的全局命令所在的地方。

/usr/local/bin目录 截屏2021-08-12 上午11.23.31.png

而我们在npm install -g的时候,其实是将相关文件安装在/usr/local/lib/node_modules目录下,同时,在/usr/local/bin目录下会有一个映射脚本,将其指向/usr/local/lib/node_modules下的真实文件。这么做的好处是,在保证只有一份可执行文件的前提下,给命令取别名。

/usr/local/lib/node_modules目录 截屏2021-08-12 上午11.33.07.png

npm link做的事也差不多,只不过它在/usr/local/lib/node_modules里存的不是真实的文件,而是存了一个快捷方式,指向你当前执行npm link的目录。如果开发的是node包,则执行的命令名和真实执行的文件入口,会通过项目的package.jsonbin的配置来获取。

How to use?

cd your-util
npm link

然后会看到输出类似如下的链接信息,说明成功。

/usr/local/bin/yourutilname -> /usr/local/lib/node_modules/yourutilname/xxx
/usr/local/lib/node_modules/yourutilname/xxx -> /Users/username/Documents/xx(your real project path)

项目下link

如果是你的前端项目需要依赖某个包,而你想对这个包进行调试查看浏览器上呈现的效果,那就需要做两次link。

先进入待测试包目录,将开发的包link到全局

npm link

之后再进入需要用到此包的工程目录,在工程中link这个组件库

npm link your-lib

那么如何验证是否link成功了呢,有一种最简单直接的方式,就是打开待测试包目录和工程目录下,查看node_modules对应的包,旁边出现一个弯箭头符号,就代表link成功了🎉

截屏2021-08-12 上午11.41.12.png

参考博客

本文大部分内容来自npm link详解,同时加了一些自己学习到的地方,如有错误,还请指出~