Rails 7中如何用esbuild打包js.erb文件并读取Stripe公钥？

esbuild本身不支持解析ERB模板，直接用原命令打包.js.erb文件无法替换其中的Rails凭据变量，你之前尝试的Sprockets mime类型配置无效——因为当前是用esbuild而非Sprockets处理JS资源，两者的配置互不影响。

下面提供两种可行方案：

方案一：预编译ERB模板后再打包 #

通过Ruby脚本先渲染.js.erb文件为纯JS，再交给esbuild处理：

1. 创建Rake任务处理ERB预编译
   在lib/tasks/esbuild_erb.rake中添加以下内容：

namespace :esbuild do
  desc "预编译JS.erb文件并执行esbuild打包"
  task :build do
    # 遍历所有.js.erb文件，渲染为纯JS
    Dir.glob("app/javascript/**/*.js.erb").each do |erb_path|
      js_path = erb_path.sub(".erb", "")
      # 渲染ERB模板，注入Rails上下文
      rendered_content = ERB.new(File.read(erb_path)).result(binding)
      File.write(js_path, rendered_content)
    end

    # 执行原esbuild打包命令
    system("esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds")

    # 可选：删除临时生成的纯JS文件（避免污染源码目录）
    Dir.glob("app/javascript/**/*.js").each do |js_path|
      File.delete(js_path) if File.exist?("#{js_path}.erb")
    end
  end
end

2. 修改package.json中的build命令：

"build": "rails esbuild:build"

执行npm run build时，会先预编译ERB注入凭据，再完成打包。

方案二：通过环境变量注入凭据（更简洁） #

无需处理ERB模板，直接用esbuild的--define选项将Rails凭据作为环境变量注入JS：

1. 在Rails配置中导出凭据为环境变量
   在config/application.rb或对应环境配置文件（如config/environments/production.rb）中添加：

ENV['STRIPE_PUBLIC_KEY'] = Rails.application.credentials[:stripe][:public]

2. 修改esbuild命令注入环境变量
   更新package.json的build命令：

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --define:process.env.STRIPE_PUBLIC_KEY='\"'$STRIPE_PUBLIC_KEY'\"'"

3. 修改Stimulus控制器代码
   直接使用注入的环境变量：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  redirect(event) {
    const stripe = Stripe(process.env.STRIPE_PUBLIC_KEY);
    stripe.redirectToCheckout({...});
  }
}

这种方式跳过了ERB模板处理，更符合esbuild的原生工作流。

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