Работа с модулем enb-bem-i18n

Всем привет!

Пытаюсь разобраться в работе модуля enb-bem-i18n на примере project-stub. Для эксперимента использую блок calendar, точнее его элемент title https://github.com/Sergei-b84/calendar

{
block: 'calendar',
mods: { theme: 'ls' },
switchers: ['', '']
 },

Очередность моих действий:

Установил модуль следующей командой:
```
npm install --save-dev enb-bem-i18n
```
- Изменил код шаблона calendar__title.bemhtml

 block('calendar').elem('title')(
content()(function(){
    var monthName = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ];

    var date = this._date;
    var title = monthName[date.getMonth()] + ' '  + date.getFullYear();

        return title;
    })
);

на

    block('calendar').elem('title')(
match(function () { return this.ctx.date; }).content()(function () {
    var date = new Date(this.ctx.date),
        i18n = BEM.I18N,
        month = [
        i18n('calendar__title', 'jan'),
        i18n('calendar__title', 'feb'),
        i18n('calendar__title', 'mar'),
        i18n('calendar__title', 'apr'),
        i18n('calendar__title', 'may'),
        i18n('calendar__title', 'jun'),
        i18n('calendar__title', 'jul'),
        i18n('calendar__title', 'aug'),
        i18n('calendar__title', 'sep'),
        i18n('calendar__title', 'oct'),
        i18n('calendar__title', 'nov'),
        i18n('calendar__title', 'dec')
        ];

    var title = month[date.getMonth()] + ' '  + date.getFullYear();
    return title;

     })
);

создал папку с файлами ru.js и en.js https://github.com/Sergei-b84/calendar/tree/master/__title/calendar_title.i18n.

Теперь, для того чтобы все заработало, я как понимаю, мне нужно указать язык по умолчанию в каком-то конфиге и сделать какие-то изменения в .enb/make.js . Опишите, пожалуйста, подробно как это сделать на примере project-stub. ( как выглядит конфиг, куда кладем, где подключаем и какие пишем изменения в make.js) Спасибо.

9 years ago

blond

Привет!

Для версии enb-bem-i18n@0.4.0 в конфиг нужно добавить:

module.exports = function (config) {
    config.setLanguages(['en', 'ru']); // Задать какие возможные языки
};

В технологии добавить:

// Собирает файлы из директории `<block>.i18n/ru.js` и `<block>.i18n/en.js`
[ require('enb-bem-i18n/techs/i18n-merge-keysets'), { lang: 'all' } ],
[ require('enb-bem-i18n/techs/i18n-merge-keysets'), { lang: '{lang}' } ]

// Строим по этим файлам JavaScript код
[ require('enb-bem-i18n/techs/i18n-lang-js'), { lang: 'all'} ],
[ require('enb-bem-i18n/techs/i18n-lang-js'), { lang: '{lang}'} ]

Плюс, вместо enb-bemxjst/techs/html-from-bemjson технологии использовать enb-bem-i18n/techs/i18n-bemjson-to-html. А в addTargets() вместо ?.html передать ?.{lang}.html.

9 years ago

godfreyd

Сделал как Вы написали. Ответ сервера:

Error: Option "templateFile" is required for technology "i18n-bemjson-to-html".

9 years ago

blond

Да, забыл про это сказать. Надо указать опцию templateFile: '?.bemhtml.js'.

9 years ago

godfreyd

Все сделал, ошибка ушла, но текст calendar__title так и не появился.

вот мой файл make.js. Может где ошибся. Не пойму, где мы указываем, что нужно именно использовать русский язык, а не английский? Что-то еще ведь нужно прописать.

var techs = {
    // essential
    fileProvider: require('enb/techs/file-provider'),
    fileMerge: require('enb/techs/file-merge'),

    // optimization
    borschik: require('enb-borschik/techs/borschik'),

    // css
    stylus: require('enb-stylus/techs/stylus'),

    // js
    browserJs: require('enb-diverse-js/techs/browser-js'),
    prependYm: require('enb-modules/techs/prepend-modules'),

    // bemtree
    // bemtree: require('enb-bemxjst/techs/bemtree'),

    // bemhtml
    bemhtml: require('enb-bemxjst/techs/bemhtml'),
    bemjsonToHtml: require('enb-bem-i18n/techs/i18n-bemjson-to-html')
},
enbBemTechs = require('enb-bem-techs'),
levels = [
    { path: 'libs/bem-core/common.blocks', check: false },
    { path: 'libs/bem-core/desktop.blocks', check: false },
    { path: 'libs/bem-components/common.blocks', check: false },
    { path: 'libs/bem-components/desktop.blocks', check: false },
    { path: 'libs/bem-components/design/common.blocks', check: false },
    { path: 'libs/bem-components/design/desktop.blocks', check: false },
    'common.blocks',
    'desktop.blocks'

];

