道招

以webpack为例来看微内核架构

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

以webpack为例来看微内核架构

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

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

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

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

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

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

相关文章

怎么调试Webpack+React项目,报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办

今天在WebStorm上Windows上准备调试一个React项目,就出现了这样的报错。 Node Parameters里面写的是webpack-dev-server的执行文件 .\node_mod 阅读更多…

从vuecli3学习webpack记录(二)webpack分析

上一篇里面讲到运行 npm run serve 时运行的是 serveice.run(comand, args, rawArgv) 并且提到它提示返回的是一个promise,所以后面还接着 .cat 阅读更多…

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

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

从vuecli3学习webpack记录(零)整体流程

今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手 阅读更多…

webpack笔记——hook执行时call的是什么

我们一般使用的插件都是Hook子类,比如SyncHook,没有复杂的重写基类Hook的compile方法 先看Hook基类 // node_module/tapable/Hook.js cla 阅读更多…

webpack反向代理proxyTable设置

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

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