npm run xxx 的时候发生了什么?(以npm run dev举例说明)

这篇具有很好参考价值的文章主要介绍了npm run xxx 的时候发生了什么?(以npm run dev举例说明)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、去package.json寻找scripts对应的命令

比如在npm run dev的时候,首先会去项目的package.json文件里找scripts 里找对应的 dev ,然后执行 dev 的命令。
也就是说,启动vue项目 npm run dev的时候,实际上就是执行了vue-cli-service serve 这条命令。

"scripts": {
  "dev": "vue-cli-service serve",
  "build": "vue-cli-service build",
},

问题1:为什么不直接执行vue-cli-service serve命令呢?
因为操作系统中没有vue-cli-service 这条命令。
npm run xxx 的时候发生了什么?(以npm run dev举例说明),npm,前端,node.js

二、去node_modules寻找vue-cli-service

问题2:既然vue-cli-service serve这条指令不存在操作系统中,为什么执行npm run dev的时候,也就是执行了vue-cli-service serve 能成功,并且不报错呢?
(1)首先,大家都知道,我们通过npm i 安装依赖。例如 npm i @vue/cli-service,npm 在 安装这个依赖的时候,就会node_modules/.bin/ 目录中创建 好vue-cli-service 为名的几个可执行文件了。
(2).bin 目录不是任何一个 npm 包。目录下的文件,表示一个个软链接,打开文件可以看到文件顶部写着 #!/bin/sh ,表示这是一个脚本。所以当使用 npm run dev 执行 vue-cli-service serve 时,虽然没有安装 vue-cli-service的全局命令,但是 npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为 脚本来执行,则相当于执行了 ./node_modules/.bin/vue-cli-service serve。
npm run xxx 的时候发生了什么?(以npm run dev举例说明),npm,前端,node.js

三、从package-lock.json获取.bin的软链接

问题3:.bin 目录下的文件表示软连接,那这个bin目录下的那些软连接文件是哪里来的?它又是怎么知道这条软连接是执行哪里的呢?

1. bin目录下的那些软连接存在于项目最外层的package-lock.json文件中。

从 package-lock.json 中可知,当我们npm install 整个新建的vue项目的时候,npm 将 bin/vue-cli-service.js 作为 bin 声明了。所以在 npm install 时,npm 读到该配置后,就将该文件软链接到 ./node_modules/.bin 目录下。
npm run xxx 的时候发生了什么?(以npm run dev举例说明),npm,前端,node.js

2.vue-cli-service文件的作用

node_modelues --> .bin --> vue-cli-service 中将npm 还会自动把node_modules/.bin加入$PATH,这样就可以直接作为命令运行依赖程序和开发依赖程序,不用全局安装了。
npm run xxx 的时候发生了什么?(以npm run dev举例说明),npm,前端,node.js

3.npm install 的作用

npm install 的时候,npm 就帮我们把这种软连接配置好了,其实这种软连接相当于一种映射,执行npm run dev 的时候,就会到 node_modules/bin中找对应的映射文件,然后再找到相应的js文件来执行。


总结

npm install 时,npm 读到该配置后,就将该文件软链接到 ./node_modules/.bin 目录下,而 npm 还会自动把node_modules/.bin加入$PATH,这样就可以直接作为命令运行依赖程序和开发依赖程序,不用全局安装了。
然后在运行npm run dev 的时候,dev会去package.json寻找scripts对应的命令,这个命令会执行在node_modules --> bin中由npm i 映射的软链接,然后再找到相应的js文件来执行。 也就是说 npm i 的时候,npm 就帮我们把这种软连接配置好了文章来源地址https://www.toymoban.com/news/detail-648789.html

