从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前端
相关文章
2021年的一点工作总结(一)迁移React技术栈
2021年全年的工作总结起来很简单,算是做苦力的一年吧。。。 2021年春节后就开始邮件项目从Vue迁移到React的工作以及富文本编辑器由wangEditor替换成CKEditor。 其实自己 阅读更多…
邮箱收件人组件(vue版)成长历程(一)
前期项目中需要优化原始的收件人、抄送、密送部分,换成更加现代化的样式和用户,当时将这部分抽象成一个组件了,最近的需求是发件人也要使用该组件,鉴于发件人比收件人等需要校验的地方和交互习惯变动点较多,进 阅读更多…
用个数组来理解vue的diff算法(一)
原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…
sae-eclipse插件加新浪sae进行java项目开发
1.首先当然是下载eclipse和sae-eclipse插件喽,sae-eclipse的 下载地址 . 2.在eclipse新建一个Dynamic Web Project ,然后再在WebCon 阅读更多…
修改高亮显示代码插件wp-syntax-button插件
wp-syntax-button插件按设计原理,在插入代码是背景是浅灰色的,但是我在后台也文章的时候,它却发神经的不显示背景,让我无法区分内容是否在代码的div内,老是要切换到html模式去看,繁琐, 阅读更多…
vue发送请求是应该在mounted还是在created生命周期
一个经常会被问到的问题: 为什么不在 created 里去发ajax? created 可是比 mounted 更早调用啊,更早调用意味着更早返回结果,那样性能不是更高? 首先,一 阅读更多…