将 Symfony 翻译传递给 Symfony Webpack Encore

Question

对于 Symfony，我使用 translation, Twig and Webpack encore 个组件。

我可以在前端 Twig 中翻译：

'my_key'|trans

我使用命令 yarn encore dev 生成我的 app.js，但是 PHP translation component 在 Javascript 中无法访问它。

我有很多东西要翻译 javascript。

Answer 1

您必须使用 BazingaJsTranslationBundle，它允许您访问通过 javascript:

公开的翻译

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

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

Answer 2

不幸的是，由于 JS 不由 PHP 处理，而且 Symfony 也不处理，因此您将无法访问 js 文件中的 Symfony 翻译组件。

当您不需要传递太多翻译时，一种可行的解决方法是在您的 twig 模板中创建一个 JS 数据对象作为您的 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。您可以应用（自定义）escaping/filtering 来确保这一点，但它仍然有点脆弱。

总而言之，这可能不是最好的解决方案，但对于较小的项目来说可能是一个不错的解决方法，直到您发现它变得更麻烦并且您必须找到更复杂的方法。

Answer 3

您可以使用 webpack 或任务管理器 (gulp | g运行t) 将翻译 yaml 转换为 json。
将内置的 json 翻译文件放入资产。
在 js 脚本中需要它们。
将语言环境值发送到前端以选择正确的翻译json js 脚本中的对象。

注意：在 webpack 的情况下，你应该运行因此需要 2 个步骤：第一步将构建对 js 脚本中所需资产的翻译。第二步之后会编译js脚本。

这是 webpack encore 配置的一部分，它使用 'js-yaml' 将翻译 *.yaml 文件转换为 json 并将它们放入资产目录：

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

将 Symfony 翻译传递给 Symfony Webpack Encore

Passing Symfony Translation to Symfony Webpack Encore

javascript

symfony

twig

webpack-encore