到了这里,关于npm run xxx 的时候发生了什么?(以npm run dev举例说明)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用 npm/yarn 等命令的时候会,为什么会发生 Error: certificate has expired

    昨天,我写了一篇文章,介绍如何使用项目模板,构建一个 Electron 项目的脚手架,我发现我自己在本地无法运行成功,出现了错误。 错误内容如上,看着一大段,很吓人的样子,不过可以仔细阅读一下,真正的错误是在第 10 行, Error: certificate has expired ,如果你去网上搜,

    2024年02月21日
    浏览(42)
  • npm run serve与npm run dev的区别

    最近在运行前端项目时,有时用到npm run serve 有时用到npm run dev。 一般在 vue 3.x 的时候用 npm run serve,vue2.x项目运行的时候用到 npm  run dev, dev是 vue cli2 的默认执行命令, serve 是 vue cli4 的默认执行命令 例:在我们运行一些 vue 项目的时候,输入npm run serve或者 npm run dev的其中一

    2024年02月09日
    浏览(48)
  • npm run serve和npm run dev的区别

    1. 功能:通常,\\\"npm run serve\\\"用于启动开发服务器,提供实时的开发环境,支持自动重新加载和热模块替换。这样可以在开发过程中实时查看代码更改的效果。而\\\"npm run dev\\\"可以是一个自定义的指令,用于执行其他与开发相关的任务,如编译代码、运行测试等。具体功能取决于项

    2024年01月23日
    浏览(54)
  • npm run dev和npm run serve两个命令的区别

    前端开发过程中运行Vue项目的时候,有时候使用npm run serve命令可以启动项目,有时候却会报错;有时候使用npm run dev命令可以启动项目,有时候却也会报错。是什么原因造成这种情况呢,原因在于 Vue脚手架版本的问题 ,也可以理解为执行配置的脚本问题,有的脚手架版本支

    2024年02月22日
    浏览(44)
  • 碎碎念:解决npm run dev /serve 报错

    解决方法: 找到 package.json —— 查看scripts 中的 vue-cli-service 指令,将我们的 npm-run-dev 改为 npm-run-serve 即可解决! 二、使用 npm run serve 出现以下报错信息 解决方法: 按照上述方法查看了scripts 中的 vue-cli-service 指令 若查找指令之后仍然报错,可检查一下当前路径 是否 是当前

    2024年02月13日
    浏览(55)
  • 若依-前台无法正常启动,npm run dev失败

    拉取若依项目后,根据官方开发文档(项目readme文档)进行依赖下载安装后,启动失败。 出现以下几个问题: 运行 npm install 下载中断/失败。 使用 npm install --registry=https://registry.npmmirror.com 进行安装。 查看当前路径是否正确。 依赖安装成功后,运行 npm run dev 后无反应/运行失

    2024年02月15日
    浏览(55)
  • vue项目 ‘npm run dev‘ 报错 npm ERR! errno 134

    npm ERR! errno 134 表示 npm 执行出现了致命错误,通常是由于内存不足或程序崩溃导致的。 这时需要我们分配更多的内存给 vue-cli-service serve npm install increase-memory-limit cross-env increase-memory-limit 用于增加脚本的内存限制。脚本在执行过程中可能会消耗大量的内存,当内存被耗尽时会

    2024年02月11日
    浏览(63)
  • win10电脑npm run dev报错解决

    初始化Vue项目 创建项目文件夹client 安装依赖,运行开发服务 日志路径:C:Users\\\\AppDataRoamingnpm-cache_logs 日志详细: 官网下载最新LTS安装包:https://nodejs.org/dist/v18.17.1/node-v18.17.1-x64.msi 运行安装向导,覆盖旧版本目录(cmd查看: where node ) 验证安装成功: node -v

    2024年02月13日
    浏览(60)
  • 【工作记录】记一次执行npm run dev报错的问题

    记录一个npm run dev 报错的问题。 今天在家里电脑跑npm run dev的时候报错,报错内容如下: 第一时间去找了度娘,也确实解决了,但不得不说网上还是有一些错误的答案的。 这个问题是由于node版本过高导致的,所以有一种方案便是降低node版本,正常来讲17一下就是ok的。 另外一

    2024年02月12日
    浏览(40)
  • 小程序运行npm run dev:mp-weixin报错问题

    今天在webstorm上打开小程序运行npm run dev:mp-weixin时报了如下错误 错误是: 错误原因是低版本的node不支持??运行符 解决方法:将node的版本升到14及以上即可

    2024年02月15日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包