Question

我有一个项目，其中我将turbolinks与Webpack的动态导入结合使用。

我所拥有的是初始javascript文件尽可能小，然后为每个页面加载相关的javascript代码：

document.addEventListener('turbolinks:load', () => {
  const moduleName = document.body.dataset.route;
  if (!moduleName) return;

  const chunkName = moduleName.replace('.', '/');
  import(/* webpackChunkName: "js/pages/[request]" */ `@pages/${chunkName}`)
    .catch((e) => {console.error(e);});
});

Webpack的动态导入被注入到页面的<head>部分，这对于要加载第三方软件包的任何其他用例都非常有用。但是，由于我要加载特定于页面的脚本，因此需要在每次页面更改时重新运行该脚本。

由于我使用的是 Turbolinks ，因此没有页面刷新。 Turbolinks 的作用是劫持该请求，并将该请求作为XHR请求执行。然后，它替换<body>标记并合并<head>标记。

现在的问题是，每当 Turbolinks 合并头部时，它将保留每页加载的脚本，从而导致该脚本不会在对该页面的后续请求上重新运行（请记住，没有页面）刷新发生了。）

我能想到的解决此问题的最佳方法是告诉webpack将某些脚本（例如特定于页面的脚本）注入<body>标记中，因为它在每个页面上都已被完全替换（访问）。实际上，这是 Turbolinks 在他们的文档中提到的，当您具有每页特定的脚本时。

我试图找出方法，但是找不到任何资源。

实际上还有另一种解决方案，那就是从每个特定于页面的页面导出默认函数，然后在导入后简单地调用该函数：

import(/* webpackChunkName: "js/pages/[request]" */ `@pages/${chunkName}`)
  .then(p => p.default())

唯一的缺点是我必须记住为每个页面模块导出一个默认函数，并且我的模块代码始终是嵌套的（由于位于函数内部）。

Webpack动态导入注入到<body>而不是<head>

0 个答案: