在Gatsby中使用插件

Gatsby.js 的最大特点之一是其令人难以置信的官方插件库。这个庞大的 Node.js 包集合直接接入了 Gatsby API，并提供了简单的方法来扩展/添加自定义功能到 Gatsby 网站，而无需添加太多额外的代码。在这篇简短的文章中，我们将介绍查找和实现这些插件的基础知识。

寻找 Gatsby 插件

在开始 Gatsby 项目时，寻找可以让您的工作更轻松的可用插件总是一个好主意！幸运的是，Gatsby 网站提供了一个巨大的可搜索库，里面装满了我们可以使用的官方插件。

继续并在新选项卡中打开该链接，然后向下滚动浏览一些可用的插件。它们按受欢迎程度排序，因此您可以很好地了解其他人经常使用的内容。当然，您也可以使用搜索栏！ 🔍👀

安装 Gatsby 插件

具体的插件安装说明可以在Gatsby插件库的每个插件页面中找到，你应该总是从那里开始以获得最佳效果。但总的来说，在 Gatsby 中安装插件是一个简单的两步过程！

1. 安装插件文件

由于这些 Gatsby 官方插件都是 Node.js 包，我们可以使用 npm install 或 yarn add 来安装它们。例如，我们可以像这样安装 gatsby-source-filesystem 插件：

$ yarn add gatsby-source-filesystem

一些插件还需要额外的对等依赖项，这将在插件的库页面上提及。一个很好的例子可以在 Using Styled Components in Gatsby 文章中找到，我们在其中安装了 Gatsby 插件 gatsby-styled-components 及其两个随附的对等依赖项：

$ yarn add gatsby-plugin-styled-components
$ yarn add styled-components babel-plugin-styled-components

2. 配置使用

至此，插件文件已添加到我们的站点——但我们仍需要在 Gatsby 中配置它们以使其正常运行！

为此，我们只需编辑网站根目录中的 gatsby-config.js 文件。所有插件配置都放在此文件的 plugins 数组中：

盖茨比-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-name`,
      options: {
        // plugin options, if any
      },
    },
    //...other plugins
  ]
}

通用格式如上面的代码，但具体配置取决于使用的插件。

请务必始终查看 Gatsby 插件库中的插件页面以获取最新的说明和配置选项。

Gatsby 文档中关于使用插件的示例代码是在 gatsby-config.js 中配置插件的各种方式的一个很好的示例：

盖茨比-config.js

module.exports = {
  plugins: [
    // Shortcut for adding plugins without options.
    "gatsby-plugin-react-helmet",
    {
      // Standard plugin with options example
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data/`,
        name: "data",
      },
    },
    {
      resolve: "gatsby-plugin-offline",
      // Blank options, equivalent to string-only plugin
      options: {
        plugins: [],
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // plugins inside plugins
        plugins: [`gatsby-remark-smartypants`],
      },
    },
  ],
}

注意 gatsby-plugin-react-helmet 使用的简写形式，因为没有使用配置选项。不仅代码更少，而且更容易阅读！

重启开发服务器！

现在我们已经在 gatsby-config.js 中安装并配置了插件，请务必重新启动开发服务器并进行测试以确保一切正常。

每当您编辑 gatsby-config.js 文件时，重新启动开发服务器至关重要，否则事情将无法按预期工作。

本地插件

也可以在本地加载插件，这使得加载私有和/或非官方插件成为可能！

最简单的方法是在站点的根目录中创建一个名为 plugins 的新目录，然后将本地插件文件放入其中。之后在gatsby-config.js中配置插件就和非本地插件完全一样了。

如果由于某些特殊原因您的本地插件需要位于不同的目录中，您可以简单地使用 require.resolve 将 Gatsby 指向它，如下所示：

盖茨比-config.js

module.exports = {
  plugins: [
    "gatsby-plugin-sitemap",
    {
      resolve: require.resolve(`/path/to/local-plugin`),
    },
  ],
}

创建自己的插件

如上所述，也可以构建自己的插件！虽然这些信息超出了这篇介绍性文章的范围，但如果您有兴趣了解更多信息，Gatsby 关于创建插件的文档包含一些令人惊叹的材料！ 🧠

最后的想法

Gatsby 是一个令人惊叹的网站构建工具，它的庞大的官方插件库是它的重要组成部分。希望这个简短的指南对您有所帮助，但当然可以在官方 Gatsby 插件文档中找到更多信息。

我绝对建议您熟悉几个流行的插件——因为它们无疑可以（并且将会）为您节省大量时间！ ⏳👈