1.APISIX 简单的源码自定义插件开发步骤
2.手摸手写个webpack plugin
3.markdown-it 源码分析及插件编写：parse 和 token（1/3）
4.Vue—关于插件（源码级别的插件分析+实践）

APISIX 简单的自定义插件开发步骤

       基于 APISIX 3.2 版本进行插件开发和运行，过程相对简单。做成开发插件主要使用 Lua 语言，插件将源代码放入默认插件目录下即可。源码默认插件安装路径为 /usr/local/apisix，做成插件目录为 /usr/local/apisix/apisix/plugins。插件lora资料 源码编写插件时，源码可以直接修改已有插件的做成源代码或编写新插件至该目录。在完成编写并启用插件后，插件重启 APISIX 将自动加载。源码对于使用 Docker 运行的做成环境，可以在外部编写插件并映射至容器内部指定位置，插件无需创建额外层级。源码

       在第三方目录编写插件时，做成要求插件父目录包含 apisix/plugins 子目录，插件以保持与默认结构一致。外部路径添加到配置文件中，注意相同名称的插件会覆盖现有插件。若选择在默认目录下开发，无需配置，可参考内置 example-plugin.lua 示例代码，复制并修改即可。新建插件如 example-plugin2.lua，仅需实现基本功能。

       插件配置通过复制并更新 config-default.yaml 文件中的如何找源码网站 plugins 部分至 config.yaml，确保不覆盖原有插件。对于 Docker Compose 启动方式，插件可映射至容器内部指定位置。重启 APISIX 后，可尝试添加路由并访问数据平面服务，查看 APISIX 日志以获取插件输出信息。

       插件开发基于原理可扩展更多功能，实现更复杂的应用场景。此过程强调代码的灵活性和配置的适应性，以便开发者根据需求构建特定功能的插件。

手摸手写个webpack plugin

       本周的任务是深入了解和编写webpack插件。插件是什么？它实际上是一个具有 apply 方法的JavaScript对象，更准确地说，就是一种函数。它可以是普通的函数，也可以是特殊的函数，用于实现特定功能。

       相比loader，插件可以解决一些loader无法处理的场景，比如在打包开始前进行环境配置、打包结束后发送通知邮件等。例如，HtmlWebpackPlugin插件可以帮助我们在dist文件夹下自动生成index.html文件，并在其中自动引入打包后的2022企业发卡源码css和js脚本文件。安装并配置插件后，运行打包指令，可以看到生成的index.html文件自动引入了生成的main.js脚本文件。

       接下来，我们深入探讨HtmlWebpackPlugin的源码，了解如何编写插件。通过观察源码，我们可以发现插件是通过apply方法在特定生命周期内执行操作。以HtmlWebpackPlugin为例，其在初始化阶段会利用Compiler提供的hook函数，实现生成html文件并引入资源的功能。

       为了更深入理解插件的工作原理，我们可以执行yarn run webpack命令，跟踪webpack的运行过程，了解不同hook函数的调用时机和作用。例如，afterDone钩子函数会在打包完成后触发，用于执行发送通知邮件等操作。通过观察Compiler类的实现，我们可以理解如何在插件中访问和利用Compiler实例对象，以及如何在特定钩子函数的回调中实现自定义逻辑。

       接下来，我们以一句话需求为例，实现一个在webpack打包后发送通知邮件的微霸程序源码插件。首先，我们需要安装nodemailer库以实现邮件发送功能。然后，根据需求编写插件代码，利用Compiler提供的hook函数，如afterDone，实现邮件发送逻辑。运行webpack后，我们可以看到通知邮件被成功发送。为了方便他人使用，我们还可以将自定义插件发布到npm仓库。

       在插件开发中，还有一些重要的概念，如SyncHook和AsyncHook，它们分别用于同步和异步操作。另外，了解如何在插件中正确使用这些概念，对于提高插件的可复用性和功能性至关重要。官方文档提供了关于编写插件的详细指导，建议开发者深入学习。

       总之，通过本篇文章的学习，我们不仅掌握了webpack插件的基本概念和使用方法，还深入探讨了其原理和实战应用。燕窝真的溯源码希望这些知识能帮助开发者在实际项目中灵活运用插件，提升开发效率。

