Вступление
Я использую 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
- Переводчик не определен при использовании Webpack Encore в задачах github
- Проблема с использованием willdurand/BazingaJsTranslationBundle
Обновление 1
Спасибо @stof за обнаружение причины проблемы. Я использовал 2 разных способа включения translator одновременно.
Одно из решений (ES5 one) добавлено в SO, но я бы предпочел полное решение ES2015...
Спасибо за ваши ответы и идеи.
