ЧЗВ и распространенные проблемы

Дата обновления перевода 2023-01-17

ЧЗВ и распространенные проблемы

Как мне развернуть мои ресурсы Encore?

При развёртывании ваших ресурсов, стоит помнить 2 важные вещи.

1) Скомпилируйте ресурсы для производства

Оптимизируйте ваши ресурсы для производства, выполнив:

1
$ ./node_modules/.bin/encore production

Это уменьшит ваши ресрусы и выполнит другие оптимизации производительности. Ура!

Но, на каком сервере стоит выполнять эту команду? Это зависит от того, как вы развёртываете. Например, вы можете выполнить её локально (или на сервере построения), и использовать rsync или что-то еще, чтобы перенести построенные файлы на ваш сервер. Или, вы можете разместить ваши файлы на сервере производства вначале (например, через git pull), а потом выполнить эту команду на производстве (в иделе, до того, как до вашего кода дойдёт трафик). В этом случае, вам понадобится установить Node.js на вашем сервере производства.

2) Развёртывайте только построенные ресурсы

Единственные файлы, которые нужно развёртывать на ваших серверах производства - это финальные, построенные ресурсы (например, каталог public/build). Вам не нужно устаналивать Node.js, разверните webpack.config.js, каталог node_modules или даже ваши файлы источников ресурсов, кроме случаев, когда вы планируете запускать encore production на вашей машине производства. Когда ваши ресрусы будут построены, они будут единственным, что должно жить на сервере производства.

Нужно ли мне устанавливать Node.js на моём сервере производства?

Нет, разве что вы планируете построит ваши ресурсы производства на вашем сервере прозводвства, что не рекомендуется. См. Как мне развернуть мои ресурсы Encore?.

Какие файлы мне стоит отправить в git? А какие стоит игнорировать?

Вам стоит фиксировать все ваши файлы в git, кроме каталога node_modules/ и построенных файлов. Ваш файл .gitignore должен включать в себя:

1
2
3
/node_modules/
# любой путь, который вы передаёте Encore.setOutputPath()
/public/build

Вам стоит зафиксировать все ваши файлы источников ресурсов, package.json и yarn.lock.

Моё приложение живёт в подкаталоге

Если ваше приложение не живёт в корне вашего веб-сервера (т.е. оно живёт в подкаталоге, вроде /myAppSubdir), вам просто нужно сконфигурировать это при вызове Encore.setPublicPath():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack.config.js
Encore
    // ...

    .setOutputPath('public/build/')

-     .setPublicPath('/build')
+     // это ваш *настоящий* публичный путь
+     .setPublicPath('/myAppSubdir/build')

+     // теперь это неоходимо, чтобы ваши ключи manifest.json keys всё ещё были `build/foo.js`
+     // (что является файлом, используемым функцией Symfony)
+     .setManifestKeyPrefix('build')
;

Если вы используете сокращения Twig encore_entry_script_tags() и encore_entry_link_tags() (или обрабатываете ваши ресурсы через entrypoints.json или каким-то другим способом), вы закончили! Эти методы сокращений считывают файл entrypoints.json , который теперь будет содержать подкаталог.

"jQuery не определён" или "$ не определён"

Эта ошибка случается, когда ваш код (или какая-то используемая вами библиотека) ожидает, что $ или jQuery будет глобальной переменной. Но, когда вы используете Webpack и require('jquery'), никакие глобальные переменные не устаналиваются.

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

Непойманная ReferenceError: webpackJsonp не определён

Если вы получаете эту ошибку, то это скорее всего потому, что вы забыли добавить тег script для файла runtime.js, который содержит время выполнения Webpack. Если вы используете функцию Twig encore_entry_script_tags(), этого не должно произойти: тег скрипта файла отображается автоматически.

Эта зависимость не была найдена: некоторый модуль в ./path/to/file.js

Обычно, после того, как вы устанавливаете пакет через yarn, вы можете запросить / импортировать его для использования. Например, после запуска yarn add respond.js или npm install respond.js, вы пробуете запросить этот модуль:

1
require('respond.js');

Но вместо того, чтобы всё работало, вы видите ошибку:

Эта зависимость не была найдена:

  • respond.js in ./assets/app.js

Обычно, пакет будет "рекламировать" свой "главный" файл, добавляя ключ main к его package.json. Но иногда, старые библиотеки не будут иметь этого. Вместо этого, вам нужно будет конкретно требовать файл, который вам нужен. В этом случае, файл, который вам нужно использовать, находится в node_modules/respond.js/dest/respond.src.js. Вы можете потребовать его через:

1
2
// потребовать неуменьшенный файл, если это возможно
require('respond.js/dest/respond.src.js');

Мне нужно запустить Babel в стороннем модуле

Из соображений производительности, Encore не обрабатывает библиотеки внутри node_modules/ через Babel. Но вы можете изменить это с помощью метода configureBabel(). См. Конфигурирование Babel, чтобы узнать больше.

Как мне интегрировать мою конфигурацию Encore в мой IDE?

Интеграция Webpack в PhpStorm и другие IDE делает вашу разработку более продуктивной (например, разрешая псевдонимы). Однако, вы можете столкнуться с этой ошибкой:

1
2
3
4
Encore.setOutputPath() еще не может быть вызван, так как окружение выполнения
похоже еще не сконфигурировано. Убедитесь в том, что вы используете выполняемое
encore или для начала вызовите Encore.configureRuntimeEnvironment(), если вы
специально не вызываете Encore напрямую.

Ошибка происходит потому, что Окружение выполнения Encore конфигурируется только тогда, когда вы его запускаете (например, при выполнении yarn encore dev). Исправьте эту проблему, вызвав методы Encore.isRuntimeEnvironmentConfigured() и Encore.configureRuntimeEnvironment():

1
2
3
4
5
6
7
8
// webpack.config.js
const Encore = require('@symfony/webpack-encore')

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

// ... остальная конфигурация Encore

Мои тесты неудачные из-за файла entrypoints.json

После установки Encore, вы можете увидеть следующую ошибку при запуске тестов локально или на вашем сервере непрерывной интеграции:

1
2
3
4
Непойманное PHP-исключение Twig\Error\RuntimeError:
"Исключение было вызвано во время отображения шаблона
("Невозможно найти файл точек входа из Webpack:
the file "/var/www/html/public/build/entrypoints.json" does not exist.

Это происходит потому, что вы не построили ваши ресурсы Encore, а следовательно, файл entrypoints.json. Чтобы решить эту проблему, либо постройте ресурсы Encore, либо установите опцию strict_mode как false (это предотвращает функции Twig Encore от вызова исключений, когда нет файла entrypoints.json):

1
2
3
4
# config/packages/test/webpack_encore.yaml
webpack_encore:
    strict_mode: false
    # ...