如何将Bootstrap 4 Admin Template的JS文件接入Rails 7？

问题分析 #

你当前用的是 Rails 旧版本的 javascript_include_tag 方式引入 JS，但 Rails 7 默认采用 Importmap 或 JS Bundling（esbuild/rollup/webpack）作为 JS 加载机制，传统的 asset pipeline 配置需要调整，同时还要考虑 Turbo 对 DOM 事件绑定的影响。

解决方案 #

方案一：调整 Asset Pipeline 配置（兼容旧方式） #

1. 确认文件位置
   把所有 JS 文件放到对应目录：

   • 所有 vendor/xxx.js 文件 → app/assets/javascripts/vendor/
   • dore.script.js、scripts.js → app/assets/javascripts/

2. 添加预编译规则
   编辑 config/initializers/assets.rb，将这些 JS 文件加入预编译列表：

   Rails.application.config.assets.precompile += %w(
     vendor/jquery-3.3.1.min.js
     vendor/bootstrap.bundle.min.js
     vendor/Chart.bundle.min.js
     vendor/chartjs-plugin-datalabels.js
     vendor/moment.min.js
     vendor/fullcalendar.min.js
     vendor/datatables.min.js
     vendor/perfect-scrollbar.min.js
     vendor/glide.min.js
     vendor/progressbar.min.js
     vendor/jquery.barrating.min.js
     vendor/select2.full.js
     vendor/nouislider.min.js
     vendor/bootstrap-datepicker.js
     vendor/Sortable.js
     vendor/mousetrap.min.js
     dore.script.js
     scripts.js
   )
   

3. 简化标签写法
   可以合并成一个 javascript_include_tag，保持和原模板一致的加载顺序：

   <%= javascript_include_tag(
     'vendor/jquery-3.3.1.min',
     'vendor/bootstrap.bundle.min',
     'vendor/Chart.bundle.min',
     'vendor/chartjs-plugin-datalabels',
     'vendor/moment.min',
     'vendor/fullcalendar.min',
     'vendor/datatables.min',
     'vendor/perfect-scrollbar.min',
     'vendor/glide.min',
     'vendor/progressbar.min',
     'vendor/jquery.barrating.min',
     'vendor/select2.full',
     'vendor/nouislider.min',
     'vendor/bootstrap-datepicker',
     'vendor/Sortable',
     'vendor/mousetrap.min',
     'dore.script',
     'scripts',
     'data-turbolinks-track': 'reload'
   ) %>
   

方案二：改用 Rails 7 推荐的 Importmap（更现代） #

1. 迁移文件位置
   将所有 JS 文件移动到 vendor/javascripts/ 目录下，保持原有的层级结构。

2. 配置 Importmap
   编辑 config/importmap.rb，添加以下 pin 规则（注意保持依赖顺序）：

   pin "jquery", to: "vendor/jquery-3.3.1.min.js"
   pin "bootstrap", to: "vendor/bootstrap.bundle.min.js"
   pin "chart", to: "vendor/Chart.bundle.min.js"
   pin "chartjs-plugin-datalabels", to: "vendor/chartjs-plugin-datalabels.js"
   pin "moment", to: "vendor/moment.min.js"
   pin "fullcalendar", to: "vendor/fullcalendar.min.js"
   pin "datatables", to: "vendor/datatables.min.js"
   pin "perfect-scrollbar", to: "vendor/perfect-scrollbar.min.js"
   pin "glide", to: "vendor/glide.min.js"
   pin "progressbar", to: "vendor/progressbar.min.js"
   pin "barrating", to: "vendor/jquery.barrating.min.js"
   pin "select2", to: "vendor/select2.full.js"
   pin "nouislider", to: "vendor/nouislider.min.js"
   pin "bootstrap-datepicker", to: "vendor/bootstrap-datepicker.js"
   pin "sortable", to: "vendor/Sortable.js"
   pin "mousetrap", to: "vendor/mousetrap.min.js"
   pin "dore-script", to: "vendor/dore.script.js"
   pin "custom-scripts", to: "vendor/scripts.js"
   

3. 导入 JS 文件
   编辑 app/javascript/application.js，按顺序导入所有依赖：

   import "jquery"
   import "bootstrap"
   import "chart"
   import "chartjs-plugin-datalabels"
   import "moment"
   import "fullcalendar"
   import "datatables"
   import "perfect-scrollbar"
   import "glide"
   import "progressbar"
   import "barrating"
   import "select2"
   import "nouislider"
   import "bootstrap-datepicker"
   import "sortable"
   import "mousetrap"
   import "dore-script"
   import "custom-scripts"
   

4. 更新 Layout 标签
   替换原来所有的 javascript_include_tag 为：

   <%= javascript_importmap_tags %>
   

关键注意事项 #

• 加载顺序必须和原模板一致：比如 jQuery 要在 Bootstrap 之前加载，Moment 要在 FullCalendar 之前，否则会出现 undefined 错误。
• 处理 Turbo 冲突：原模板的 JS 可能依赖 DOMContentLoaded 事件，但 Turbo 会动态替换页面内容，导致事件绑定失效。需要把初始化代码包裹在 Turbo 的事件中：

  document.addEventListener('turbo:load', function() {
    // 这里放原来 scripts.js 或 dore.script.js 里的初始化逻辑
  });
  

  如果暂时不想用 Turbo，可以在 app/javascript/application.js 中注释掉 import "@hotwired/turbo-rails"。

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