javascript - 可以加载返回数据的 webpack 模块，还是只加载执行语句的模块？

Question

我正在尝试在项目应用程序中实现客户端路由器，使用 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，它只是读取 [object Promise]

标签： javascriptwebpackmodule