👨 作者简介:大家好,我是Taro,前端领域创作者
✒️ 个人主页:唐璜Taro
🚀 支持我:点赞👍+📝 评论 + ⭐️收藏
前言
当我们已然是一位大师,拉下来项目后, 行云流水的打下了 npm install
,再去项目的package.json文件里找scripts 里找对应的启动命名xxx,npm run xxx
,一套组合拳下来,项目启动成功
一、package.json文件
{
"name": "vue",
"version": "2.0.10",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
}
二、运行步骤
例如启动vue项目 npm run serve
的时候,实际上就是执行了 vue-cli-service serve
这条命令
1. 运行命令
代码如下(示例):
npm run serve
2. 执行命令
(1) 为什么 不直接执行vue-cli-service serve
而要执行 npm run serve
呢?
答:因为直接执行vue-cli-service serve会报错,系统中不存在 vue-cli-service 这条全局指令
(2) 为什么通过 npm run serve
执行 vue-cli-service serve
就可以成功呢?
答:在通过npm install 安装依赖的时候,是会在node_modules/.bin/ 目录中创建好vue-cli-service 为名的几个可执行文件
这些目录表示一个个软链接,打开文件可以看到顶部写着 #!/bin/sh ,对于#! 不了解的可以看一下我往期的文章 (JS文件头部 #!/usr/bin/env node 到底执行什么了)
当 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 作为参数传入)
(3) bin目录下为什么会有3个同名文件?
在.bin目录下,一般针对一个依赖模块,会有3个可执行文件, 三者都是用node执行一个js文件
- 没有后缀名的是对应Unix系的shell脚本
- .cmd为后缀名的是windows bat脚本
- .ps1为后缀名的则是PowerShell中可执行文件(可以跨平台)
(4)bin目录下的软连接文件是哪里来的呢?它又是怎么知道这条软连接是执行哪里的呢?
答:我们以 vue-cli-service
为例,在新建的vue项目里进行搜索。可以看到在 npm install
的时候,就将bin/vue-cli-service.js 作为bin声明(bin是命令名到本地文件名的映射 — 官方解释)
- 运行 npm run xxx的时候,npm 会先在当前目录的 node_modules/.bin 查找要执行的程序,如果找到对应的映射文件,然后会在找到相应的js文件来执行;
- 没有找到则从全局的 node_modules/.bin 中查找,npm i -g xxx就是安装到到全局目录;
- 如果全局目录还是没找到,那么就从 path 环境变量中查找有没有其他同名的可执行程序
总结
例如:以上就是今天要讲的内容,本文介绍了 npm run 命令运行后的调用顺序