<div id="calculator"></div>
export function mountVueComponent(targetId, component) {
if (document.getElementById(targetId)) {
new (Vue.extend(component))().$mount(`#${targetId}`);
}
}
import Calculator from '....';
mountVueComponent('calculator', Calculator);
<div class="mini-calc"></div>
Array.from(document.querySelectorAll('.mini-calc')).forEach(el => {
let yandexGoal = el.dataset['goal'];
new Vue({
el : el,
render: createElement => createElement(Calculator, {
props: {
displayAs: CALC_DISPLAY_AS_MINI,
yandexGoal,
},
}),
});
});
const path = require('path');
const bs = require('browser-sync');
const webpack = require('webpack');
const config = require('../../gulp.config');
const tools = require('../lib/tools');
const DEVELOPMENT = require('../lib/checkMode').isDevelopment();
let webpackConfig = require(path.join(config.root.main, 'webpack.config.js'));
function showInfo(err, stats) {
// эту функцию приводить не буду. просто вывод ошибок в консоль
}
module.exports = function (options = {}) {
options = {
watch: false,
...options,
};
return function (done) {
const compiler = webpack(webpackConfig);
if (options.watch) {
tools.info('Webpack watching...');
compiler.watch({
ignored : /node_modules/,
aggregateTimeout: 300,
}, (err, stats) => {
showInfo(err, stats);
if (DEVELOPMENT && bs.has(config.browserSync.instanceName)) {
bs.get(config.browserSync.instanceName).reload();
}
});
} else {
compiler.run((err, stats) => {
showInfo(err, stats);
done();
});
}
};
};