如何使用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>

    // help webpack know about the path of js scripts -> used for lazy loading

    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/';