VuePress开发插件

来自泡泡学习笔记
BrainBs讨论 | 贡献2023年8月12日 (六) 15:36的版本 (创建页面,内容为“== 创建一个插件 == 插件是一个符合 插件 API 的普通 JavaScript 对象,称之为 ''插件对象'' : <syntaxhighlight lang="ts">const fooPlugin = { name: 'vuepress-plugin-foo', // ... }</syntaxhighlight> 插件还可以是一个接收 App 实例 作为参数,且返回值为 ''插件对象'' 的函数,称之为 ''插件函数'' : <syntaxhighlight lang="ts">const barPlugin = (app) => { return { name: 'vuepress-plugin-bar',…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳到导航 跳到搜索

创建一个插件

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

const fooPlugin = {
  name: 'vuepress-plugin-foo',
  // ...
}

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

const barPlugin = (app) => {
  return {
    name: 'vuepress-plugin-bar',
    // ...
  }
}

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

const fooPlugin = (options) => {
  return {
    name: 'vuepress-plugin-foo',
    // ...
  }
}

const barPlugin = (options) => {
  return (app) => {
    return {
      name: 'vuepress-plugin-bar',
      // ...
    }
  }
}

发布到 NPM

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

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