从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前端
更新时间:
上一篇:下一篇: