开发插件
提示
在阅读该指南之前,你最好先了解一下 VuePress 的 架构 。
创建一个插件
插件是一个符合 插件 API 的普通 JavaScript 对象,称之为 插件对象 :
const fooPlugin = {
name: 'vuepress-plugin-foo',
// ...
}
插件还可以是一个接收 App 实例 作为参数,且返回值为 插件对象 的函数,称之为 插件函数 :
const barPlugin = (app) => ({
name: 'vuepress-plugin-bar',
// ...
})
插件通常需要允许用户传入配置,因此我们一般都会提供给用户一个函数来接收配置,然后将 插件对象 或者 插件函数 作为返回值。于是,你的插件应该转换成这样的形式:
const fooPlugin = (options) => ({
name: 'vuepress-plugin-foo',
// ...
})
const barPlugin = (options) => (app) => ({
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 上搜索到你的插件。