module.exports = function(config) {
config.setLanguages(['en', 'ru']); // Задать какие возможные языки

var isProd = process.env.YENV === 'production';

config.nodes('*.bundles/*', function(nodeConfig) {
    nodeConfig.addTechs([
        // essential
        [enbBemTechs.levels, { levels: levels }],
        [techs.fileProvider, { target: '?.bemjson.js' }],
        [enbBemTechs.bemjsonToBemdecl],
        [enbBemTechs.deps],
        [enbBemTechs.files],

        // css
        [techs.stylus, {
            target: '?.css',
            autoprefixer: {
                browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
            }
        }],

        // bemtree
        // [techs.bemtree, { devMode: process.env.BEMTREE_ENV === 'development' }],

        // bemhtml
        [techs.bemhtml, { devMode: process.env.BEMHTML_ENV === 'development' }],

        // html
        [techs.bemjsonToHtml, { templateFile: '?.bemhtml.js'}],

        // client bemhtml
        [enbBemTechs.depsByTechToBemdecl, {
            target: '?.bemhtml.bemdecl.js',
            sourceTech: 'js',
            destTech: 'bemhtml'
        }],
        [enbBemTechs.deps, {
            target: '?.bemhtml.deps.js',
            bemdeclFile: '?.bemhtml.bemdecl.js'
        }],
        [enbBemTechs.files, {
            depsFile: '?.bemhtml.deps.js',
            filesTarget: '?.bemhtml.files',
            dirsTarget: '?.bemhtml.dirs'
        }],
        [techs.bemhtml, {
            target: '?.browser.bemhtml.js',
            filesTarget: '?.bemhtml.files',
            devMode: process.env.BEMHTML_ENV === 'development'
        }],

        // js
        [techs.browserJs],
        [techs.fileMerge, {
            target: '?.pre.js',
            sources: ['?.browser.bemhtml.js', '?.browser.js']
        }],
        [techs.prependYm, { source: '?.pre.js' }],

        // borschik
        [techs.borschik, { sourceTarget: '?.js', destTarget: '?.min.js', freeze: true, minify: isProd }],
        [techs.borschik, { sourceTarget: '?.css', destTarget: '?.min.css', tech: 'cleancss', freeze: true, minify: isProd }],


        [ require('enb-bem-i18n/techs/i18n-merge-keysets'), { lang: 'all' } ],
        [ require('enb-bem-i18n/techs/i18n-merge-keysets'), { lang: '{lang}' } ],

        [ require('enb-bem-i18n/techs/i18n-lang-js'), { lang: 'all'} ],
        [ require('enb-bem-i18n/techs/i18n-lang-js'), { lang: '{lang}'} ]


    ]);

    nodeConfig.addTargets([/* '?.bemtree.js', */ '?.{lang}.html', '?.min.css', '?.min.js']);
    });
};

9 years ago

godfreyd

Извините, никто не знает в чем ошибка? Может есть реализованный пример на гит-хабе. собранный с помощью enb

9 years ago

tadatuta

@Sergei-b84, сделал веточку в project-stub — там настроена сборка и приведены примеры использования в шаблонах и в клиентском JS.

9 years ago

godfreyd

