npm run serve 运行过程

夜跑者

已于 2022-05-31 15:27:37 修改

阅读量3.3k

点赞数 2

分类专栏：前端工程化文章标签： npm vue.js 前端

于 2022-05-30 09:17:31 首次发布

本文链接：https://blog.csdn.net/liubangbo/article/details/125039853

版权

本文详细剖析了`npm run serve`的执行流程，从脚本来源、安装插件过程到执行插件回调函数。在`package.json`的scripts字段定义脚本，`npm run serve`实质上运行了`./node_modules/.bin/vue-cli-service`。`vue-cli-service`是一个核心插件，通过解析`devDependencies`和`dependencies`加载插件，执行插件的apply方法，最终调用webpack进行编译并实现热更新功能。

摘要由CSDN通过智能技术生成

之前文章分析过vue-cli创建工程项目过程Vue-cli(3.0 + ) 源码分析(一)_夜跑者的博客-CSDN博客_vue-cli源码

这篇文章看看我们经常运行的命令 npm run serve执行过程。

1. 脚本从哪里来

package.json中scripts字段定义脚本命令。scripts字段是一个对象，它的每一个属性，对应一段脚本。如下所示：

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

npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。当我们运行npm run serve时，其实运行的是./node_modules/.bin/vue-cli-service 脚本。那么./node_modules/.bin/vue-cli-service 脚本怎么来的呢？其实./node_modules/.bin/vue-cli-service 是个符号链接，指向了./node_modules/下安装vue-cli-service的地方，如下所示：

cli-service是在vue-cli创建项目工程时安装的一个核心插件，这个核心插件中的package.json中有bin字段，如下所示：

如果package.json中有bin字段，那么在安装这个库的过程中，就会在./node_modules/.bin目录下生成一个符号链接指向当前目录下定义脚本文件的地方。

到这里我们弄清楚了，运行npm run serve，就是运行./node_modules/cli-service/bin/vue-cli-service.js 脚本文件， serve 是参数。下面就开始分析一下脚本执行过程

2. 执行脚本过程- 安装插件

vue-cli-service.js脚本非常简单，总共不到40行，源码如下：

#!/usr/bin/env node

const { semver, error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

if (!semver.satisfies(process.version, requiredVersion, { includePrerelease: true })) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
  )
  process.exit(1)
}

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'inline-vue',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
const command = args._[0]
console.log('liubbc command: ', command, '; args: ', args, '; rawArgv: ', rawArgv)
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

new 了一个service对象，执行对象的run方法，就这么简单。先看一下传给run方法的打印：