如何在Webpacker中使用js.erb与json.erb模板？

我刚好可以用serviceworker-rails gem的示例来说明这么做的价值——借助Rails的资产助手（asset helpers）和循环逻辑，我们能动态生成Web App Manifest文件，避免手动编写大量重复的图标配置项，同时还能利用Rails的资产管线优势处理路径、指纹等问题。

下面是一个完整的实现示例，我们用ERB模板来编写manifest文件：

// app/javascripts/packs/manifest.json.erb
<% icon_sizes = Rails.configuration.serviceworker.icon_sizes %>
{
  "name": "My Progressive Rails App",
  "short_name": "Progressive",
  "start_url": "/",
  "icons": [
    <% icon_sizes.map { |s| "#{s}x#{s}" }.each.with_index do |dim, i| %>
    {
      "src": "<%= image_path "serviceworker-rails/heart-#{dim}.png" %>",
      "sizes": "<%= dim %>",
      "type": "image/png",
      "purpose": "any maskable"
    }<%= ',' unless i == icon_sizes.size - 1 %>
    <% end %>
  ],
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196f3"
}

• 动态适配多尺寸图标：通过读取Rails配置里的icon_sizes，一次性生成所有需要的图标条目，不用逐个手动添加
• 资产路径自动处理：用image_path助手生成正确的资产URL，Rails会自动处理资产指纹、CDN前缀等配置
• 维护性更强：如果需要新增或修改图标尺寸，只需要修改配置文件，不用改动manifest模板本身

内容的提问来源于stack exchange，提问作者Samuel Danielson