markdown-it 源码分析及插件编写：parse 和 token（1/3）

       markdown-it 是一个广受欢迎的 JavaScript Markdown 解析库，它提供了强大的插件系统，简化了 Markdown 转换为 HTML 的过程。然而，其文档相对晦涩，初学者可能难以理解如何编写插件。本文旨在通过阅读 markdown-it 的源码，为想要开发插件的读者提供一些启示。首先，让我们简要了解一下 markdown-it 的基本使用方法。

       使用 markdown-it 的核心方法包括 `render` 和 `parse`。`render` 方法直接将 Markdown 转换成 HTML，而 `parse` 方法则将 Markdown 转换成 token，之后使用 `renderer.render` 方法将这些 token 转换成 HTML。实际上，`render` 方法就是调用了 `parse` 和 `renderer.render` 的组合。

       为了更清晰地解释这些流程，本文将分为两部分：Markdown 解析为 token 和 token 转换为 HTML。在深入源码之前，建议读者先尝试使用 markdown-it，以便在阅读过程中更好地理解代码。

       下面，我们开始阅读 markdown-it 的源码，建议读者在阅读本部分内容前，先自己动手试用 markdown-it，这样能帮助你更好地理解下面的内容。强烈建议读者从官方链接克隆源码，跟随本文一起阅读。

       步骤 1：无需过多解释，我们直接从步骤 2 开始。步骤 2：实例化。实例化涉及初始化几个变量并对配置进行处理。这部分对理解代码逻辑影响不大，故不详细展开。主要关注点在于初始化过程。

       步骤 3：Markdown 解析为 token。在深入分析具体代码之前，先看下生成的 token 是什么样子。我们将通过一个例子来展示 parse 后的 token 结构。

       在分析源码前，不妨先看看 parse 后的 token 大致是什么样。例如，一个简单的 Markdown 文本通过 parse 后会生成一个包含多个 token 的数组，每个 token 包括类型、内容等信息。你可以在官方文档中查看完整的 token 内容。查看 token 的过程，建议点击右上角的 debug 功能。

       token 包含头尾两个元素，中间的 token 通常表示 Markdown 的某一特定元素，如文本、链接、列表等。这些中间的 token 与特定的类型绑定，比如 inline 类型。inline 类型的 token 通常包含子 token，这些子 token 用于处理 Markdown 语法中更复杂的元素，例如标记、列表等。

       下面，我们将重点讲解 parse 的核心规则。解析流程主要分为两步：初始化状态和应用预定义规则。状态初始化用于保存解析过程中的信息，而规则应用则负责将 Markdown 转换成 token。在源码中，解析流程涉及核心规则，包括 block 规则和 inline 规则。

       block 规则是处理 Markdown 中的块元素，如段落、列表等。inline 规则则关注处理 Markdown 中的内联元素，如文本、超链接等。通过理解这些规则，可以深入理解 markdown-it 如何将复杂的 Markdown 文本解析为结构化的 token。

       在解析流程中，block 规则会调用特定的函数来处理每行文本，而 inline 规则则应用于每一个需要解析的 token。理解这些规则有助于编写自定义插件，从而扩展 markdown-it 的功能。

       深入理解 markdown-it 的源码需要耐心和细致，本文仅提供了一个大致的框架和关键点的概述。希望本文能为正在开发或计划开发 markdown-it 插件的读者提供一些启示。在后续的篇章中，我们将分别探讨 markdown-it 的渲染流程和插件编写技术，敬请关注。本文由 GitHub 上的 WPL/s 发布。

Vue—关于插件（源码级别的插件分析+实践）

       Vue插件的原理基于Vue的`use`方法，该方法接收一个函数或者提供`install`方法的对象作为参数，如果传入的参数是函数，这个函数会被当作`install`方法。在Vue 2.6.版本中，`use`方法内部使用`initUse`函数给Vue添加了一个静态方法`use`。以vuex为例，它暴露了一个`install`方法，通过`Vue.use(vuex)`来安装插件。vuex的`install`函数会调用`applyMixin`函数，并将Vue传递过去。`applyMixin`函数在Vue 2.x版本中会直接使用`Vue.mixin`来扩展功能，通过在组件的`beforeCreate`钩子中初始化vuex插件。

       在Vue中使用混入（mixin）是一种设计模式，可以轻松地被子类继承功能，目的是实现函数复用。Vue中也应用了这一设计模式，通过`Vue.mixin`可以用来分发可复用逻辑。混入可以分为全局混入和局部混入，全局混入会影响所有的Vue实例，如果组件中与mixin中具有同名的属性，会进行选项合并，除了生命周期外，其它的所有属性都会被组件自身的属性覆盖。使用混入可以节省代码量，类似于类继承。

       要自己实现一个提示框插件，可以通过`this.$notify()`进行调用，并且可以传入自定义模板。创建一个Vue工程，在`src`目录下新建`plugin`目录，然后创建一个`notify`目录，新建`index.js`和`Notify.vue`。在`index.js`中，引入`Notify.vue`组件，并通过`install`方法中注入的Vue来完成功能。实例挂载之后才可以访问`$el`选项，可以通过`Vue.use`来使用插件，然后在App.vue中验证功能是否正常。要实现传入模板并且显示出来，可以通过`$mount` API手动挂载一个实例，并在调用`$notify`方法时将挂载的元素插入到文档中。通过创建Vue组件，将DOM、JS、Style都创建好，最后调用`$notify`方法将组件插入到页面中。要实现传入模板，可以使用`v-html`指令来插入模板，并在Notify.vue中新增接收参数的方法。在App.vue中传递一段模板，页面上操作的效果为显示提示框，两秒后消失。