Передача перевода Symfony в Symfony Webpack Encore

Вы должны использовать BazingaJsTranslationBundle, который позволяет вам получить доступ к переводам, которые вы предоставили через javascript:

Translator.trans('key', {}, 'DOMAIN_NAME');

Translator.transChoice('key', 1, {}, 'DOMAIN_NAME');

К сожалению, поскольку JS не обрабатывается PHP и, соответственно, не Symfony, у вас не будет доступа к компоненту перевода Symfony внутри ваших js-файлов.

Обходной путь, который может работать, когда у вас не так много переводов, которые вам нужно передать, — это создать объект данных JS внутри вашего шаблона twig как часть вашего приложения Symfony, а затем получить к нему доступ из ваших файлов js. Так примерно так:

# inside your twig template, e.g. index.html.twig
{% block javascripts %}
    <script type = "text/javascript">
    const TRANSLATION_MAP = {
        'my_key': "{{ 'some_key '|trans }}",
        'my_other_key': "{{ 'other_key '|trans }}"
    };
    </script>

    {{ parent() }} # This loads all your js files which can then access the translation map defined above
{% endblock %}

Недостатком этого решения является то, что вы должны решить, какие ключи поместить в свою карту перевода, не зная, используются ли они, поэтому это может стать немного неэффективным и трудным для понимания. Также вы должны быть осторожны, чтобы ваш переведенный контент был действительным json. Вы можете применить (настраиваемое) экранирование/фильтрацию, чтобы гарантировать это, но все же делает его немного хрупким.

В общем, это может быть не лучшим решением, но может быть достойным обходным путем для небольших проектов, пока вы не обнаружите, что это становится более неприятным, и вам нужно найти что-то более сложное.

1. Вы можете преобразовать переводы yaml в json с помощью webpack или диспетчера задач (gulp | grunt).
2. Поместите созданные файлы перевода JSON в активы.
3. Требуйте их внутри js-скрипта.
4. Передайте значение локали во внешний интерфейс, чтобы выбрать правильный перевод json-объекта внутри js-скрипта.

Примечание: в случае веб-пакета вы должны последовательно выполнить 2 шага: На первом этапе будут созданы переводы ресурсов, которые потребуются в js-скриптах. второй шаг впоследствии скомпилирует js-скрипты.

Вот часть конфигурации webpack encore, которая преобразует файлы переводов *.yaml в json с помощью «js-yaml» и помещает их в каталог ресурсов:

.addPlugin(new CopyWebpackPlugin(
    {
        patterns: [
            {
                from: './translations/*.yaml',
                to: './[name].json',
                transform(content) {
                    return Buffer.from(
                        JSON.stringify(
                            yaml.safeLoad(content.toString('utf8'), {schema: yaml.JSON_SCHEMA})
                        ),
                        'utf8'
                    )
                }
            }
        ],
    }));