如何从 Rails 中的 JS 文件内部引用已编译的 Webpack 包文件的路径?

Question

我正在使用webpackergem(版本4.0.7(用于Rails 6 RC2应用程序，并且我还使用中间件gem(版本0.6.0(serviceworker-rails将Service Workers与Rails集成。

现在，我想创建一个serviceworker.js包文件(我从自述文件中复制并修改serviceworker-rails以便它可以由 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

因此，在深入挖掘了这么长时间之后，我在 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',
]);
})
);
}
...