从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发送请求是应该在mounted还是在created生命周期
一个经常会被问到的问题: 为什么不在 created 里去发ajax? created 可是比 mounted 更早调用啊,更早调用意味着更早返回结果,那样性能不是更高? 首先,一 阅读更多…
用在线IDE写vue代码
上周末无意中发现了一个新的在线IDE,网址glitch.com,个人感觉很不错,于是顺便关注了下其它的在线IDE,比如codesandbox.io也不错,没有细看,可能自己已经先入为主的喜欢上glit 阅读更多…
markdown是不会用还是不好用?自研vscode插件来帮忙,甲方运营人员大呼好用
背景 随着使用markdown语法编写内容越来越流行,有的程序员也开始给甲方做网站时使用markdown来编写文章了,比如用hexo博客系统建站。 使用markdown语法能减轻程序员寻找富 阅读更多…
element-ui表单源码解析之el-input
关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里 阅读更多…