道招

以webpack为例来看微内核架构

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

以webpack为例来看微内核架构

微内核系统一般分为两个部分——核心系统插件系统,这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块,它提供的是通用逻辑(比如Tapable),而插件系统这是些具体的逻辑(比如HtmlWebpackPlugin插件)。 比如系统怎么跑起来,插件之间怎么通信等模块都属于核心系统里面,让系统更加丰富多彩就是插件系统了。 插件之间可以相互独立,也可以有依赖,比如webpack的ModernModelPlugin插件就依赖HtmlWebpackPlugin插件。

核心系统怎么知道哪些插件可用呢?

这就需要注册表了,其实我们的webpack.config.js就起到了这样的作用,它告诉我们需要使用哪些插件。

插件系统和核心系统怎么通信呢?

这就需要用到Tapable了,里面有各种hooks,并且在运行各个生命周期过程中会执行对应的回调了。我们的核心系统有生命周期的概念,插件里面也有,因为它们的架构是类似的。 我们的核心系统在运行后会先读取注册表信息,这个过程其实就是订阅事件,注册回调的过程。插件可以在运行回调的过程中再不断订阅自己需要的其它事件,注册其它回调。ModernModelPlugin插件就订阅HtmlWebpackPlugin插件的某些事件,注册自己的回调的。 服务于具体逻辑的插件模块是独立于核心系统之外的,但是他可能会需要操作核心模块的系统服务来实现这些定制化功能,此时核心系统需要提供一个上下文对象(Context),当然,插件模块与外部进行交互只允许通过此上下文对象完成。上下文对象提供了基础操作(调起其他插件模块、调起系统服务、获取系统信息)的API和事件。 这样待核心系统的生命周期顺序执行的过程,也就伴随这对应时期的插件的生命周期交替执行,生命周期走完了,整个程序流程也就结束了。

更新时间:
上一篇:道招网终于完成改版了下一篇:vue内置组件keep-alive源码解析

相关文章

从vuecli3学习webpack记录(一)vue-cli-serve机制

最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…

webpack反向代理proxyTable设置

目前各大打包工具在本地开发时都是使用的http-proxy-middleware插件 具体以vue为例,反向代理配置的就是proxyTable proxyTable: { 'ht 阅读更多…

从vuecli3学习webpack记录(四)vue是怎么进行默认配置的

在我们讲到 从vuecli3学习webpack记录(一)vue-cli-serve机制 vue cli3中在commands文件夹里面的是调用api.registerCommand方法,在 阅读更多…

webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks

最近在这段时间刚好在温故下webpack源码,webpack5都出来了,4还不再学习下? 这次顺便学习下webpack的常用插件html-webpack-plugin。 发现这个插件里面还额外加入了 阅读更多…

用webpack的require.context优化vue store和router文件

早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧 store 阅读更多…

回顾下跨域解决方案http-proxy-middleware

我们在React(或Vue)项目本地开发过程中很容易由前端自己解决跨域问题,这里面就用到的是插件 http-proxy-middleware ,它并不是webpack独享的插件,而是一个通用插件,它 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了