| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 运行 npm run xxx 如何触发构建命令以及启动Node服务等功能? -> 正文阅读 |
|
[JavaScript知识库]运行 npm run xxx 如何触发构建命令以及启动Node服务等功能? |
? 在前端开发的工作当中,使用npm run xxx命令启动本地开发环境。但是当执行npm run xxx命令后,究竟是如何触发各种构建工具的构建命令以及启动 Node 服务等功能的呢? ?首先我们要知道,node作为JavaScript的运行时,可以把.js文件当做脚本来运行 执行npm run xxx时,首先会去项目的package.json文件中查找scripts里找对应的xxx,然后执行xxx的命令,例如启动vue项目 npm run dev的时候,就是执行了vue-cli-service serve这条命令。 ? 既然npm run xxx是为了执行vue-cli-service serve,那为什么不直接执行vue-cli-service serve? ? 之所以不直接执行vue-cli-service serve,是因为系统中不存在存在vue-cli-service serve指令。 ? 既然系统中不存在vue-cli-service serve指令,为什么执行npm run dev的时候,也就是执行vue-cli-service serve,为什么这样它就能成功,而且不报指令不存在的错误呢? ? 首先我们在安装依赖的时候,是通过npm install?来执行的,我们在安装vue/cli-service依赖的时候,就会在node_moduless/.bin/目录下创建好vue-cli-service为名的几个可执行的文件。 ? .bin目录不是任何一个 npm 包。目录下的文件仅仅表示一个个软链接,打开文件可以看到文件顶部写着?#!/bin/sh,表示这是一个脚本。 ? ? 因此使用npm run dev 执行vue-cli-service serve时,我们系统虽然没有安装vue-cli-service serve的全局命令,但npm会到node_moduless/.bin中找到vue-cli-service文件作为脚本来执行,所以npm run dev相当于执行了node_moduless/.bin/vue-cli-service serve.。 ? .bin 目录下的文件既然表示一个个软连接,那.bin目录下的那些软连接文件是怎么来的呢?它又是怎么知道这条软连接是执行哪里的呢? ? vue create xxx创建项目后,我们可以在最外层的package-lock.json中看到"vue-cli-service": "bin/vue-cli-service.js",从package-lock.json中可知,当我们vue create xxx创建项目时,npm 将 bin/vue-cli-service.js 作为 bin 声明了。 ? 所以在 npm run dev时,npm读到该配置,就将该文件软链接到 node_modules/.bin目录下,?npm 还会自动把node_modules/.bin加入PATH(环境变量),就可以直接作为命令运行依赖程序和开发依赖程序,不需要全局安装了。 ? npm install的时候,npm帮我们把这种软链接配置好了(软链接相当于映射),执行npm run dev时,就会到node_modules/.bin中找对应的映射文件,然后再找到相应的js文件来执行。 ??node_modules/bin中有三个vue-cli-service文件,为什么会有三个文件呢? ??windows一般是调用了vue-cli-service.cmd这个文件,这是windows下的批处理脚本,运行vue-cli-service serve这条命令时,相当于运行node_moduless/.bin/vue-cli-service.cmd serve,这个脚本会使用 node 去运行vue-cli-service.js这个js文件,node中可以使用一系列系统相关的api ,去完成整个过程。 总结 运行npm run xxx时,npm会先在当前目录的node_moduless/.bin查找要执行的程序并执行。没找到时会去全局目录node_moduless/.bin查找、安装到当前目录并执行;全局目录没有找到,就会从path(环境变量)中查找可执行程序。? 关注前端公众号(前端杂记),获取更多前端技术,共同成长 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 | -2025/1/11 12:57:29- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |