Vue3源码学习-番外 | 初探Vue-Cli

oversize的前端男孩
190 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

Vue3源码学习-番外 | 初探Vue-Cli

特别说明：本文是在网友 猫哥 的带领下初识Vue-Cli源码！我是站在巨人的肩膀上进行总结。好！猫哥牛逼！

image.png

序言

这次学习的源头是来自我前几篇的文章 面试官：了解Webpack吗，能不能基于Webpack手动搭建简易Vue项目 。对于这篇文章，猫哥的评价是 “瞎搞”。咳咳，大家有兴趣看个开心就行。

本篇文章是针对vue-cli在webpack的作用下如何打包生成，或者通俗的来讲就是当运行Vue项目，在终端敲下npm run serve时，它的内部代码是如何实现的。

正文

“故事的开头极具温柔，到底怎么样的一个结果才配的上这一路的颠沛流离”

引入场景

  • 引出问题

相信刚开始接触Vue的掘友们在运行项目的时候 可能大概应该 都是在终端命令行敲下npm run serve，大家有没有想过这几个问题：

  • 为什么是 run?
  • 为什么是 serve?
  • 为什么在命令行输入这段命令，咱们就可以打开项目，在页面上看到效果？

嘿嘿！不知道吧？！（大佬除外，咳咳）好吧，我刚开始也不知道，那咱就接着往下看吧。

  • 关键点

相信看到标题的各位也猜的出是什么在作祟了。没错！就是Vue-Cli。这边直接先上个npm run serve的总体代码：

class Service{
    init(){
    // 拉取用户配置 和 vue-cli 默认配置合并
    merge()
    },
    run(){
       webpack()
    }
}

可以看到，上面的代码主要分为两步：

  • init() 这是拉取并合并用户配置和Vue-Cli默认配置
  • run() 这是配合webpack相关内容来打包并运行项目

走进代码

  • 获取代码

命令行输入

vue create 项目名

上面的命令将会用vue-cli创建一个最基础的Vue项目 得到的项目代码目录：

├─ node_modules
├─ .gitignore
├─ babel.config.js
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  │  └─ HelloWorld.vue
│  └─ main.js
└─ vue.config.js
  • 找到代码

好！现在让我们打开node_modules,现在就是在找vue-cli的源码！算了就不卖关子了，代码在： node_modle @vue/cli-service

查看 @vue/cli-service package.json 文件 bin 选项，这是入口指向：

// node_modules/@vue/cli-service/package.json
"bin":{
    "vue-cli-service": "bin/vue-cli-service.js"
}

也可以理解成：当npm run serve时，运行的就是bin/vue-cli-service.js这个 js 文件，有点node的意思了。

抓到了这条藤蔓，显然我们接下来就会去看 bin/vue-cli-service.js这个文件里面的代码了,把目光移到两行代码：

// node_modules/@vue/cli-service/bin/vue-cli-sevice.js

// 从'../lib/Service'中导出 Service （node的写法）
const Service = require('../lib/Service')

// 传入的是绝对路径
const service = new Service(process.cwd())

其中的process是一整个过程的属性配置（也可以理解成是cli的默认配置），想知道的掘友可以在console.log(process)，然后运行项目，你将会在终端看到一大串的属性和配置。而上面代码中的process.cwd()是项目的绝对路径。

  • 顺藤摸瓜

从上面的代码require('../lib/Service')可以知道最核心的代码来自于Service.js文件中，好！现在就让我跳转到这个js文件中一探究竟。

不过砖家建议还是别看了（我不会告诉你是我自己看懂），因为它里面写了很多配置项和很多东西，切确的说应该是一时间看不懂的（大佬自行忽略我的措辞），在这里为大家整理了主要配置和作用：

module.exports = class Service {
  constructor() {
    // 装载vue-cli 不同配置对应的webpack 配置 例如 serve build命令
    this.plugins

    // 打包最终配置
    this.projectOptions={}

    //  命令对应的 打包函数  例如{ serve:fn }
    this.commands = {}
  }

  init() {
    // 将this.plugins 初始化后得出 命令对应的 打包函数

    // 加载用户配置
    // const userOptions = this.loadUserOptions()
    // this.projectOptions = defaultsDeep(userOptions, defaults())

    // this.plugins.forEach(({ id, apply }) => {
    //   if (this.pluginsToSkip.has(id)) return
    //   // new PluginAPI(id, this)
    //   apply(new PluginAPI(id, this), this.projectOptions)
    // })

    // 以上代码副作用等于
    this.commands = { serve: () => { } }
  }

  // 最终执行webpack操作
  run(name = 'serve') {
    const command = this.ommands[name]
    const { fn } = command
    return fn()
  }
}

嗷，Service.js文件中的核心代码都在上面啦，还有相关的注释，好好看，好好学！

  • 回到 node_modules\@vue\cli-service\bin\vue-cli-service.js

看最后的一句代码就好了service.run()

在边看源码的掘友们肯定会想：

这个博主怎么回事，省略了那么多！

但是仔细想想哈，当run起来的时候，就是像这个函数中传入默认配置 和 用户自定义配置罢了

末尾

本文只是大致的讲述了npm run serve的流程，如有错误请大家斧正！嗷嗷嗷嗷！

avatar
文章
阅读
粉丝