Gatsbyでのプラグインの使用

投稿日: 2022-04-20 2022-10-24
タグ: GatsbyJS

Gatsby.js の最大の機能の1つは、すばらしい公式プラグインライブラリです。このNode.jsパッケージの大規模なコレクションは、Gatsby APIを直接利用し、余分なコードを追加することなく、GatsbyWebサイトにカスタム機能を拡張/追加する簡単な方法を提供します。この短い記事では、これらのプラグインを見つけて実装するための基本について説明します。

Gatsbyプラグインの検索

Gatsbyプロジェクトを開始するときは、作業を簡単にするために利用可能なプラグインを探すことをお勧めします。幸い、GatsbyのWebサイトには、使用できる公式プラグインが満載の巨大な検索可能なライブラリが用意されています。

先に進み、新しいタブでそのリンクを開き、利用可能なプラグインのいくつかを下にスクロールします。それらは人気順にソートされているので、他の人々が定期的に使用しているものを知ることができます。もちろん、検索バーを利用することもできます！ 🔍👀

Gatsbyプラグインのインストール

特定のプラグインのインストール手順は、 Gatsbyプラグインライブラリの各プラグインのページにあります。最良の結果を得るには、常にから開始する必要があります。しかし、一般的に、Gatsbyにプラグインをインストールするのは簡単な2ステップのプロセスです！

1. プラグインファイルをインストールします

これらの公式GatsbyプラグインはすべてNode.jsパッケージであるため、次を使用してインストールできます。 npm install また yarn add. たとえば、 gatsby-source-filesystem このようなプラグイン：

$ yarn add gatsby-source-filesystem

一部のプラグインには追加のピア依存関係も必要です。これについては、プラグインのライブラリページで説明します。この良い例は、GatsbyプラグインをインストールするGatsbyでのスタイル付きコンポーネントの使用の記事にあります。 gatsby-styled-components およびそれに付随する2つのピア依存関係：

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

2. 使用するように構成する

この時点で、プラグインファイルはサイトに追加されていますが、機能させるには、Gatsbyでプラグインファイルを構成する必要があります。

それを実現するには、編集する必要があります gatsby-config.js 当社のウェブサイトのルートディレクトリにあるファイル。すべてのプラグイン構成は、 plugins このファイルの配列：

gatsby-config.js

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

一般的な形式は上記のコードと似ていますが、特定の構成は使用されているプラグインによって異なります。

最新の手順と構成オプションについては、Gatsbyプラグインライブラリのプラグインのページを常に確認することが重要です。

プラグインの使用に関するGatsbyドキュメントのこのサンプルコードは、プラグインを構成できるさまざまな方法のすばらしい例です。 gatsby-config.js:

gatsby-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は、Webサイトを構築するためのすばらしいツールであり、その公式プラグインの膨大なライブラリは、その方法の大きな部分を占めています。この短いガイドがお役に立てば幸いですが、もちろん、公式のGatsbyプラグインドキュメントで詳細を確認できます。

人気のあるプラグインのいくつかに精通することを強くお勧めします—間違いなく多くの時間を節約できます（そしてそうするでしょう）。 ⏳👈

getdocs

13036