Экосистема плагина Gatsby существует, когда пришло время прекратить переписать ту же шаблон и абстрагировать ее в модуль, чтобы поделиться с другими и остановить себя в будущем переписать и поддерживать тот же код в разных проектах.
Подход «Подключить и играть» к плагинах Gatsby всегда очаровывал меня. Я давний пользователь GraphQL, и очень приятно иметь возможность сбросить плагин, определить запрос и попросить Гэтсби вызвать внешний API, такой как без головы API .
В этом коротком руководстве мы рассмотрим, как я создал плагин Gatsby для популярного Statickit API
Statickit – это бэкэнд без сервера для статических сайтов.
Я рекомендую подписаться, если вам когда -нибудь нужно иметь дело с формами на статическом сайте. Я использую Statickit для нескольких моих побочных проектов и постоянно удивляется опытом разработчика.
Если вы работаете с React, Staticit ожидает, что вы установите Идентификатор сайта Анкет При использовании Gatsby вы, скорее всего, захотите использовать wrootelement API внутри gatsby- {ssr, браузер} .js Таким образом, все страницы внутри вашего приложения Gatsby имеют доступ к контексту Statickit.
Если у вас еще нет gatsby- {ssr, браузер} .js Файл, тогда это создание одного, чтобы добавить поставщика вокруг вашего приложения, просто может показаться ненужным шариком, особенно если вам нужно повторить это на нескольких сайтах Gatsby. Мы можем избежать этого, создав плагин Gatsby, который обрабатывает это для нас.
То же самое можно сказать о создании gatsby-config.js Файл, но, вероятно, близко к тому, что вы будете добавлять больше плагинов для упрощения настройки.
Как должен работать плагин?
Что ж, мы еще ничего не создали, кроме давайте рассмотрим, насколько просто должно быть установка поставщика Statickit …
yarn add gatsby-plugin-statickit # npm install gatsby-plugin-statickit
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-statickit`,
options: {
siteId: '...',
},
},
];
Как вы видите, прежде всего, нам нужно сделать, это пройти SiteId к Gatsby-Plugin-Statickit плагин И это позаботится об остальных.
На самом деле, это все, что нам нужно. 😍
Создайте плагин
У Гэтсби есть фантастическая документация о Создание собственного плагина Поэтому я бы порекомендовал вам следить за этим, если вы создаете что -то более изощренное, чем то, что мы собираемся в этом посте.
Я начал с создания локальный плагин Папка с именем плагины/gatsby-plugin-statickit Анкет
Внутри здесь я создал следующие файлы:
Gatsby-Ssr.jsGatsby-Browser.jsgatsby-node.jsindex.jspackage.json
Внутри Package.json , дайте вашему пакету имя, описание и версию.
{
"name": "gatsby-plugin-your-plugin-name",
"description": "Give your plugin a description.",
"version": "1.0.0",
"main": "index.js",
"keywords": [
"gatsby",
"gatsby-plugin",
"your-plugin-name"
]
}
Поскольку я собирался создать плагин, чтобы автоматически обернуть свое приложение с помощью StatickitProvider Было важно, чтобы я объявил Statickit и Gatsby обе обоими зависимости от сверстников.
cd plugins/gatsby-plugin-statickit yarn add -P @statickit/react gatsby
Примечание: -P объявляет @statickit/React зависимость от сверстников.
Мы используем здесь зависимости со сверстниками, так как мы не хотим связывать нашу собственную версию @statickit/React Но вместо этого полагайтесь на конечного пользователя, чтобы установить его в их приложении. Это означает, что в любое время обновления зависимостей нам не придется обновлять код плагина, если не существует нарушающих изменений!
Улучшить опыт разработчиков
Поскольку мы объявляем зависимости со сверстниками с помощью нашего плагина, это не было бы большим опытом для того, чтобы кто -то установил наш плагин, чтобы попытаться использовать его без зависимостей со сверстниками. Они столкнулись с ошибками, и это не то, что мы хотим!
Внутри gatsby-node.js мы попробуйте разрешить @statickit/React Зависимость, иначе мы поймать Любые ошибки и бросайте их пользователю.
// gatsby-node.js
try {
require.resolve('@statickit/react');
} catch (err) {
throw new Error(`
'@statickit/react' is not installed. You must install this to use 'gatsby-plugin-statickit'`);
}
Теперь, если мы попытаемся добавить наш плагин в gatsby-plugins.js И запустите наше заявление, нас будут предупреждены, если мы не встретимся с зависимостью от сверстников @statickit/React Анкет
Я не слишком обеспокоен проверкой Гэтсби Поскольку это будет брошено самим вашим применением, так как не было бы Гэтсби Зависимость, найденная для этого!
Код плагина
Гэтсби экспортирует wrootelement от API -интерфейсов узел к обоим Gatsby-Browser.js и gatsby-ssr.js Анкет
Давайте сначала добавим следующее в Gatsby-Browser.js :
export { wrapRootElement } from './gatsby-ssr';
Здесь мы в основном пишем чистый код, ( Извините, Дан ), поэтому нам нужно только объявить wrootelement однажды.
Теперь внутри Gatsby-Ssr.js Мы выполним магию!
Поскольку мы используем JSX, нам нужно импортировать React. Мы также импортируем StatickitProvider от @statickit/React и используйте это, чтобы обернуть корень элемент Анкет
import React from 'react';
import { StaticKitProvider } from '@statickit/react';
export const wrapRootElement = ({ element }, { siteId }) => {
if (!siteId)
throw new Error(
`'siteId' must be provided when using 'gatsby-plugin-statickit' `
);
return {element} ;
};
Здесь происходит несколько вещей … Первый аргумент оборачивание Это элемент реагирования «корень», построенный Гэтсби, и вторым аргументом является наш плагинопции Объект, содержащий параметры, определенные в Gatsby-config.js .
Нам нужен SiteId из плагинопции Чтобы сначала проверить, что это существует и если это так, добавьте его в качестве опоры в StatickitProvider Анкет
Тогда все, что нам нужно сделать внутри нашего wrootelement Функция возвращает поставщик {element} как дети.
Вот и все! Теперь у нас есть полностью функционирующий плагин, который делает то, что мы хотим.
Окончательный код можно найти на GitHub и Npm .
Огромное спасибо Деррик Для создания потрясающего API!
Оригинал: “https://dev.to/notrab/start-creating-your-own-gatsby-plugins-jc0”