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

Question

我正在使用webpacker gem（版本4.0.7）为Rails 6 RC2应用程序提供支持，并且还使用serviceworker-rails中间件gem（版本0.6.0）将Service Worker与Rails集成。

现在，我想创建一个serviceworker.js pack文件（我从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可以缓存这些文件？

- DJenuil

Answer 1

经过长时间的深入挖掘，我从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',

      ]);
    })
  );
}

...

- DJenuil

---

假设我想通过JavaScript直接分配图像源。有没有办法在没有视图操作助手的情况下解决该图像路径？ - Ryan Romanchuk