Question

在Symfony中，我使用translation，Twig和Webpack encore组件。

我可以在前端Twig中翻译：

'my_key'|trans

我使用命令yarn encore dev来生成我的app.js，但是PHP translation component不能用Java语言访问。

我有很多东西可以用javascript翻译。

Answer 1

您必须使用BazingaJsTranslationBundle，它允许您访问通过javascript公开的翻译：

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

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

Answer 2

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

当您不需要传递太多翻译时，一种可行的解决方法是在树枝模板内创建一个JS数据对象作为Symfony应用程序的一部分，然后从js文件访问它。大概是这样的：

# inside your twig template, e.g. index.html.twig
{% block javascripts %}

    const TRANSLATION_MAP = {
        'my_key': "{{ 'some_key '|trans }}",
        'my_other_key': "{{ 'other_key '|trans }}"
    };

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

该解决方案的缺点是，您必须确定要放入翻译映射中的键，而又不真正知道它们是否被使用，因此这可能会变得效率低下且难以理解。另外，您还必须注意翻译的内容是有效的json。您可以应用（自定义）转义/过滤来确保这一点，但仍然会使它有些脆弱。

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

Answer 3

您可以使用webpack或任务管理器（gulp | grunt）将yaml转换为json。
将构建的json转换文件放入资产中。
在js脚本中需要它们。
将语言环境值发送到前端以在js脚本中选择适当的转换json对象。

注意：在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

3 个答案: