Я пытаюсь внедрить клиентский маршрутизатор в приложение проекта, используя vanilla webpack, чтобы лучше понять, как работает webpack. Итак, маршрутизатор, который я придумаю, абсолютно простой, загружает модули, которые хорошо выполняют операторы. однако модули, которые возвращают строку, например строку, которая будет использоваться для разметки шаблона, этого не делают.
маршрутизатор
export default function Router(Routes) {
function loadRoute(routeName) {
const route = matchRouteObject(routeName)
route.component()
}
const matchRouteObject = function (name) {
const matchedRoute = Routes.find((route) => {
return route.name == name
})
return matchedRoute
}
return {
loadRoute: loadRoute,
}
}
маршруты
export default [
{
name: 'root',
component: () => import('@/app/home/main.js'),
},
{
name: 'canvas',
component: () => import('@/app/canvasExample/main.js'),
},
{
name: 'svg',
component: () => import('@/app/svgExample/main.js'),
},
]
модуль, загружающий
export default function home() {
let constructor = function () {
const main = document.querySelector('main')
main.insertAdjacentHTML('afterbegin', '<h1>your world from root</h1>')
}
return {
init: constructor(),
}
}
let Home = home()
модуль, который не загружается
export default function mainSVG() {
let constructor = function () {
return '<h1>hello world from svg</h1>'
}
return {
init: constructor(),
}
}
let MainSVG = mainSVG()
и когда я попытался настроить его для использования этого модуля, который не загружается, я настраиваю функцию loadRoute как
function loadRoute(routeName) {
const main = document.querySelector('main')
const route = matchRouteObject(routeName)
main.insertAdjacentHTML('afterbegin', route.component())
}
что происходит, когда я пытаюсь это сделать вместо функции loadRoute, добавляющей строку, возвращенную из модуля в dom, он просто читает [обещание объекта]