Спасибо за помощь. Вопрос. У вас из файла package.json видно, что версия "enb-bem-i18n": "^1.0.0-beta7" (последняя). У меня "version": "0.4.0", перестанавливал enb-bem-i18n, все равно 0.4.0 . В чем причина ведь зависимость данного модуля только от пакета enb (моя версия которого "^0.17.2"?

9 years ago

tadatuta

при установке npm по умолчанию ставит последнюю стабильную версию. чтобы поставить альфу, нужно явно это указать:

npm i enb-bem-i18n@^1.0.0-beta7 --save

9 years ago

blond

Можно ещё по названию тега в npm:

npm i enb-bem-i18n@beta

9 years ago

godfreyd

Не ставит и альфу

npm ERR! FreeBSD 10.0-RELEASE
npm ERR! argv "node" "/usr/local/bin/npm" "i" "enb-bem-i18n@^1.0-beta7" "--save"
npm ERR! node v0.12.4
npm ERR! npm  v2.12.1
npm ERR! code ETARGET
npm ERR! notarget No compatible version found: enb-bem-i18n@'^1.0-beta7'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.1.0","0.1.1","0.1.2","0.2.0","0.2.1","0.3.0","1.0.0-beta1","1.0.0-beta2","0.4.0","1.0.0-     beta3","1.0.0-beta4","1.0.0-beta5","1.0.0-beta6","1.0.0-beta7"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'bem-project-stub'
npm ERR! notarget
npm ERR! Please include the following file with any support request:
npm ERR!     /usr/home/sergei/htdocs/ls-project/npm-debug.log

Проблема в том, что я сделал все как описано в ветке и у меня появляется ошибка Error: Cannot find module 'enb-bem-i18n/techs/i18n'

9 years ago

godfreyd

npm i enb-bem-i18n@beta

Так получилось

9 years ago

godfreyd

@tadatuta все верно в созданной Вами ветке? У меня в консоли ничего не отображается? Как должны создаваться файлы типа index.{lang}.min.js ?

Объясните, пожалуйста. что выполняет данный код:

({
mustDeps: { block: 'i-bem', elem: 'i18n' }
})

9 years ago

tadatuta

данный код подключает в сборку https://github.com/bem/bem-core/tree/v2/common.blocks/i-bem/__i18n

Файлы index.{lang}.min.js должны создаваться автоматически при вызове enb make или с помощью enb server. Если этого не происходит, возможно, где-то закрался баг, могу проверить.

9 years ago

godfreyd

Нет, не происходит. BEM Core Library должна быть установлена?

9 years ago

godfreyd

Если честно, то на первый взгляд у меня и проект как-то туго стал собираться после внесенных изменений в файл make.js. Есть у меня счетчик. Сейчас проверяю различные алгоритмы ( это не столь важно). Для этого просто меняю названия блоков между counter и counter2. Cоответственно для каждого блока свой js файл со своим алгоритмом. Что я заметил, раньше при стандртном make.js счетчики менялись моментально стоило мне дописать или убрать 2. При новом make.js (с ветки) смены не происходит вообще. И кеш браузера чистил все одно и тоже. Дошло до того, что я просто любой блок переименовываю абракатаброй какой-нибудь, заливаю и стили не меняются).

9 years ago

tadatuta

Прошел весь путь с нуля:

git clone https://github.com/bem/project-stub.git -b i18n
cd $_
npm i
npm start

Открыл http://localhost:8080/desktop.bundles/index/index.ru.html — все хорошо.

Возникла мысль, что возможно у тебя после старых сборок остался старый index.html, в котором подключен старый index.min.js, а нужно-то открывать index.ЯЗЫК.html, где подключен index.ЯЗЫК.min.js. Потому и изменений не видно.

По поводу скорости пересборки. Очевидно, что полная при нескольких языках полная сборка будет медленнее, чем раньше, но точечная в режиме сервера должна замедлиться совсем чуть-чуть (десятки/сотни миллисекунд).

9 years ago

godfreyd

Спасибо, теперь все работает. Вот код

block('calendar').elem('title')(
js()(true),
content()(function() {

    var date = this._date,
    month = [
        this.i18n('calendar__title', 'jan'),
        this.i18n('calendar__title', 'feb'),
        this.i18n('calendar__title', 'mar'),
        this.i18n('calendar__title', 'apr'),
        this.i18n('calendar__title', 'may'),
        this.i18n('calendar__title', 'jun'),
        this.i18n('calendar__title', 'jul'),
        this.i18n('calendar__title', 'aug'),
        this.i18n('calendar__title', 'sep'),
        this.i18n('calendar__title', 'oct'),
        this.i18n('calendar__title', 'nov'),
        this.i18n('calendar__title', 'dec')
        ];
    var title = month[date.getMonth()] + ' ' + date.getFullYear();
    return [
        title,
        applyNext()
    ];
})

);

@tadatuta для чего в bemhtml applyNext() ?

9 years ago

godfreyd

Правильно я понимаю, что для общего блока page я создаю только page.bemhtml.js c кодом

block('page')(
js()(true),
// replace 'index.min.js' with 'index.{lang}.min.js'
elem('js').match(function() { return this.ctx.i18n; }).def()(function() {
    var url = this.ctx.url.split('.');
    url.splice(1, 0, this.i18n.lang());

    return applyNext({ 'ctx.url': url.join('.') });
})
);

а для всех вложенных блоков использую конструкцию по примеру из ветки?

9 years ago

tadatuta

для чего в bemhtml applyNext() ?

Это вызов всех остальных шаблонов для данного матча. Я расписывал подробно здесь.

Правильно я понимаю, что для общего блока page я создаю только page.bemhtml.js c кодом

Этот шаблон нужен для того, чтобы в каждый генерируемый HTML подключался нужный JS-файл. Нужен он только в page.bemhtml.js.

Чтобы оставлять комментарии, необходимо авторизоваться.