将 Symfony 翻译传递给 Symfony Webpack Encore

Question

With Symfony, I use translation , Twig and Webpack encore components.

I can translate in frontend Twig with :

'my_key'|trans

I use command yarn encore dev for generate my app.js , but PHP translation component it's not accessible in Javascript.

I have a lot of things to translate in javascript.

Answer 1

Unfortunately since JS is not handled by PHP and by extension also not by Symfony, you will not have access to Symfony's Translation component inside your js files.

A workaround that could work when you don't have too many translations you need to pass is create a JS data object inside your twig template as part of your Symfony application and then access it from your js files. So roughly like this:

# 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 %}

The downside to this solution is, that you have to decide which keys to put in your translation map without really knowing whether they are used, so this might become a bit inefficient and hard to follow. Also you have to be careful that your translated content is valid json. You can apply (custom) escaping/filtering to ensure that, but still makes it a bit fragile.

All in all, this might not be the best solution but can be a decent workaround for smaller projects until you find it becomes more of a nuisance and you have to find something more sophisticated.

Answer 2

You have to use BazingaJsTranslationBundle which allows you to access translations you have exposed through javascript:

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

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

Answer 3

1. You could transform translations yaml to json with webpack or a task manager (gulp | grunt).
2. Put built json translation files to assets.
3. Require them inside js script.
4. Emit locale value to frontend to choose proper translation json object inside js script.

Note: in webpack case you should run 2 steps consequently: first step will build translations to assets to be required in js scripts. second step will compile js scripts afterwards.

Here is a part of webpack encore config which transforms translations *.yaml files to json with 'js-yaml' and puts them into assets directory:

.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'
                    )
                }
            }
        ],
    }));