如何为 Gridsome 使用自定义 Transformer？

Question

我有一种专有文件格式，我想在我的 Gridsome 网站中使用，其中每个文件都会生成一个新页面。据我了解，这正是您可以使用 Transformer 的目的。但是，我正在使用的文件类型的转换器不存在插件。是否可以创建自己的 Transformer 供私人使用？

我首先尝试简单地添加 source-filesystem 插件，但这给了我错误：No transformer for 'application/myformat' is installed.

plugins: [
      {
          use: "@gridsome/source-filesystem",
          options: {
              path: "files/**/*.myformat",
              typeName: "File"
          }
      },
  ]

我没有找到做类似事情的文档，这让我感到惊讶，因为它似乎一定是一个相当常见的用例。有人知道这样做的方法吗？

Answer 1

好吧，我已经弄清楚了，但似乎必须有更简单的方法。

在一个单独的项目目录中，我运行 npm init 创建了最低限度的 package.json （我的 T运行sformer 没有其他依赖项，你将有如果你有的话，把它们包括在这里）。

然后我在 package.json 中指定的“主”class 中添加了我的 T运行sformer class：

class Transformer {
    static mimeTypes () {
        return ['application/myformat']
    }

    parse (source) {
      let parsed = // whatever parsing is necessary
      return {
        parsed
      }
    }

    extendNodeType ({ graphql }) {
      return {
        // custom GraphQL fields for transformed node
      }
    }
}

module.exports = Transformer

接下来，从新目录运行 npm link，然后从您的主项目目录（将使用 T运行sformer），运行 npm link your-transformer-project-name.

最后，您应该将新的插件项目添加到主项目的 package.json 的 devDependencies 部分：

...
"devDependencies": {
  "gridsome-transformer-myformat": "^1.0.0"
}

如何为 Gridsome 使用自定义 Transformer？

How to use a custom Transformer for Gridsome?

vue.js

gridsome

gridsome-plugin