В предыдущей статье мы обсуждали, как настроить проект Phaser 3 с помощью веб-пакета, а также написали для него конфигурацию разработки. Здесь мы обсудим варианты примера конфигурации webpack для продакшена (да, они будут немного отличаться). Если вы не читали первую часть статьи, посетите здесь.

Профессиональный совет:

Я создал пакет npm под названием @cdebadri/phasercli (например, create-react-app), с помощью которого фазерные игры можно легко настроить с помощью веб-пакета с помощью одной команды. Если вам нужен расширяемый инструмент и универсальное решение для настройки фазерных игр с веб-пакетом без написания стандартного кода, используйте его. Теперь продолжим статью.

В идеале для производства мы бы хотели, чтобы наша игра была минимизирована, т. е. манипулировала исходным кодом, чтобы занимать минимум места. Кроме того, Минификация имеет дополнительный бонус: она снижает читабельность кода javascript в браузере. Для минификации мы установим пакет с именем terser-webpack-plugin. Итак, в терминале нашего проекта напишем:

npm i terser-webpack-plugin --save

Давайте добавим файл с именем webpack.config.js в корень проекта и скопируем следующий код:

Обратите внимание, что в этом файле конфигурации мы не добавили ключ mode в объект конфигурации. Это связано с тем, что mode по умолчанию имеет значение производство. Кроме того, нет devtool по сравнению с конфигурацией разработчика в предыдущей статье. Рекомендуемый выбор для производственных сборок — none. Проверить варианты devtool можно здесь.

Итак, наш конфиг prod webpack тоже готов.

Далее нам нужно подумать о том, как обслуживать файлы по запросу. Отныне наиболее эффективным способом было бы загрузить папку build в корзину AWS S3, и она была бы доступна через общедоступный URL-адрес. Но S3 относительно дорог, если вы уже исчерпали лимит уровня бесплатного пользования (как я!) и вам нужны дешевые варианты развертывания, вы хотели бы развернуть статический файловый сервер на любом из многих доступных языков программирования и их фреймворков. Ради этой статьи я выбрал NodeJS, это также мог быть любой фреймворк или сервер PHP, Perl, Python, Ruby и т. д.

Во-первых, мы установим экспресс — облегченную структуру узлов.

npm i express --save

Мы создадим файл server.js в корне проекта и запишем следующий код:

const express = require('express');
const app = express();
app.use('/static', express.static('build/static'));
app.use(express.static('build/dist'));
app.listen(3000, () => {
  console.log('server started at 3000');
});

Затем в терминале:

npm run build

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

Далее для запуска сервера пропишем в терминале:

node server.js

Затем, когда сервер запущен и работает, мы можем перейти в любой браузер и нажать localhost:3000 (я запускаю приложение на порту 3000). Там должен быть первый экран вашей игры!