从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前端
相关文章
从vuecli3学习webpack记录(一)vue-cli-serve机制
最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…
Vue2.6.10源码分析(一)vue项目怎么神奇的跑起来的
先看index.html的代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta 阅读更多…
WordPress钩子Action Hook与Filter Hook
WordPress的Action Hook与Filter Hook WordPress中的 Hook 有两种,分别是 Action Hook 及 Filter Hook ,一开始你可以先把这两种 阅读更多…
eclipse安装tomcat插件
tomcatPlugin插件下载和安装方法 下载安装Sysdeo Tomcat插件,用来管理Tomcat服务器,提供断点调试功能,并且能自动建立Tomcat环境,修改其配置文件,是一个不错的T 阅读更多…
参考教程实现WordPress更新博文通知钩子插件
搞一个更新博客文章的钩子插件,目前的功能是更新自己的PWA缓存版本 <?php /* Plugin Name: Daozhao Blog Description: wordp 阅读更多…
用个数组来理解vue的diff算法(一)
原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…