简介
我正在将Symfony v4.1与捆绑包一起使用Bazinga js translator。
我已经遵循了官方文档中的低谷设置，但无济于事。
我搜索了互联网，但没有找到我的问题的解决方案。
问题
我无法在 JavaScript 中获得翻译 - 我从捆绑包中获得Bazinga js translator都是translation keys。然而，Yarn编译资产时没有错误！
我错过了什么？
法典
基.html.树枝
<!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>
测试.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
谢谢
感谢您的评论和回答。
已使用的资源
- Bazinga Js 翻译器捆绑包文档 在
- github 问题中使用 Webpack Encore 时未定义转换器
- 使用 willdurand/BazingaJsTranslationBundle 的问题
更新 1
感谢@stof发现问题的原因。我使用了两种不同的方法来同时包含translator。
解决方案之一(ES5 one(被添加到SO中，但我更喜欢完整的ES2015解决方案...
感谢您的回答和想法。
如果你想/需要使用old schoolJavaScript，这个解决方案就有效，并包含在每个页面中。
需要提供翻译域。有了它，翻译工作。
<script src="{{ url('bazinga_jstranslation_js', { 'domain': 'TRANSLATION_DOMAIN_NAME', 'locales': 'en,fr,de' }) }}"></script>