javascript - 如何从 Rails 中的 JS 文件中引用已编译的 Webpack 包文件的路径？

Question

我正在为 Rails 6 RC2 应用程序使用 webpacker gem(版本 4.0.7)，我还在使用 serviceworker-rails 中间件 gem(版本 0.6. 0) 将 Service Worker 与 Rails 集成。

现在，我想创建一个 serviceworker.js 包文件(我从 serviceworker-rails README 文件复制并修改)以便它可以由 Webpack 提供服务，并使用 serviceworker-rails 中间件进行路由。

因此，在 app/javascript/packs/serviceworker.js.erb(安装了 erb-loader)中，我这样做了:

function onInstall(event) {
  console.log('[Serviceworker]', "Installing!", event);
  event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) {
      return cache.addAll([
        '<%= asset_pack_path "application.js" %>',

        '<%= asset_pack_path "application.css" %>',

        '/offline.html',

      ]);
    })
  );
}

...

这样做会导致 Webpack 无法编译 Service Worker 包，因为我无法在包文件中使用 asset_pack_path(甚至在编译之前无法获取已编译包的路径)。所以问题是，如何在我的 Service Worker 脚本中引用编译后的 JS 和 CSS 包的路径，以便 Service Worker 可以缓存这些文件？

Answer 1

所以，在深入挖掘之后，我从这个 issue 中找到了解决方案在 GitHub 上(并且还意识到我没有正确阅读和理解错误，因为错误是 undefined method 'asset_pack_path' 并且与编译无关)。只需执行以下操作即可解决问题:

function onInstall(event) {
  console.log('[Serviceworker]', "Installing!", event);
  event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) {
      return cache.addAll([

        <% helpers = ActionController::Base.helpers %>

        '<%= helpers.asset_pack_path "application.js" %>',

        '<%= helpers.asset_pack_path "application.css" %>',

        '/offline.html',

      ]);
    })
  );
}

...