本节篇幅较长，小伙伴要耐心读完，相信对vue的启动原理会有更好的认识。

前言

上节我们简单说了一下，在我们创建完一个vue项目的时候，执行 npm run serve命令所发生的一些，不过因为篇幅的原因，我没有继续往下深入讲解。因为很多朋友在读特别长的文章的时候，会产生反感，消化学习的也不好，会产生适得其反的效果。不过还是有很多朋友想要继续深入了解一下背后的原理。

我们现在接上节的内容继续说一下，先来回顾上节内容，主要是说了两方面：

当我们在命令行中输入 npm run xxxx的时候，其实就是执行 package.json文件里的 scripts里的某个命令
npm run serve命令之后，就是开启了一个服务来运行我们的项目，这是 WebpackDevServer开启的服务

如果还没有阅读上节内容的小朋友可以先阅读一下，不阅读，也可以先记住上面的结论，继续阅读。

Vue：npm run serve 到底做了什么？

继续分析执行流程

先来看一下目录结构：

当我们通过运行 npm run xxx命令的时候，首先会根据 package.json 配置文件找到 scripts 标签下的某个命令。如：npm run dev，就会找到 dev对应的内容，看一下json内容：

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

实际上运行 npm run dev就是运行 vue-cli-service serve这行命令。那么这行命令是如何执行的呢？

当我们执行这个命令的时候，npm工具会把package.json同级目录下的 node_modules/.bin目录加入到系统的环境变量path中去，然后执行完之后再把目录从环境变量path中删除。我们来看一下node_modules/.bin的内容：

这里面其实大部分都是一个链接文件，也就是一个快捷方式，注意我标红的地方就是要执行的命令：

vue-cli-service

它是 ../@vue/cli-service/bin/vue-cli-service.js目录的链接，真正执行的是这个目录下的脚本文件。我们进入这个目录看一下内容：

接下来我们重点分析一下几个比较重要的的内容：

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

const rawArgv = process.argv.slice(2)
// ... 省略无关代码
const command = args._[0]

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

这里调用了 service.run方法开启了一个服务，看一下这个方法的第一参数 command 就是 vue-cli-service serve 命令行中的 serve 。接下来看一下 ../lib/Service 文件中的 run 方法。

// Service.js

/*
 内容较多，我们重点看一下 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)
  }

最终方法又调用一个 fn 方法。这个方法是 this.commands[name]对象中的方法，name就是上面提到的参数： serve

我们打印一下 this.commands 这个对象。

{
  serve: {
    fn: [AsyncFunction: serve],
    opts: {
      description: 'start development server',
      usage: 'vue-cli-service serve [options] [entry]',
      options: [Object]
    }
  },
  // 为了省空间，省去很多代码
}

这里我简单说一下，代码比较多，就不展开细说了：

在创建 Service这个对象的时候，构造函数里面初始了很多插件，其中就有 serve.js 脚本里面的插件。fn方法就是插件的具体执行方法。如开发模式下就调用开发模式的插件方法，打包模式就调用开发模式的插件方法。

我们继续看一下开发模式下的插件方法：

serve.js脚本在 command目录下，打开内容：

红线标注的就是具体的执行方法，也就是前面说的 fn方法

方法内容比较长，我简单说下主要的事情：

创建一个 WebpackDevServer 服务，然后在最后开启这个服务。

这个方法里面还有我们比较熟悉的几行提示信息：

当我们 npm run serve 控制台会有几行信息输出：

 App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.103:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

在这个方法都可以找到，这几个提示：

至此，就算分析完整个流程了。

总结一下：

npm run serve ---> package.json ---> scripts ---> 'serve':' vue-cli-service serve'
vue-cli-service 就是 node_modules/.bin --> @vue/cli-service/bin/vue-cli-service.js
通过装配各种插件，最终调用各个插件的方法，完成不同的功能。对于开发环境来说就是开启一个 WebpackDevServer服务。具体的服务实现，可以去看一下webpack的实现。

我们知道，vue 通过 webpack的一些功能来完成开发和打包功能，webpack运行是需要node环境的。

本节篇幅较长，小伙伴要耐心读完，相信对vue的启动会有更好的认识。

网站首页 > 精选文章正文

vue:我和node、webpack的情深似海

前言

继续分析执行流程

猜你喜欢

网站首页 > 精选文章 正文

vue:我和node、webpack的情深似海

前言

继续分析执行流程

猜你喜欢

网站首页 > 精选文章正文