道招

以webpack为例来看微内核架构

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

以webpack为例来看微内核架构

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

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

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

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

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

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

相关文章

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

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

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

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

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

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

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

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

用webpack的require.context() 简化你的代码

随着我们的项目越来越大,平时的常见用操作就会觉得很‘麻烦’了,比如每次要添加新的路由, vuex里面添加新的module等 { name: 'moduleN', 阅读更多…

从vuecli3学习webpack记录(三)基类Tapable和Hook分析

在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',( 阅读更多…

关注道招网公众帐号