一杯茶时间,听我再讲一次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
相关推荐
东东51610 分钟前
校园短期闲置资源置换平台 ssm+vue
java·前端·javascript·vue.js·毕业设计·毕设
qq_4198540510 分钟前
富文本编辑器
前端
悟能不能悟11 分钟前
VUE的国际化,怎么实现
前端·javascript·vue.js
Mr Xu_16 分钟前
解决 Vue + Axios 热更新导致响应拦截器重复注册的问题
前端·javascript·vue.js
lichenyang45322 分钟前
Node.js AI 开发入门 - 完整学习笔记
人工智能·学习·node.js
岁岁种桃花儿27 分钟前
NodeJs从入门到上天:什么是Node.js
前端·node.js
colicode32 分钟前
语音报警接口开发参考:紧急情况下快速调用语音API发送安全警报
前端·语音识别
夏河始溢34 分钟前
一八四、Zustand 状态管理详解、与 Redux、MobX 的对比分析
前端·javascript·react.js·状态管理·zustand
Code小翊41 分钟前
TypeScript 核心语法速查
前端·javascript·typescript
家里有只小肥猫42 分钟前
uniApp下拉渐变头部 拿来即用
前端·javascript·uni-app