Поделиться через

Начало работы с Gatsby.js в Windows

  • Статья

Это руководство поможет установить и настроить веб-платформу Gatsby.js в среде Windows.

Gatsby.js — это платформа генератора статических сайтов на основе React.js без визуализации на сервере, как Next.js. Генератор статических сайтов создает статический код HTML во время сборки. Для этого не требуется сервер. Next.js создает HTML в среде выполнения (каждый раз, когда поступает новый запрос), что требует запуска сервера. Кроме того, Gatsby определяет, как обрабатываются данные в приложении (с помощью GraphQL), тогда как при использовании Next.js это решение принимаете вы.

Дополнительные сведения о React и других платформах JavaScript на основе React см. в статье Общие сведения о React.

Необходимые компоненты

Для работы с этим руководством нужно настроить среду разработки Node.js. Для этого:

  • Установите последнюю версию Windows 10 (версия 1903+, сборка 18362+) или Windows 11.
  • Установите подсистему Windows для Linux (WSL), включая дистрибутив Linux (например, Ubuntu), и убедитесь, что она работает в режиме WSL 2. что можно проверить, открыв PowerShell и выполнив команду wsl -l -v;
  • Установите Node.js в WSL 2, включая диспетчер версий, диспетчер пакетов, Visual Studio Code и расширение для удаленной разработки.

Рекомендуем при работе с приложениями Node.js использовать подсистему Windows для Linux для повышения производительности, обеспечения совместимости системных вызовов и экспериментирования с серверами Linux и контейнерами Docker.

Внимание

При установке дистрибутива Linux в WSL будет создан каталог \\wsl\Ubuntu-20.04 для хранения файлов (замените Ubuntu-20.04 дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите корневой каталог с помощью команды cd ~, а затем введите команду explorer.exe .. Не устанавливайте Node.js и не настраивайте хранение файлов, с которыми вы будете работать, на подключенном диске C (/mnt/c/Users/yourname$). Это существенно замедлит установку и сборку.

Установка Gatsby.js

Чтобы создать проект Gatsby.js:

  1. Откройте терминал WSL (т. е. Ubuntu).

  2. Создайте новую папку проекта: mkdir GatsbyProjects и введите этот каталог: cd GatsbyProjects

  3. Используйте NPM для установки Gatsby CLI: npm install -g gatsby-cli. После установки проверьте версию с помощью gatsby --version.

  4. Создайте проект Gatsby.js: gatsby new my-gatsby-app

  5. После установки пакета замените каталоги на папку нового приложения cd my-gatsby-app, а затем используйте code ., чтобы открыть проект Gatsby в VS Code. Это позволит просмотреть инфраструктуру Gatsby.js, созданную для приложения, в проводнике VS Code. Обратите внимание на то, что экземпляр VS Code открыла приложение в среде WSL-Remote (как указано на зеленой вкладке в левом нижнем углу окна VS Code). Это означает, что хотя вы используете VS Code для редактирования в ОС Windows, приложение по-прежнему работает в ОС Linux.

    Расширение WSL-Remote

  6. После установки Gatsby следует знать 3 команды:

    • gatsby develop для запуска экземпляра разработки с горячей перегрузкой;
    • gatsby build для создания рабочей сборки;
    • gatsby serve для запуска приложения в режиме рабочей среды.

    Откройте терминал WSL, интегрированный в VS Code (Вид > Терминал). Убедитесь, что путь терминала указывает на каталог проекта (т. е. ~/GatsbyProjects/my-gatsby-app$). Затем попробуйте запустить экземпляр разработки нового приложения с помощью gatsby develop

  7. После завершения компиляции нового проекта Gatsby отобразится терминал.You can now view gatsby-starter-default in the browser. http://localhost:8000/ Выберите эту ссылку на localhost, чтобы просмотреть созданный проект в веб-браузере.

Примечание.

Вы заметите, что в выходных данных терминала также есть сведения о том, что вы можете "Просматривать GraphiQL, в браузерной интегрированной среде разработки, чтобы изучить данные и схему своего веб-сайта: http://localhost:8000/___graphql."GraphQL объединяет все API-интерфейсы в интегрированную среду разработки с самодокументированием (GraphiQL), встроенную в Gatsby. Помимо изучения данных и схемы сайта, можно выполнять такие операции GraphQL, как запросы, изменения и подписки. Дополнительные сведения см. в статье Introducing GraphiQL (Введение в GraphiQL).

  1. Откройте файл src/pages/index.js в редакторе VS Code. Найдите заголовок страницы <h1>Welcome to <b>Gatsby!</b></h1> и измените его на <h1>Hello <b>World!</b></h1>. Если веб-браузер по-прежнему открыт http://localhost:8000, сохраните изменения и обратите внимание, что функция горячей перезагрузки автоматически компилирует и обновляет изменения в браузере.

    Приложение Gatsby.js, выполняемое на localhost:8000

Отладчик VS Code можно использовать с приложением Gatsby, выбрав клавишу F5 или выбрав команду "Просмотреть отладку" (CTRL+SHIFT+D) и просмотреть > > консоль отладки (CTRL+SHIFT+Y) в строке меню. Если выбрать значок шестеренки в окне "Отладка", будет создан файл конфигурации запуска (launch.json), в котором будут сохранены сведения о конфигурации отладки. Дополнительные сведения см. в разделе об отладке в VS Code.

Значок настройки в окне отладки VS Code с launch.json

Дополнительные сведения о Gatsby доступны в документации по Gatsby.js.