Не обошлось без препятствий

Итак, я переехал в этот коттедж в Нью-Йорке рядом с таинственным особняком. Я купил его по хорошей цене, но чувствовал, что кто-то наблюдает за мной из особняка. Кажется, это был мистер Гэтсби. Кхм..

Извините, это другая история. Давай начнем сначала.

На этой неделе я начал свой первый проект в стиле Гэтсби. Gatsby — это фреймворк на основе React для создания статически сгенерированных веб-сайтов и приложений. Его экосистема содержит плагины, темы и так называемые рецепты, которые автоматизируют определенные задачи. Официальный сайт говорит:

Создайте полноценный веб-сайт за то время, которое обычно уходит на создание прототипа

Я был очень взволнован, чтобы попробовать и посмотреть, правда ли вышесказанное. У меня было хорошее первое впечатление, но я столкнулся с некоторыми препятствиями. Однако не все были связаны с Гэтсби. Посмотрим, как это было.

Первоначальная настройка была довольно простой. Вы можете запустить следующие команды, чтобы запустить проект:

npm install -g gatsby-cli
gatsby new projectname
cd projectname
gatsby develop

Что дальше? Мы могли бы создать некоторые компоненты React и отобразить, например, заголовок. Но есть ли какая-то структура, которой я должен следовать? Давайте спросим мистера Гэтсби.js. Оказывается, у нас есть папки /page и /templates внутри /src. Там тоже много конфигурационных файлов!

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

Мне не нужно создавать много страниц, потому что мой проект одностраничен :-) Поэтому я оставлю там только файл index.js. А остальные папки?

  • Папка /plugins содержит все подключаемые модули для конкретных проектов («локальные»), которые не опубликованы в виде npm пакета.
  • Папка /public создается автоматически, когда мы запускаем gatsby build
  • /static — сюда можно поместить любой файл, который вы не хотите обрабатывать с помощью веб-пакета. Они будут скопированы в общую папку нетронутыми.

Статическая папка интересна, потому что я полагаю, что могу поместить туда активы, например, изображения. Возможно, вы захотите минимизировать свои изображения, чтобы оказалось, что статическая папка полезна только для нескольких менее распространенных сценариев.

Хорошо, а куда мне тогда поместить активы? Я создал папку /images внутри /src. Я сделал то же самое для компонентов. Давайте теперь посмотрим на плагины.

Плагины и стили

Плагины — это пакеты npm, которые вы можете установить с помощью командной строки, как вы уже привыкли, если работали над любым проектом внешнего интерфейса. Вы можете найти плагин для отзывчивых изображений, SEO, поддержки машинописи и тысячи других.

Думал, как сделать стайлинг. Есть также много вариантов на выбор:

  • Используя глобальные CSS-файлы с или без вы… Эм, я имею в виду компонент Layout
  • Использование стилизованных компонентов
  • Использование модулей CSS

Я еще не очень хорошо знаком с подходами CSS в JS, но я знал, что хочу использовать Sass. В любом случае мне нужно стилизовать только одну страницу, поэтому мне не нужно ничего необычного. Оказывается, есть еще плагин для использования Sass в Gatsby под названием gatsby-plugin-sass.

Я установил плагин с помощью следующей команды (обратите внимание также на node-sass)

npm install node-sass gatsby-plugin-sass

Затем нам нужно отредактировать файл gatsby-config.js и добавить:

plugins: [`gatsby-plugin-sass`]

Вот тут и появилась первая проблема. Пытаясь запустить свой проект, я читаю в консоли:

Node Sass версии 5.0.0 несовместим с ^4.0.0.

После некоторых других предложений я узнал, что LibSass и Node Sass устарели. Какие? Кто помнит реализацию на Ruby? Слова из песни Мадонны Hang up Время идет так медленно определенно не оправдали себя, когда дело касается веб-разработки. Тем не менее, есть новая реализация Dart, так что я попробовал.

npm install --save-dev sass

и в gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("sass"),
    },
  },
]

Отлично, это прекрасно работает, и я могу стилизовать компоненты, просто импортировав их в index.js:

import '../styles/styles.scss'

Они могли бы обновить плагин и установить реализацию Dart по умолчанию.

Типография

Для всего должен быть плагин, поэтому я искал «шрифты» в репозитории Gatsby. Первым результатом был gatsby-plugin-webfonts, поэтому я установил его.

// with npm
npm install gatsby-plugin-webfonts
// with yarn
yarn add gatsby-plugin-webfonts

О, еще одна ошибка:

ошибка gatsby-plugin-webfonts вызвала ошибку при выполнении жизненного цикла onPreBootstrap:

Я не уверен, что случилось. Этот пакет был загружен 34,8 тыс. раз.

Совет. Придерживайтесь одной системы управления пакетами. Используйте либо npm, либо пряжу

Я сделал еще один поиск и на этот раз выбрал gatsby-plugin-web-font-loader (106.1k), который работал просто отлично.

Как закомментировать JSX

Последнее, с чем у меня возникли трудности, это JSX. Я как всегда закомментировал код ярлыком, но выглядело это так:

// <div>
//     <span>some text</span>
// </div>

Это неправильный синтаксис, поэтому мне пришлось исследовать снова. Я просмотрел свои расширения и выяснил, в чем заключается проблема. Мне пришлось сделать следующее:

Удалите плагин Babel ES6/ES7 от dzannotti

Установите Babel JavaScript Майкла МакДермотта

Правильный синтаксис выглядит так:

{/*
   <div> 
     <span>some text</span> 
   </div>
*/}

Вывод

Есть много вещей, которые я не рассмотрел и должен изучить, но пока мне нравится Гэтсби. Он развивается очень быстро, и я также в восторге от рецептов (новая функция). Как они выразились в недавнем пресс-релизе

Когда пользователи входят в экосистему Gatsby, им приходится переводить фразу «Я хочу сделать x» в то, как это делается в Gatsby

Верно, я тоже так делал. Рецепты запускаются из CLI и автоматизируют общие задачи, такие как создание страниц и макетов, установка плагинов и многое другое. Я прихожу в мир React с некоторым опытом работы с Angular (который использует Angular CLI), поэтому я могу только ценить этот шаг к улучшению инструментов и предоставлению разработчикам более самостоятельных способов создания невероятно быстрых веб-приложений. Я также обнаружил, что IntelliSense (завершение кода) отстает от Angular, но это может быть связано с дизайном или недостатком знаний/настройкой расширения, поэтому я был бы признателен за ваше мнение по этому поводу.

Вы пробовали Гэтсби? Какие ваши любимые плагины?

Бонус — ярлыки VS Code:

перевод текста в нижний регистр => CTRL + K и CTRL + L
перевод текста в верхний регистр => CTRL + K и CTRL + U



Это вина Миро!
Информационный бюллетень о веб-интерфейсных технологияхmiro.substack.com