При сборке bemhtml блоков хочется подключить свой helper для более удобной работы.
Подключаю по мануалу Подключение сторонних библиотек.
Для сборки проекта использую bem/project-stub.
В make.js
module.exports = function(config) {
const 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.postcss, {
target: '?.css',
oneOfSourceSuffixes: ['post.css', 'css'],
plugins: techs.postcssPlugins
}],
// bemtree
// [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }],
// bemhtml
[techs.bemhtml, {
sourceSuffixes: ['bemhtml', 'bemhtml.js'],
forceBaseTemplates: true,
engineOptions : {
elemJsInstances : true,
requires : {
'helper': {
ym: 'helper',
}
}
}
}],
// html
[techs.bemjsonToHtml],
// 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',
sourceSuffixes: ['bemhtml', 'bemhtml.js'],
engineOptions : {
elemJsInstances : true,
requires : {
'helper': {
ym: 'helper',
}
}
}
}],
// js
[techs.browserJs, { includeYM: true }],
[techs.fileMerge, {
target: '?.js',
sources: ['?.browser.js', '?.browser.bemhtml.js']
}],
// borschik
[techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
[techs.borschik, { source: '?.css', target: '?.min.css', minify: isProd }]
]);
nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
});
};
В common.blocks/helper/helper.js
/**
* @module helper
*/
modules.define('helper', ['i-bem'], function(provide, bem) {
/**
* @exports
* @class helper
* @bem
*/
provide(bem.declBlock(this.name, /** @lends helper.prototype */{
help: function () {
return 'is req helper work';
}
}));
});
В common.blocks/page/page.deps.js
[
{
shouldDeps: [
{ block : 'helper' },
]
},
{
tech: 'js',
shouldDeps: [
{ block : 'helper', tech: 'bemhtml' },
]
},
{
tech: 'bemhtml',
shouldDeps: [
{ block : 'helper', tech: 'js' },
]
}
]
В common.blocks/usehelper/usehelper.bemhtml.js
block('usehelper')(
content()(function () {
let helper = this.require('helper');
return helper.help();
})
);
В desktop.bundles/index/index.bemjson.js
module.exports = {
block: 'page',
head: [ { elem: 'css', url: 'index.min.css' } ],
scripts: [{ elem: 'js', url: 'index.min.js' }],
content: {
block : 'usehelper'
}
};
Запускаю npm run build и получаю ошибку.
Template error in mode content in block usehelper Cannot read property 'help' of undefined
Если использовать подключение через commonJS сборка проходит успешно но если в браузер этот код не попадает и когда нужно собрать блок через BEMHTML.apply() получаем туже ошибку.
Побывал также подключать сборку bemhtml.js через commonJS а сборку .browser.js через ym в таком случае получаю:
"i-bem-dom__init -> jscreate -> BEMHTML -> helper -> helper"
Объясните как правильно подключить сторонние библиотеки так чтобы они работали при сборки бандлов и после в браузере?
