当前位置:网站首页>npm run xx 的执行流程
npm run xx 的执行流程
2022-07-19 18:18:00 【rananie】
文章目录
npm run xx 的执行流程
npm run xxx
的这个xxx是在package.json
中配置的。
package.json中的scripts中的key为xxx,value为实际的命令。
npm run xxx的时候,首先会去项目的package.json文件里找scripts 里找对应的xxx,然后执行 xxx的命令,例如启动vue项目 npm rum serve
实际上执行了npm run vue-cli-service serve --open
vue-cli 2.0
"script":{
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
vue-cli 3.0
"script":{
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
为什么不直接执行vue-cli-service serve
而要执行npm run serve
呢
因为操作系统中没有vue-cli-service
指令,直接执行会报错。
**为什么执行npm rum serve
的时候可以成功?
**
在安装依赖的时候,会在node_modules/.bin/
目录中创建几个vue-cli-service
为名的可执行文件,bin目录下的文件表示软连接。
使用npm run serve
执行vue-cli-service serve
时,会到./node_modules/.bin
中找到 vue-cli-service.
文件作为 脚本来执行,则相当于执行了./node_modules/.bin/vue-cli-service serve
(最后的 serve 作为参数传入)
这个bin目录下的那些软连接文件是哪里来的呢?它又是怎么知道这条软连接是执行哪里的呢?
在库的源代码的package.json中,可以找到bin字段,用于在安装时创建软链接指向bin中的地址。
npm i 的时候,npm 就帮我们把这种软连接配置好了,其实这种软连接相当于一种映射,执行npm run xxx 的时候,就会到 node_modules/bin中找对应的映射文件,然后再找到相应的js文件来执行。
作者:阳光是sunny 链接:https://juejin.cn/post/7078924628525056007 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
边栏推荐
- LeetCode 0121.买卖股票的最佳时机 - 从后往前模拟
- Let, const declaration format and characteristics
- PyGame official document [translation] - pygame freetype
- Bug---redis反序列化失败
- 469-82(62、63、343、96)
- 2D DenseUnet-based脑胶质瘤分割BraTs+论文翻译+代码实现
- Win11查看文件资源管理器选项卡的方法
- volatile详解
- The difference between router and switch
- 软件测试计划包括哪些内容,测试计划如何编写。分享测试计划模板
猜你喜欢
atof()、atoi()、atol()函数【详解】
ES6中的结构赋值
Artifact in hand anytime, anywhere access to the latest technological frontier
Analyze RTP flow packet loss and disorder
volatile详解
ffmpeg笔记(一)音视频基础
Brain tumor segmentation using deep learning +HybridResUnet脑胶质瘤分割BraTs +论文解读
海上风电消防火灾报警系统中消防主机超远距离联网方案
469-82(62、63、343、96)
Source insight tips
随机推荐
PHP仓库进销存管理系统源码 WMS源码
一文看懂深圳半导体产业现状与未来发展机遇
js操作数组常用方法
Introduction to HLS
R语言ggpubr包ggarrange函数将多幅图像组合起来、annotate_figure为组合图像添加注释、注解、标注信息、使用right参数在可视化图像右侧添加注解信息(在文本中添加上标和下标
2D DenseUnet-based脑胶质瘤分割BraTs+论文翻译+代码实现
使用 Abp.Zero 搭建第三方登录模块(三):网页端开发
海上风电消防火灾报警系统中消防主机超远距离联网方案
kubernetes之HPA
外表简单内里复杂的功能测试,如何进行?
基于 SPICE 协议的硬编推流整合方案在云游戏中的应用
展锐首款5G基带芯片正式发布,成功跻身5G第一梯队!
抽丝剥茧C语言(高阶)动态内存管理+练习
分析RTP流丢包乱序
numpy的histogram2d()函数详解
[software test] - test case of image server project
CodeBlocks下载+界面优化+创建文件+常用快捷键
469-82(62、63、343、96)
网络爬虫DIY解决电商数据收集难题
Win11蓝屏代码0x0000001A的解决方法