道招

从vuecli3学习webpack记录(零)整体流程

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

从vuecli3学习webpack记录(零)整体流程

今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的npm run serve的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手疼,不想写了吧。今天特来补充一下。

这里是整体脉络,所以不会讲细节,细节在本系列里面已经讲到了。

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',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
const command = args._[0]

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

既然我们一般执行的是vue-cli-service serve 所以,这里的command的值就是serve了 主要的内容就是在Service类了 在实例化Service的时候,做了什么? 初始化属性、注册插件 run方法干了什么?

  1. 初始化,调用init 方法
  2. 找到service实例的commands里面对应的serve的fn方法并执行

这里的init方法有必要多讲一点

  1. 加载环境
  2. 获取合并后的项目的webpack配置
  3. 更加配置更新webpackChainFns,webpackRawConfigFns
  4. 循环每个插件根据name将其注册到service实例的commands对象里面,注册的对象形如{fn: function...: opts: {}}
  5. 运行serve注册后的方法fn

上述注册过程如下

api.registerCommand('serve', {
    description: 'start development server',
    usage: 'vue-cli-service serve [options] [entry]',
    options: {
      '--open': open browser on server start,
      '--copy': copy url to clipboard on server start,
      '--mode': specify env mode (default: development),
      '--host': specify host (default: ${defaults.host}),
      '--port': specify port (default: ${defaults.port}),
      '--https': use https (default: ${defaults.https}),
      '--public': specify the public network URL for the HMR client
    }
  }, async function serve (args) {
    info('Starting development server...')
    ...
})

Service类的很多属性的获取与更新其实都是插件通过包一个统一类PluginAPI来完成的,暴露出来的fn方法其实就是上面的第三个参数,这里才是调用的核心。

总结

设计了一个核心Service,它的实例属性作为一个“容器”,同时设计了一个插件类PluginAPI来包装真正的插件内容, 但是呢,对这个容器的操作,却是每个PluginAPI实例来完成。循环每个插件完成注册,然后执行入口插件的注册的方法。

更新时间:
上一篇:Vue在chrome44偶现点击子元素事件无法冒泡下一篇:前端也会需要一个消费队列

相关文章

CKEditor富文本编辑器职责分离

背景 CKEditor富文本 编辑器 (生产版本1.1.1及以前)里面包含富文本基础插件及当前最新的邮件特定的业务插件(签名、快捷回复、邀评、默认样式、选择颜色、插入图片、粘贴模式) O端 阅读更多…

vue多语言的解决方案不只是 vue-i18n,前端+后端完整解决方案

网上搜很多vue多语言的,一般都是介绍vue-i18n怎么使用,当然这是不错的,但是我们如果只是讲这个的话,只是解决了静态文字的多语言化。 这一部分我们也简单讲一下 npm install 阅读更多…

用个数组来理解vue的diff算法(一)

原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…

参考教程实现WordPress更新博文通知钩子插件

搞一个更新博客文章的钩子插件,目前的功能是更新自己的PWA缓存版本 <?php /* Plugin Name: Daozhao Blog Description: wordp 阅读更多…

React router用hooks读取routeName、根据routeName跳转

在迁移Vue至React的过程中遇到了一些路由相关的问题,在Vue项目中经常会使用routeName,毕竟使用path太长了,也记不住,我自己看了看React router也没有发现routeNam 阅读更多…

wordpress使用多说插件后带来的问题

今天本想做个新建个页面,做个联通账号在线解密页面,以解决部分网友在路由器中输入“正确的”联通宽带的账号但无法拨号成功的问题,但是发现我使用自定义模板的方式创建的页面并没有如我的意愿来显示,而只是光秃秃 阅读更多…

关注道招网公众帐号
联系博主