Плагины Gatsby: основы использования

Development | Amber | Комментировать запись

Классная официальная библиотека плагинов – одно из самых важных преимуществ 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

Некоторые плагины имеют ряд зависимостей, которые будут перечислены на странице библиотеки плагина. К примеру, плагин gatsby-styled-components устанавливается с двумя связанными с ним зависимостями:

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

Читайте также: Использование styled-components в Gatsby

2: Настройка плагина

На данный момент файлы плагина (и зависимостей, если они есть) добавлены на сайт, и теперь нужно настроить их в Gatsby, чтобы они работали.

Для этого просто нужно отредактировать файл gatsby-config.js, который хранится в корневом каталоге веб-сайта. Все конфигурации плагинов помещаются в массив plugins в этом файле:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-name`,
      options: {
        // опции плагина, если таковые есть
      },
    },
    //...другие плагины
  ]
}

Так выглядит общий формат, но конкретная конфигурация зависит от плагина.

Примечание: Важно всегда консультироваться с инструкциями в библиотеке плагинов Gatsby, ведь там можно найти самые свежие конфигурации.

Посмотрите на следующий пример кода из документации по плагинам Gatsby. В нем представлены различные способы настройки плагинов в файле gatsby-config.js:

module.exports = {
  plugins: [
    // быстрая настройка плагинов без опций
    "gatsby-plugin-react-helmet",
    {
      // пример стандартного плагина с опциями
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data/`,
        name: "data",
      },
    },
    {
      resolve: "gatsby-plugin-offline",
      // пустые опции, что эквивалентно string-only плагину
      options: {
        plugins: [],
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // плагины в плагинах
        plugins: [`gatsby-remark-smartypants`],
      },
    },
  ],
}

Обратите внимание на сокращенную форму gatsby-plugin-react-helmet – в ней нет никаких параметров конфигурации. Код занимает меньше места и его проще читать.

Перезагрузка сервера разработки

Теперь, когда вы установили и настроили плагины в gatsby-config.js, обязательно перезапустите сервер разработки и убедитесь, что все работает правильно.

Примечание: Очень важно перезапускать сервер разработки каждый раз, когда вы редактируете файл gatsby-config.js, иначе конфигурация будет работать не так, как вы того ожидаете.

Локальные плагины

Кроме того, плагины можно загружать локально. Это значит, что вы можете загружать пользовательские и неофициальные плагины

Самый простой способ сделать это – создать в корневом каталоге сайта новый каталог по имени plugins, а затем поместить в него локальные файлы плагинов. После этого нужно настроить плагин в gatsby-config.js – это делается точно так же, как и с официальными плагинами.

Если по какой-то особой причине ваш локальный плагин должен находиться в другом каталоге, можете просто направить в него Gatsby через require.resolve:

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

Разработка пользовательских плагинов

Выше мы уже упоминали пользовательские плагины. Да, в Gatsby можно создавать собственные плагины! Однако эта информация выходит за рамки данной статьи. Обратитесь к документации Gatsby, если хотите узнать больше.

Заключение

Gatsby – потрясающий инструмент для создания веб-сайтов, и библиотека официальных плагинов – огромное его преимущество. Надеюсь, это краткое руководство сосредоточено на основах работы с плагинами. Конечно же, в официальной документации Gatsby можно найти более подробную информацию.

Рекомендуем вам ознакомиться с несколькими популярными плагинами – они могут сэкономить вам много времени.