如何使用es6的动态导入从静态导入模块？

Question

我正在尝试将动态导入添加到我的代码中，以便在客户端获得更好的性能。所以我有一个 webpack 配置，其中捆绑了 js 文件。在 SFCC 上，捆绑文件位于静态文件夹中，其中该文件的路径如下所示：/en/v1569517927607/js/app.js)

我有一个函数，当用户单击按钮时，我使用 es6 的动态导入来调用模块。问题是当我们调用那个模块时，浏览器找不到它，因为路径错误。

/en/lazyLoad.js net::ERR_ABORTED 404 (Not Found)

这是正常的，因为文件位于/en/v1569517927607/js/lazyLoad.js.

有没有办法从正确的路径得到它？这是我的代码。

window.onload = () => {

    const lazyAlertBtn = document.querySelector("#lazyLoad");

    lazyAlertBtn.addEventListener("click", () => {

        import(/* webpackChunkName: "lazyLoad" */ '../modules/lazyLoad').then(module => {

            module.lazyLoad();

        });

    });

};

Answer 1

我遇到了同样的问题，并使用 Business Manager 中的 Merchant Tools > SEO > Dynamic Mapping 模块解决了它。在那里，您可以使用如下规则将请求重定向到静态文件夹：**/*.bundle.js i s,,,,,/js/{0}.bundle.js我所有的块文件都以<module>.bundle模式命名。在这里您可以找到更多信息：https ://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/content/b2c_commerce/topics/search_engine_optimization/b2c_dynamic_mappings.html希望这可以帮助。

Answer 2

我相信你可能需要path.resolve()在你的导入语句或webpack.config.js文件中做一些魔法

Answer 3

我们以不同的方式做到了。这需要两个步骤从模板文件中添加一个脚本标记，为静态路径创建一个全局变量。就像是// inside .isml template<script>&nbsp; &nbsp; // help webpack know about the path of js scripts -> used for lazy loading&nbsp; &nbsp; window.__staticPath__ = "${URLUtils.httpsStatic('/')}";</script>然后你需要通过__webpack_public_path__在运行时更改来指示 webpack 知道在哪里可以找到块// somewhere in your main .js file// eslint-disable-next-line__webpack_public_path__ = window.__staticPath__ + 'js/';可选步骤：您可能还想从__staticPath__使用替换中删除代码版本（至少我们必须这样做）__webpack_public_path__ = window.__staticPath__.replace('{YOUR_CODE_VERSION_GOES_HERE}', '') + 'js/';