Ruby on Rails 7 + esbuild 生成多JS文件的实现方案

当你用rails new app-rails7 -j esbuild -d postgresql初始化Rails 7项目后，默认会生成这些基础配置：

• package.json包含默认的build脚本，负责编译主JS文件
• Procfile.dev配置了开发环境的服务监听逻辑
• 最终编译产物是app/assets/builds/application.js，并自动在默认布局中引入

如果需要生成多个独立的JS文件（比如application.js和admin_load.js），可以用以下两种方案配置：

方案一：拆分编译脚本+单独监听 #

1. 修改package.json，新增针对后台JS的编译命令：

{
  "scripts": {
    "build": "esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build_admin": "esbuild app/javascript/admin_load.js --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

2. 更新Procfile.dev，添加后台JS的监听任务，确保开发时文件改动能自动重新编译：

web: bin/rails server -p 3000
js: yarn build --watch
js_admin: yarn build_admin --watch
css: yarn build:css --watch

方案二：单脚本多入口一次性编译 #

直接修改package.json的build脚本，同时指定多个入口文件，一次命令就能编译出所有目标JS：

{
  "scripts": {
    "build": "esbuild app/javascript/application.js app/javascript/admin_load.js --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

这种方案下，Procfile.dev不需要额外修改，原有的js: yarn build --watch会同时监听两个入口文件的变化。

在布局中引入对应JS文件 #

配置完成后，在不同布局里分别引入对应的编译产物：

• 前端布局（比如app/views/layouts/application.html.erb）保留默认的引入：<%= javascript_include_tag "application", defer: true %>
• 后台布局（比如app/views/layouts/admin.html.erb）添加：

<%= javascript_include_tag "admin_load", defer: true %>

让admin_load.js随rails assets:precompile自动构建 #

如果需要在执行rails assets:precompile时自动编译admin_load.js，可以自定义Rake任务：

1. 创建lib/tasks/assets.rake文件，写入以下内容：

namespace :assets do
  desc "Precompile admin JavaScript"
  task precompile_admin: :environment do
    system("yarn build_admin")
  end
end

# 让预编译任务自动触发后台JS的编译
Rake::Task["assets:precompile"].enhance do
  Rake::Task["assets:precompile_admin"].invoke
end

这样每次执行rails assets:precompile时，都会自动运行build_admin脚本，完成admin_load.js的编译。

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