npm run xxx 工作流程

358 阅读1分钟

当你创建了一个vue项目 vue create 项目名, npm run xxx时的部分流程

以npm run serve运行项目举例 (serve 只是一个代理名字和自己定义,但尽量语义化),npm run是npm run scrip的简写,调用运行在vue的配置文件package.json中的scrpit的配置项。

1.运行npm ru serve 可以运行项目,运行npm run vue-cli-service就不可以呐。

1. 首先,npm run vue-cli-service这奥指令是不存在的,那我们为什么可以用npm run serve 来执行那     

2.  那是因为我们在安装依赖,执行npm i xxx的时候,npm在安装这个依赖的时候,在
node_modules/.bin/的目录中为文明创建好了3个名叫 vue-cli-service(xxx)的可执行文件,这些文件
表示的是一个个的软连接,有些文件头部有#!/bin/sh表示这是一个脚本文件,而软连接文件来自package-lockjson

3. 当我们调用serve的时候运行时,webpackDevServe开启了一个服务,当你使用npm run xxx命令
的时候,会根据你packagejson配置文件找到script标签下的调试命令执行 (此时npm会自动的将
node_modules/bin目录添加到$PATH的环境变量中,执行完毕后有自动的删除),通过软连接找到对应
node_modules/.bin的映射文件, 通过.cmd文件的执行处理脚本文件,并调用@vue/cli-
service/bin/vue-cli-service.js文件,调用service.run方法开起一个服务:
   
service.run:

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

第一个参数command就是表示的serve这个参数

最后由调用了Service.js中的asycn.run方法
async run (name, args = {}, rawArgv = []) {
    const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])

     this.setPluginsToSkip(args)

    this.init(mode)

    args._ = args._ || []
    let command = this.commands[name]
    if (!command && name) {
      error(`command "${name}" does not exist.`)
      process.exit(1)
    }
    if (!command || args.help || args.h) {
      command = this.commands.help
    } else {
      args._.shift() // remove command itself
      rawArgv.shift()
    }
    const { fn } = command
    return fn(args, rawArgv)
  }