我的编程空间,编程开发者的网络收藏夹
学习永远不晚

输入npm run xxx后执行原理深入解析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

输入npm run xxx后执行原理深入解析

前言

当我们输入npm run XXX会首先去package.json文件里找scripts 里找对应的xxx,然后执行 xxx的命令,例如我下面这个项目输入npm run dev就会执行vue-cli-service serve 这条命令。

package.json文件

那么问题来了:

为什么不直接执行vue-cli-service serve而要执行npm run serve 呢?

因为 直接执行vue-cli-service serve,会报错,因为操作系统中没有存在vue-cli-service这一条指令。

那么问题又来了:

为什么执行npm run serve的时候,这样它就能成功,而且不报指令不存在的错误呢?

我们在安装依赖的时候,是通过npm i xxx 来执行的,例如 npm i @vue/cli-service,npm 在 安装这个依赖的时候,就会node_modules/.bin/ 目录中创建 好vue-cli-service 为名的几个可执行文件了。

.bin 目录,这个目录不是任何一个 npm 包。目录下的文件,表示这是一个个软链接,打开文件可以看到文件顶部写着 #!/bin/sh ,表示这是一个脚本。

由此我们可以知道,当使用 npm run serve 执行 vue-cli-service serve 时,虽然没有安装 vue-cli-service的全局命令,但是 npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为 脚本来执行,则相当于执行了 ./node_modules/.bin/vue-cli-service serve(最后的 serve 作为参数传入)。

总结

  • 运行 npm run xxx的时候,npm 会先在当前目录的 node_modules/.bin 查找要执行的程序,如果找到则运行;
  • 没有找到则从全局的 node_modules/.bin 中查找,npm i -g xxx就是安装到到全局目录;
  • 如果全局目录还是没找到,那么就从 path 环境变量中查找有没有其他同名的可执行程序。

参考 https://www.jb51.net/article/254116.htm

以上就是输入npm run xxx后执行原理深入解析的详细内容,更多关于npm run xxx执行原理的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

输入npm run xxx后执行原理深入解析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

深入理解linux执行文件提示No such file or directory的背后原因

1 背景 最近一直在研究在ZC706-ARM开发板的linux系统中弄一套编译系统(不支持apt),刚好发现公司有一套英伟达的ARM开发板且带有ubunut系统(支持apt),此时产生一个想法,英伟达板子上编译的程序能否在ZC706的板子上
2022-06-04

如何进行JSONP跨域请求原理的深入解析

这篇文章将为大家详细讲解有关如何进行JSONP跨域请求原理的深入解析,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。什么是同源策略同源策略,它是由Netscape提出的一个著名的安全策略。现在
2023-06-26

揭秘 HTML Script 标签的幕后世界:深入解析其工作原理

HTML Script 标签是一个强大的工具,可以让您在 HTML 页面中嵌入脚本。这篇将深入探讨 Script 标签的工作原理,揭示其幕后的奥秘。
揭秘 HTML Script 标签的幕后世界:深入解析其工作原理
2024-02-17

编程热搜

目录