从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
方法干了什么?
- 初始化,调用init 方法
- 找到service实例的commands里面对应的serve的fn方法并执行
这里的init
方法有必要多讲一点
- 加载环境
- 获取合并后的项目的webpack配置
- 更加配置更新webpackChainFns,webpackRawConfigFns
- 循环每个插件根据name将其注册到service实例的commands对象里面,注册的对象形如
{fn: function...: opts: {}}
- 运行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
实例来完成。循环每个插件完成注册,然后执行入口插件的注册的方法。
- 分类:
- Web前端
相关文章
用个数组来理解vue的diff算法(一)
原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…
邮箱收件人组件(vue版)成长历程(一)
前期项目中需要优化原始的收件人、抄送、密送部分,换成更加现代化的样式和用户,当时将这部分抽象成一个组件了,最近的需求是发件人也要使用该组件,鉴于发件人比收件人等需要校验的地方和交互习惯变动点较多,进 阅读更多…
eclipse添加插件
eclipse做为当下最流行的开源IDE之一,Eclipse的一大优势就在于其无数优秀的插件。一个好的插件可以大大的提高我们的工作效率,学习如何安装Eclipse插件自然也是必修课了。下面介绍Ecli 阅读更多…
Vue同一路由跳转页面不刷新解决方案及注意事项之二
之前写过一个 《Vue同一路由跳转页面不刷新解决方案及注意事项》 ,在这篇文章里面鞋到了怎么解决这个问题,具体内容可以点击查看,这里简单说一下,就是利用将时间戳传给路由的query,也就导致 $ro 阅读更多…
CKEditor富文本编辑器职责分离
背景 CKEditor富文本 编辑器 (生产版本1.1.1及以前)里面包含富文本基础插件及当前最新的邮件特定的业务插件(签名、快捷回复、邀评、默认样式、选择颜色、插入图片、粘贴模式) O端 阅读更多…
2021年的一点工作总结(一)迁移React技术栈
2021年全年的工作总结起来很简单,算是做苦力的一年吧。。。 2021年春节后就开始邮件项目从Vue迁移到React的工作以及富文本编辑器由wangEditor替换成CKEditor。 其实自己 阅读更多…