开发插件

::: tip 在阅读该指南之前，你最好先了解一下 VuePress 的 架构 。 :::

创建一个插件

插件是一个符合 插件 API 的普通 JavaScript 对象，称之为 插件对象 ：

  1. const fooPlugin = {
  2.   name: 'vuepress-plugin-foo',
  3.   // ...
  4. }

插件还可以是一个接收 App 实例 作为参数，且返回值为 插件对象 的函数，称之为 插件函数 ：

  1. const barPlugin = (app) => {
  2.   return {
  3.     name: 'vuepress-plugin-bar',
  4.     // ...
  5.   }
  6. }

插件通常需要允许用户传入配置，因此我们一般都会提供给用户一个函数来接收配置，然后将 插件对象 或者 插件函数 作为返回值。于是，你的插件应该转换成这样的形式：

  1. const fooPlugin = (options) => {
  2.   return {
  3.     name: 'vuepress-plugin-foo',
  4.     // ...
  5.   }
  6. }
  8. const barPlugin = (options) => {
  9.   return (app) => {
  10.     return {
  11.       name: 'vuepress-plugin-bar',
  12.       // ...
  13.     }
  14.   }
  15. }

发布到 NPM

在创建了插件之后，你需要在 package.json 文件中遵循一定的约定，然后再将其发布到 NPM 上：

  1. {
  2.   "name": "vuepress-plugin-foo",
  3.   "keywords": [
  4.     "vuepress-plugin"
  5.   ]
  6. }
  • 将 name 按照约定命名，即 vuepress-plugin-xxx 或 @org/vuepress-plugin-xxx ，它应该和 插件对象 的 name 字段保持一致。
  • 在 keywords 中包含 vuepress-plugin ，这样用户可以在 NPM 上搜索到你的插件。