尝试写一个 vuepress 插件答案

【问题标题】：Trying to write a vuepress plugin尝试写一个 vuepress 插件
【发布时间】：2020-07-22 14:49:57
【问题描述】：

（关于编写插件的文档非常少……）

目标

创建一个插件来为页面添加标题。

尝试

按照指南创建了一个插件和一个示例插件（大概可以工作......）来做类似的事情。

问题

插件无法加载。

config.js

  plugins: [
    [
    'vuepress-plugin-headertags',
    { headerTags: ["<script src='https://cdn.jsdelivr.net/npm/netlify-identity-widget@1.5.2/build/netlify-identity-widget.min.js'></script>"]}
    ]
  ],

（在这种情况下，

插件 index.js

const { path } = require('path')
// was:  const { path } = require('@vuepress/shared-utils')
// dunno.  No documentation on this...
// got the current version from the 'default-theme' code

module.exports = (options) => ({
  define () {
    return {
      headerTags: options.headerTags || []
    }
  },
  enhanceAppFiles () {
    return [path.resolve(__dirname, 'enhanceAppFile.js')]
  },
  globalUIComponents: ['HeaderTags']
})

插件安装 我将它作为vuepress-plugin-headertags 发布到npm，然后安装它：

yarn add -D vuepress-plugin-headertags

这里是相关的 package.json 内容：

{
  "name": "vuepress-netlifycms",
  "version": "0.0.0",
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build",
    "debug": "node --nolazy --inspect=9229 /home/rickb/.yarn/bin/vuepress build"
  },
  "devDependencies": {
    "vuepress": "^0.14.8",
    "vuepress-plugin-headertags": "^1.0.3"
  },
  "dependencies": {}
}

VUEPRESS 安装

我从 git 克隆了 vuepress 存储库并做了一个 yarn 链接，这使它在全球范围内可用。有了它，我可以通过“调试”脚本在调试器中跟踪它。

追踪

我已经在调试器中跟踪了 VP 源代码，并在 moduleResolver.js 中找到了 resolvePathPackage()。传入路径不正确：

/home/(...)/VuePress-NetlifyCMS/vuepress-plugin-headertags

应该是：

/home/(...)/VuePress-NetlifyCMS/node_modules/vuepress-plugin-headertags

无论如何，即使在“标准化”过程之后，它也无法解决。

更多的眼睛

我需要更多的关注来帮助我解决这个问题。该项目已经在 github 上以“rickbsgu/VuePress-NetlifyCMS.git”的形式发布。如果您进行安装，插件将位于 'node_modules/vuepress-plugin-headertags' 下的项目目录中

任何想法表示赞赏

【问题讨论】：

你知道你可以在 VuePress 中配置head，对吧？我建议你将 VuePress 升级到最新版本 1.4.0，升级后我收到一个错误，导致我出现错误：const path = require('path')。我不确定这是否需要在 VuePress 中使用 documented。
哈！不，我没有看到。当然，它仍然需要加载。我使用的是 1.4.0 版，直接从 github 存储库中提取。因此，如果您遇到错误，则表明它正在为您加载，这比我得到的要远。谢谢。
必须考虑为什么它会为您加载而不是为我加载。也许在我的环境中有些东西不太对劲？使用“head”指令会将插件简化为单个文件实体，这肯定会更简单。但是，我希望看到完整的实施工作，以供将来参考。
糟糕 - 我的 package.json 中有一个 vuepress，版本错误。没有得到我新拉的版本。认为这就是问题所在。

标签： plugins vuepress

【解决方案1】：

现在可以了。两个问题：

我正在运行/调试的版本与 package.json 中的版本不同。有 vuepress 可执行文件和插件所需的 vuepress 库。该库在运行时始终是旧版本。
我需要将 index.html 中的路径导入从 const { path } = require('path') 更改为 const { path } = require('@vuepress/shared-utils'). 这是我的文档问题 - 我没有看到任何地方记录。

感谢 @Sun Haoran 让我找到正确的位置。

【讨论】：