Bazinga js 翻译器 returns 翻译键而不是翻译

Question

简介

我正在使用 Symfony v4.1 和 Bazinga js translator 捆绑包。

我按照官方文档中的设置进行了操作，但无济于事。

我在网上搜索过，但没有找到解决问题的方法。

问题

我不能在JavaScript中得到我的翻译——我从Bazinga js translator包中得到的都是translation keys。然而 Yarn 编译资产没有错误！

我错过了什么？

代码

base.html.twig

<!DOCTYPE html>
<html lang="{{ app.request.locale|split('_')[0] }}">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}BASE{% endblock %}</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {% block stylesheets %}
            <link rel="stylesheet" type="text/css" href="{{ asset('build/global.css') }}" />
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('build/static/favicon_zen_1.ico') }}" />
        <link rel="shortcut icon" type="image/x-icon" href="{{ asset('build/static/favicon_zen_1.ico') }}" />
    </head>
    <body>
        {% block body %}
            <div class="box-primary" style="margin-top:12px;">
                <div id="main-holder">
                    <div id="main-content">
                        {% block main_content %}
                            CONTENT
                        {% endblock %}
                    </div>
                </div>
            </div>
        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
            <script src="{{ url('bazinga_jstranslation_js') }}"></script>

            <script type="text/javascript" src="{{ asset('build/app.js') }}"></script>
        {% endblock %}
    </body>
</html>

test.html.twig

{% extends 'base.html.twig' %}

{% trans_default_domain 'upload' %}

{% block stylesheets %}
    {{ parent() }}

    <link rel="stylesheet" type="text/css" href="{{ asset('build/global.css') }}" />
{% endblock %}

{% block title %}JavaScript translation test{% endblock %}

{% block main_content %}
    <div id="language-changer" style="margin-bottom:1rem;">
        <a href="{{ path(app.request.get('_route'), app.request.get('_route_params') | merge({'_locale': 'en'})) }}">EN</a> /
        <a href="{{ path(app.request.get('_route'), app.request.get('_route_params') | merge({'_locale': 'ru'})) }}">RU</a>
    </div>

    <div id="test">
        TEST
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('build/test.js') }}"></script>
{% endblock %}

test.js:

'use strict';

import Translator from 'bazinga-translator';

(function(window)
{
    let item;

    item = Translator.trans('upload.status.uploadFailed', {}, 'upload');

    console.log(item);

})(window);

webpack.config.js

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const path = require('path');

const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    .addEntry('blueimp', './assets/js/blueimp.js')
    .addEntry('test', './assets/js/test.js')

    .addStyleEntry('global', './assets/css/global.scss')

    .addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
    ]))

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {},
        {
            resolveUrlLoader: false
        }
    )

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    })

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
;

/*
module.exports = Encore.getWebpackConfig();
module.exports.externals = [{
    'bazinga-translator': 'Translator'
}];
*/

const config = Encore.getWebpackConfig();

config.externals = {
    'bazinga-translator': 'Translator'
};

config.resolve.alias = {
    'jquery-ui/ui/widget': path.resolve(__dirname, 'node_modules/jquery.ui.widget/jquery.ui.widget.js')
};

// export the final configuration
module.exports = config;

bazinga_js_translation.yaml:

bazinga_js_translation:    
    locale_fallback: en

谢谢

感谢您的评论和回答。

已用资源

Bazinga Js Translator Bundle documentation
Translator is not defined when using Webpack Encore in github issues
Issue using willdurand/BazingaJsTranslationBundle

更新 1

感谢@stof for spotting the cause of a problem。我同时使用了 2 种不同的方式来包含 translator。

其中一个解决方案 (ES5 one) 是，但我更喜欢完整的 ES2015 解决方案...

感谢您的回答和想法。

Answer 1

如果您 want/need 使用 old school JavaScript 并包含在每个页面中，则此解决方案有效。

需要提供翻译域名。有了它翻译工作。

<script src="{{ url('bazinga_jstranslation_js', { 'domain': 'TRANSLATION_DOMAIN_NAME', 'locales': 'en,fr,de' }) }}"></script>

Bazinga js 翻译器 returns 翻译键而不是翻译

Bazinga js translator returns translation keys instead of translations

javascript

translation

symfony

webpack

webpack-encore

简介

问题

代码

谢谢

已用资源

更新 1