javascript - Bazinga js 翻译器返回翻译键而不是翻译

问题描述

介绍

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

我已经按照官方文档中的低谷设置，但无济于事。

我搜索了互联网，但没有找到解决我问题的方法。

问题

我无法在 JavaScript 中得到我的翻译——我从Bazinga js translatorbundle 中得到的只是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 %}

测试.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

谢谢

感谢您的评论和回答。

使用的资源

更新 1

感谢@stof发现问题的原因。我同时使用了两种不同的包含方式translator。

解决方案之一（ES5 one）添加到 SO，但我更喜欢完整的ES2015解决方案......

感谢您的回答和想法。

标签： javascriptsymfonywebpacktranslationwebpack-encore

javascript - Bazinga js 翻译器返回翻译键而不是翻译

问题描述

介绍

问题

代码

谢谢

使用的资源

更新 1

解决方案

推荐阅读